Hi guys!

First, as it's my first post for this year, let me wish you all a successful, Happy New Year!
Second, I need an opinion about implementing a Coda slider image gallery using Couch CMS. The static, plain HTML implementation works perfectly:

Code: Select all

<div class="slider-wrap">
      <div id="main-photo-slider" class="csw">
         <div class="panelContainer">
            <div class="panel" title="Panel 1"><!--Start Panel 1-->
               <div class="wrapper">
                  <img src="images/image1.jpg" alt="" />
                  <div class="photo-meta-data">Description 1</div>
               </div>
            </div><!--End Panel 1-->
            <div class="panel" title="Panel 2"><!--Start Panel 2-->
               <div class="wrapper">
                  <img src="images/image2.jpg" alt="" />
                  <div class="photo-meta-data">Description 2</div>
               </div>
            </div><!--End Panel 2-->      
         </div><!--End PanelContainer-->
      </div><!--End main-photo-slider-->

      <div id="movers-row">
         <div><a href="#1" class="cross-link"><img src="images/image1-thumb.jpg" class="nav-thumb" alt="" /></a></div>
         <div><a href="#2" class="cross-link active-thumb"><img src="images/image2-thumb.jpg" class="nav-thumb" alt="" /></a></div>                  
      </div>
   </div><!--End slider-wrap-->

Using Couch shouldn't be a problem except the

Code: Select all

<a href="#1" class="cross-link">, <a href="#2" class="cross-link"> ... <a href="#n" class="cross-link">

numbering part which need to be automated somehow.
Any tip is highly appreciated

Regards,
Attila

Best wishes to you for the new year, Atilla.

This looks like a job for k_count....

Code: Select all

<cms:pages >
   <div><a href="#<cms:show k_count/>" class="cross-link"><img src="<cms:show image-thumb />" class="nav-thumb" alt="" /></a></div>
</cms:pages>

[trendoman]

OOPS, Tim's here faster

Hi!

Suppose, you are going to use cms:pages to list images.
Place <cms:dump /> inside cms:pages and you will see all the variables available during the listing. Among those, you'd surely see k_count. This is the tip you need

Code then looks like this:

Code: Select all

<div><a href="#<cms:show k_count />" class="cross-link"><img src="images/image1-thumb.jpg" class="nav-thumb" alt="" /></a></div>

Make sure it also is placed in pages tag.

Tim, Trendoman... thank you guys! With your help I just finished implementing my Coda slider image gallery using images from Couch CMS created gallery!

Code: Select all

<div class="slider-wrap">
      <div id="main-photo-slider" class="csw">
         <div class="panelContainer">
           <cms:pages masterpage='photo-gallery.php' limit='9' >
            <div class="panel" title="Panel 1"><!--Start Panel-->
               <div class="wrapper">
                  <img src="<cms:thumbnail gg_image width='350' height='263'/>" alt="<cms:show k_page_title/>" />
                  <div class="photo-meta-data"><cms:show k_page_title/></div>
               </div>
            </div><!--End Panel-->
           </cms:pages>   
         </div><!--End PanelContainer-->
      </div><!--End main-photo-slider-->

      <div id="movers-row">
         <cms:pages masterpage='photo-gallery.php' limit='9' >
               <div><a href="#<cms:show k_count/>" class="cross-link"><img src="<cms:thumbnail gg_image width='106' height='80'/>" class="nav-thumb" alt="<cms:show k_page_title/>" /></a></div>
         </cms:pages>               
      </div>
   </div><!--End slider-wrap-->