0

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.

2

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}
| improve this answer | |
  • this has got me along. It's not the exact fix, but moves me far enough along to be able to put something together. I will update this will the full code once I get it together. Thanks :) – Cedric Jul 7 '14 at 19:07

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.