well, as the title says, when on iOS devices, when i click an images it enlarges either upside down or sideways.  It's all good on pc.  here is the code:


<script>
jQuery(document).ready(function($) {

$('.lightbox_trigger').click(function(e) {

//prevent default action (hyperlink)
e.preventDefault();

//Get clicked link href
var image_href = $(this).attr("href");

/*
If the lightbox window HTML already exists in document, 
change the img src to to match the href of whatever link was clicked

If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/

if ($('#lightbox').length > 0) { // #lightbox exists

//place href as img src value
$('#content').html('<img src="' + image_href + '" />');
 
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').show();
}

else { //#lightbox does not exist - create and insert (runs 1st time only)

//create HTML markup for lightbox window
var lightbox = 
'<div id="lightbox">' +
'<p>Click anywhere to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';

//insert lightbox HTML into page
$('body').append(lightbox);
}

});

//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});

});
</script>


and I have this tag for a photo...

<a class="lightbox_trigger" href="images/butter.jpg"><img class="bottom_content_image" src="images/butter.png"></a>



again, everything works great on a pc and even my GS6...but ipad, iphone, when clicked, the images are all f'd.....any ideas?