Question

Bit stuck with this one. I’m building a product image gallery for a Shopify shop that needs to have the following functionality:

1. Thumbnails for each product image
2. Medium-sized image that goes into the main image ‘container’
3. Full-sized image that appears as a lightbox when you click the medium-sized image

So, you would click on a thumbnail which would load the medium sized image into the image container and then clicking on that medium sized image would show the full size image as a lightbox overlay.

Here’s my mark up:

<div id="imgcontainer">
                <a href="assets/product-fullsize.jpg" class="overlay"><img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /></a>
            </div> <!-- End div#imgcontainer -->
            <div id="thumbs">
                <div class="thumbnav">
                    <ul>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                    </ul>
                </div> <!-- End div#thumbnav -->
                <a href="javascript:void(0);" class="tbpr">&nbsp;</a>
                <a href="javascript:void(0);" class="tbnx">&nbsp;</a>
            </div> <!-- End div#thumbs -->
        </div> <!-- End div#main -->

Can anyone recommend the best way to do this? Shopify uses a language called ‘Liquid’ that lets me use a ‘foreach’ statement to output markup for the images, or even just the three types of image urls (thumbnail, medium and fullsize).

Note that there is no simple naming convention for the image filename and location as they are generated on the fly, so I can’t just swap out the ‘medium’ part of the filename for ‘fullsize’ etc.

Thanks for any pointers,

Osu

Answer 1

Can you store the full-size urls as a data attribute on the anchors? E.g.,

<li><a href="assets/medium-1.jpg" data-fullsize="assets/fullsize-1.jpg">
       <img src="assets/thumb-1.jpg" alt="..." /></a></li>

Then you could use something like:

$('a[data-fullsize]').click( function() {
     var $this = $(this);
     $('#imgcontainer a:first').attr('href',$this.data('fullsize'))
                               .find('img')
                               .attr('src',$this.attr('href'));
     return false;
});
$('#imgcontainer').on('click','a:first',function() {
     // load href into lightbox
     return false;
});