Simple looping fade in/out slideshow with reocde

Hi,

To recreate this code:

<div id="slideshow">

<img src="../simple-jquery-slideshow/image1.jpg" alt="Slideshow Image 1" class="active" />
<img src="../simple-jquery-slideshow/image2.jpg" alt="Slideshow Image 2" />
<img src="../simple-jquery-slideshow/image3.jpg" alt="Slideshow Image 3" />
<img src="../simple-jquery-slideshow/image4.jpg" alt="Slideshow Image 4" />

</div>

here is the CMS Builder code you can try:

<div id="slideshow">
    <?php $counter = 1; ?>
    <?php foreach ($slide_showRecord['image'] as $upload): ?>
        <?php if($counter == 1) : ?>
            <img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" class="active" />
        <?php else : ?>
            <img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" />
        <?php endif: ?>
        <?php $counter++ ; ?>
    <?php endforeach ?>
</div>

Let me know if this works for you.  :)

Hi Damon

I fixed a small place:

 <?php endif: ?> TO  <?php endif; ?>

It works!

Thanks a lot!

Jax

Hi Damon

I could not add Link code for the looping slide show.

It will loopling the first image only.

Here is my code:

<div id="slideshow">
<?php $counter = 1; ?>
<?php foreach ($slide_showRecord['image'] as $upload): ?>
<?php if($counter == 1) : ?>

<a href="#">
<img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" class="active" />
</a>

<?php else : ?>

<a href="#">
<img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" />
</a>

<?php endif; ?>
<?php $counter++ ; ?>
<?php endforeach ?>
</div>

Is there any solution?

Thanks!

Jac

Hi Jac,

That code works for me. Try adding border="1" right after class="article" like this:

 <img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" class="active" border="1"/>

Then the first image will have a border and the rest following won't.

Hi Damon

I add <a href="#"> code for all images.   It will looping first image only.   

<div id="slideshow">
<?php $counter = 1; ?>
<?php foreach ($slide_showRecord['image'] as $upload): ?>
<?php if($counter == 1) : ?>

<a href="#">
<img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" class="active" />
</a>

<?php else : ?>

<a href="#">
<img src="<?php echo $upload['urlPath'] ?>" alt="Slideshow Image <?php echo $counter; ?>" />
</a> 

<?php endif; ?>
<?php $counter++ ; ?>
<?php endforeach ?>
</div>

Did i do the right thing?

Jac

Hi Jac,

Can you check the page source to see if the images are output as expected?

I suspect that there may be an issue with the slideshow that is causing only the first image to loop.

Can you post a link to the page so I can take a look? or email me the URL to support@interactivetools.com ?

Thanks!

Hi Damon

Here you are:

http://174.132.79.189/~quanmax/en/slideshow.php

Jac

Hi Jac,

I looked at your page and the images are being output correctly in the code:

 <div id="slideshow">
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/2010081114532150.jpg" alt="Slideshow Image 1" class="active"/>
          </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/2012071617100596_001.jpg" alt="Slideshow Image 2" />
          </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/2012081716421271_001.jpg" alt="Slideshow Image 3" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20091130153408684_001.jpg" alt="Slideshow Image 4" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20101123141439585_001.jpg" alt="Slideshow Image 5" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110127170018322_001.jpg" alt="Slideshow Image 6" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110214184247558_001.jpg" alt="Slideshow Image 7" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110304174930220_001.jpg" alt="Slideshow Image 8" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110620173011943_001.jpg" alt="Slideshow Image 9" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110624181225799_001.jpg" alt="Slideshow Image 10" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110718150338163_001.jpg" alt="Slideshow Image 11" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110722162102397_001.jpg" alt="Slideshow Image 12" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20110727181927147_001.jpg" alt="Slideshow Image 13" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120711111639346_001.jpg" alt="Slideshow Image 14" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120711111839440_001.jpg" alt="Slideshow Image 15" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120716171139408_001.jpg" alt="Slideshow Image 16" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120716171528299_001.jpg" alt="Slideshow Image 17" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120716172149440_004.jpg" alt="Slideshow Image 18" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120716181955986_001.jpg" alt="Slideshow Image 19" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120809172049596_001.jpg" alt="Slideshow Image 20" />
           </a>
          <a href=#>
           <img src="/~quanmax/cmsAdmin/uploads/20120817164347712_001.jpg" alt="Slideshow Image 21" />
           </a>
</div>

The issue appears to be with the slideshow code when you wrap the images in an anchor tag.

On the Simple Slide Show site, http://jonraasch.com/blog/a-simple-jquery-slideshow , the author of the slideshow wrote this in one of the comments:

Replace every “IMG” with “A” in the Javascript and CSS. If you are using the “active” class, attach it to the anchor (A) tag instead of the image.

A more robust solution is to wrap each frame in a div and target the div’s instead of the images (or anchors). This would allow you to add text, multiple images, etc.

Try this out and post a comment to the Simple Slide Show site with questions so the author can clarify any other changes needed.

Hope this helps!