How would I go about integrating a jquery slider in EE with CE Img?

Question

I'm currently trying (without much luck) to properly integrate the Allinone Thumbnail Banner into an EE template. I use CE Img with Matrix to feed the images.

The original Allinone Html looks like the following:

    <div id="containingDiv">


        <div id="allinone_thumbnailsBanner_simple" style="display:none;">
            <ul class="allinone_thumbnailsBanner_list">
                <!-- IMAGES -->
                <li data-bottom-thumb="images/simple/thumbs/01_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/simple/01_simple.jpg" alt="" /></li>
                <li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
                <li data-bottom-thumb="images/simple/thumbs/03_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/simple/03_simple.jpg" alt="" /></li>

           </ul> 



            <!-- TEXTS -->


           <div id="allinone_thumbnailsBanner_photoText1" class="allinone_thumbnailsBanner_texts">
                <div class="allinone_thumbnailsBanner_text_line textElement11_simpleResponsive" data-initial-left="0" data-initial-top="60" data-final-left="0" data-final-top="305" data-duration="0.5" data-fade-start="0" data-delay="0">&nbsp;&nbsp;&nbsp;UP TO <a href="http://codecanyon.net/user/LambertGroup" target="_blank">4 TYPES</a> OF SLIDERS<br />&nbsp;&nbsp;&nbsp;Each with multiple SKINS</div>
           </div>       

           <div id="allinone_thumbnailsBanner_photoText2" class="allinone_thumbnailsBanner_texts">
                <div class="allinone_thumbnailsBanner_text_line textElement21_simpleResponsive" data-initial-left="200" data-initial-top="60" data-final-left="45" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="font-weight:bold;">16 TRANSITION EFFECTS<br /> FOR IMAGES</span><br />optional can set the transition<br /> for each image</div>   
           </div>  


    </div>

--Where the Images are the thumbs and displayed image. And the Texts are the subtitles for each image.

This is as far as I could get

   <div id="containingDiv">


        <div id="allinone_thumbnailsBanner_simple" style="display:none;">

          <ul class="allinone_thumbnailsBanner_list">
            <!-- IMAGES -->
            {exp:channel:entries channel="top_photos|gallery|recent" limit="8" offset="1" status="Open|fixed"}

           {article_images} 

             <li data-bottom-thumb="{image_matrix_image}" data-text-id="#allinone_thumbnailsBanner_photoText1">

              {exp:ce_img:single src="{image_matrix_image}" disable_xss_check="yes" width="960" height="500" allow_scale_larger="yes" crop="yes" quality="60"}" alt="" /></li>






                        <div id="allinone_thumbnailsBanner_photoText1"     class="allinone_thumbnailsBanner_texts">
                        <div class="allinone_thumbnailsBanner_text_line textElement11_simpleResponsive"  <a href="{site_url}{channel_short_name}/view/{url_title}"  "{image_matrix_cutline}"</a> </div>
                   </div>

                {/article_images} 

     {/exp:channel:entries}
    </li>





       </div>




    </div>  

But I still can't display the subtexts for the images properly or at all. And I know I've heard something about using the {row_count} variable along with the div classes but I haven't had any luck with that either. I would appreciate any hints as how to go about EE'ing up jquery Html and the classes. Thanks in advance.

Answer 1

It's a little tricky to help since I can't find a documentation page for the Allinone Thumbnail Banner jQuery plugin. But if I had to guess based on what the HTML output is supposed to look like, then these are the issues you are likely to be having:

The first issue is that you are not closing your ul tag. It needs to be closed before you output your thumbnails and captions. The simplest solution, at least to get started, is to use two channel:entries loops. One to create the list of images, the other to create the associated captions.

The second issue relates to uniquely identifying your captions. Since your channel:entries loop is pulling multiple entries, and thus multiple Matrix fields, {row_count} will not uniquely identify your captions. You'd end up outputing a row count of "1" up to eight times. This is because your channel:entries limit is set to 8 and I'm guessing all of your Matrices have at least one row.

So instead, try using {row_id} which will be unique.

Other HTML errors: It also looks like you're missing a closing bracket on the opening tags of div.allinone_thumbnailsBanner_text_line and its nested a tag.

Definitely view source and/or inspect the HTML that is generated by your template and compare the actual output to your desired output. In addition, running it through an HTML validator can help you catch basic errors that are easy to overlook.

If I understand your setup this should do the trick:

<div id="containingDiv">

  <div id="allinone_thumbnailsBanner_simple" style="display:none;">

    <ul class="allinone_thumbnailsBanner_list">
      {exp:channel:entries channel="top_photos|gallery|recent" limit="8" offset="1" status="Open|fixed"}

         {article_images} 

            <li data-bottom-thumb="{image_matrix_image}" data-text-id="#allinone_thumbnailsBanner_photoText{row_id}">
              {exp:ce_img:single src="{image_matrix_image}" disable_xss_check="yes" width="960" height="500" allow_scale_larger="yes" crop="yes" quality="60"}" alt="" />
            </li>

          {/article_images} 

      {/exp:channel:entries}
    </ul>

    {exp:channel:entries channel="top_photos|gallery|recent" limit="8" offset="1" status="Open|fixed"}

      {article_images}

        <div id="allinone_thumbnailsBanner_photoText{row_id}"     class="allinone_thumbnailsBanner_texts">
          <div class="allinone_thumbnailsBanner_text_line textElement11_simpleResponsive">
            <a href="{site_url}{channel_short_name}/view/{url_title}"> "{image_matrix_cutline}"</a> 
          </div>
       </div>

      {/article_images} 

    {/exp:channel:entries}

  </div>

</div>  

If this doesn't get you where you need to go, I'd recommend simplifying your template first, then build up from there. This will ensure all your EE tags are working as expected and you don't have typos in your custom field names, syntax errors, or other errors of that nature.