Set any number of images (sized as thumbnails) with class="imgGrow" and they will load in a modal on click. I thought to use Multicolor's Autolightbox but didn't want all images to be active so cobbled this snippet together. I haven't tried but, in theory, any content can be loaded in the modal.
I hope it might be useful for you.
best - Kusalo
Code: Select all
<?php
// ideally all you have to change is the path to your images.
// take care regarding positioning (relative, absolute, fixed) for shortcode container, toolDiv & dirScreen
// $snipData builds using single quotes. Including js requires escaping: see below... $("#toolDiv").animate
$snipData .= '<!-- images displayed -->
<img class="imgGrow" src="yourImagePath" style="width:44px;height:44px;" />
<img class="imgGrow" src="yourImagePath" style="width:55px;height:55px;" />';
$snipData .= '<!-- wrapper for large img -->
<div id="toolDiv" style="z-index:122; background:#038b00; position:fixed; left:-50px; top:50px; padding:6px; border-radius:8px; opacity:0;">
</div>
<!-- screen overlay -->
<div id="dirScreen" style="background:#000; position:fixed; left:-50px; top:50px; display:block; opacity: 1.0; z-index:99; cursor:pointer;"></div>
<script> $(document).ready(function(){
$(".imgGrow").click(function(){
ourImg = $(this).attr("src");
wide = this.naturalWidth;
high = this.naturalHeight;
winWide = $(window).width();
if (wide>winWide) { wide = winWide; leftOffset = 0; }
else { leftOffset = (winWide-wide)/2; }
$("#dirScreen").animate({"opacity":"1.0"}, 900 ).css ({ "left":0, "top":0, "width":$(document).width(), "height":$(document).height() });';
$snipData .= ' $("#toolDiv").animate({"opacity":"1.0"}, 900 ).html("<img src=\'"+ourImg+"\' style=width:100%; height:auto; /> <div id=\'closer\' style=\'z-index:133; cursor:pointer; border-radius:50%; width:33px; height:33px; background:#FFF; position:absolute; right:2px; top:2px; text-align:center; vertical-align:middle; line-height:33px; font-size:28px; font-family:sans-serif; font-weight:bold; border:1px solid #000; \'><span id=\'xClose\' style=\'cursor:pointer\'>X</span></div>").css ({ "z-index":"111", "display":"block", "color":"#000","left":leftOffset,"top": "111px","width":wide, "height":"auto"});
});
$("body").on("click", "#dirScreen, #closer, #xClose", function(){
$("#dirScreen, #toolDiv").css ({ "opacity":"0.0", "left": "-55px", "top": "-50px", "width": 0, "height": 0 });
});
$("body").on("keyup", function (e) { // just incase click-close fails
if (e.which === 27) { // Esc key
$("#dirScreen, #toolDiv").css ({ "opacity":"0.0", "left": "-50px", "top": "-50px", "width": 0, "height": 0 });
}
});
}); // END ready
</script>';
?>