I'm having a problem with the Content Elements {gallery} function where I would like to take a group of images and put them into a gallery, but display one main image which when clicked opens up into a fancybox gallery. The current code I'm using that works is:
{if Custom_channel_field}
{!-- HANDLE SCALING / DISPLAY OF MAIN ARTICLE IMAGE --}
{Custom_channel_field offset="1"}
{exp:ce_img:pair disable_xss_check="yes" src="{image}" max="500" quality="90" allow_scale_larger="yes"}
<a class="fancybox-buttons" data-fancybox-group="button" href="{image}" title="{caption} {if notes}({notes}){/if}"></a>
{/exp:ce_img:pair}
{/Custom_channel_field}
{!-- PREPARE IMAGES FOR THE IMAGE GALLERY --}
{Custom_channel_field}
{if row_count == 1}
<a class="fancybox-buttons" data-fancybox-group="button" href="{image}" title="{caption} {if notes}({notes}){/if}">{exp:ce_img:single src="{image}" disable_xss_check="yes" width="500" quality="90" allow_scale_larger="yes" class="photo"}
{if total_rows > "1"}<p>Image Gallery ({total_rows} Images)</p>{/if}
</a>
{/if}
{/Custom_channel_field}
{/if}
And so that works fine, but with the change to using Content Elements I'm confused. I can get all of the images to show using:
{!-- Content Element GALLERY --}
{gallery}
{if element_name=="galleryname"}
{!-- HANDLE SCALING / DISPLAY OF MAIN IMAGE --}
{images}
<a class="fancybox-buttons" data-fancybox-group="button" href="{image}" title="{caption}">
{exp:ce_img:single src="{image}" disable_xss_check="yes" width="500" quality="90" allow_scale_larger="yes" class="photo"} {if total_rows > "1"}<p>Image Gallery ({total_rows} Images)</p>{/if}</a>
{/images}
{/if}
{/gallery}
So when this runs it spits out HTML that looks like:
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image1.jpg" title="pic1">
<img src="the_image1.jpg" class="photo" width="500" height="333" alt="" />
</a>
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image2.jpg" title="pic2">
<img src="the_image2.jpg" class="photo" width="500" height="600" alt="" />
</a>
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image3.jpg" title="pic3">
<img src="the_image3.jpg" class="photo" width="500" height="600" alt="" />
</a>
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image4.jpg" title="pic4">
<img src="the_image4.jpg" class="photo" width="500" height="500" alt="" />
</a>
So, all of the images are displaying on the page at once and within a fancybox gallery that is linked to each other. Now where I'd like to get is where one of the images is displayed and the others display on a click to the gallery. Such as this HTML:
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image1.jpg" title="pic1">
</a>
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image2.jpg" title="pic2">
</a>
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image3.jpg" title="pic3">
</a>
<a class="fancybox-buttons" data-fancybox-group="button" href="the_image4.jpg" title="pic4">
<img src="the_image4.jpg" class="photo" width="500" height="500" alt="" />
</a>
Which when I manually edit the HTML in Firebug displays exactly what I'm trying to achieve. I have contacted KREA (creators of Content Elements) about this same issue and received an email that replied:
{gallery}
{if element_name == "maingallery"}
...here goes your code...
{/if}
{/gallery}
But I'm sure there has to be more to this.
Any feedback and suggestions of how I can properly get to this point are much appreciated.