1

I've recently come across a bit of an issue that's got me stumped, here goes.

I have a Matrix field called {images} with the following fields within it;

  • project_image (Assets fieldtype)
  • project_title
  • project_additional_images (Assets fieldtype)

On the front end of the site the project_image displays. However on clicking the project_image I would like to trigger a lightbox plugin (Swipebox) which in turn displays the multiple images added in project_additional_images.

My code is as follows

{images}

<li>
    <a class="swipebox" href="{project_additional_images:url}" rel="gallery-{row_id}">

                {exp:ce_img:single src="{project_image}"  
                    crop="yes" 
                    allow_scale_larger="no" 
                    class="project-img" alt="{title}"  
                    width="230" 
                    height="230" 
                    quality="100" 
                    filter="auto_sharpen"}

     </a>     

</li><!-- end item -->

{/images}

Is there a way to accomplish this. Looking at the code above, that currently only gets me halfway, in that it will only show a single image from the project_additional_gallery field. I would ideally need it to show multiple images. The gallery-{row_id} was a shot in the dark. If anyone offer some advice on this that would be much appreciated.

As you can see above, the chunk of markup also makes use of CE Image and Swipebox

Thanks Adam

1

Since you're not displaying link to the other images anywhere in your template, you'll need to take a different approach. It looks like you can have Swipebox load images dynamically by passing it an array.

So start by adding your gallery images as a comma-separated list inside of a data attribute on your link:

{images}
<li>
    <a class="gallery" href="{project_additional_images:url}" data-images="{project_additional_images backspace="1"}{url},{/project_additional_images}">
        {exp:ce_img:single src="{project_image}"  crop="yes" allow_scale_larger="no" class="project-img" alt="{title}"  width="230" height="230" quality="100" filter="auto_sharpen"}
     </a>     
</li><!-- end item -->
{/images}

Then your JavaScript gets a little bit more complex:

$('.gallery').each(function()
{
    images_string = $(this).data('images').split(',');
    images_array = [];
    $(images_string).each(function(index, el)
    {
        images_array.push({href: el});
    });
    $(this).click(function(e)
    {
        e.preventDefault();
        $.swipebox(images_array);
    });
});

Noticed I changed the class from swipebox to gallery so that the default Swipebox behaviour doesn't attach to the element.

This is untested, but it should get you close.

5
  • Thanks a lot for this, definitely progress. I am noticing that when I hover over project_image the URL its linking to is correct and is pointing to the right image, however on clicking the link and triggering the popup, it displays the image(s) of the last project_image instance.
    – Adam
    Feb 5 '14 at 18:31
  • If you look at the source code, does the data-images attribute contain the correct image names? Feb 5 '14 at 18:50
  • Yes, all correct, with multiple images separated by comma and making use of backspace. The URL's are spot on but somehow when you trigger $.swipebox(images_array); it seems to revert to the last group of project_additional_images in the matrix
    – Adam
    Feb 5 '14 at 18:53
  • Hmm. Try using $(this).on('click', function(e) instead of $(this).click(function(e). Feb 5 '14 at 20:37
  • Still no joy unfortunately, I'm not an expert by any stretch, but could the problem be stemming from the triggering of swipebox. It seems everything prior to that event is how it should be
    – Adam
    Feb 5 '14 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.