jTag
jTag copied to clipboard
djpate
For Responsive Images
I needed this code for mobile designs and i added some line to fit image for responsivity. I'm not an expert of github but i will try to explain how i did it. Maybe it can help someone.
1. Added a css as;
.jTagArea{ background-size: cover; }
2.Added this two line to the Line292, after the .jTagSaveClose function
responsivewidth = obj.parent().width();
responsiveheight = obj.parent().height();
3.There are 5 lines which adds background position to draggable area which is;
jtagdrag.css({backgroundPosition: position(overlay)});
4. I added this code below of those lines.
jtagdrag.css({backgroundSize: responsivewidth + 'px '+ responsiveheight +'px' });
5. in this case everything looks awsome but you need to save top_pos and left values as percent. For this you can calculate it in the front script like;
left = ( left / $( "#img" ).width() ) * 100 ;
top_pos= ( top_pos/ $( "#img" ).width() ) * 100 ;
Now even the image fit the screen or change the width with screen size, jTag works well. NOT:
