Moving to Content Elements from CE IMG, Matrix and fancybox?

Question

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.

Answer 1

Looks like you're just missing conditionals based on the image {count}. This should get you in the right direction. I didn't add in your CE Image tags.

 {gallery}
   {if element_name=="galleryname"}
     {images}
       {if count == 1}
         <a class="fancybox-buttons" data-fancybox-group="button" href="{image}" title="pic{count}">
           <img src="{image}" class="photo" width="500" height="500" alt="" /> 
         </a>
       {/if}
       {if count != 1}
         <a class="fancybox-buttons" data-fancybox-group="button" href="{image}" title="pic{count}"></a>
       {/if}
     {/images}
 {/gallery}