In short, I am using WP Google Map Pro to display posts which does not support shortcodes for galleries. As a result, I had to create my own gallery with images as shown below:
<div id="post_content">
<img src="image1.jpg" class="thumb" />
<img src="image2.jpg" class="thumb" />
<img src="image3.jpg" class="thumb" />
</div>
<div class="showimagediv"></div>
This is done using jquery and it works well:
<script>
$(document).ready(function() {
$('.thumb').on('click', function() {
var img = $('<img />', {src : this.src,
'class': 'fullImage'
});
$('.showimagediv').html(img).show();
});
$('.showimagediv').on('click', function() {
$(this).hide();
});
});
</script>
However, I am looking to enhance the gallery to include lightbox functionality with previous and next arrows.
My main question is: How can I achieve this? Is there a way to load the next image from the same div into "showimagediv" and replace image1 with image2? Any suggestions?