Simple looping fade in/out slideshow with reocde

11 posts by 2 authors in: Forums > CMS Builder
Last Post: January 11, 2013   (RSS)

By esupport - January 3, 2013

Hi there,

I would like to create a simplelooping  fade in and out slideshow.

Original source http://jonraasch.com/blog/a-simple-jquery-slideshow

Without bottums, controll items.

Only looping and unlimit image (I uploaded from cmsAdmin.)

The code on HTML is quire simple.

a DIV with some IMGs in it.

<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>

Now I add my cmsbuilder code

<div id="slideshow">

<?php foreach ($slide_showRecord['image'] as $upload): ?>
<a href="<?php echo htmlencode($upload['info1']) ?>p">
<img src="<?php echo $upload['urlPath'] ?>" border="0" alt="<?php echo htmlencode($upload['info2']) ?>"/>
</a>
<?php endforeach ?>

</div>

Only the first image show on.

How can I display all of images I upload?

If I upload 10 images.  It can show 10 images.

100 images. Offcourse it can show 100 images.

Great thanks!

Jac

-Jax H.

Simple looping fade in/out slideshow

By esupport - January 3, 2013

Hi All

Reference http://www.interactivetools.com/forum/forum-posts.php?postNum=2218355#post2218355

I tried to change some code.

<?php if($slide_showRecord['image']): ?>
<div id="slideshow">
           <!-- foreach image the array create a variable called row -->
             <?php foreach ($slide_showRecord['image'] as $key => $row): ?>
           <a href="<?php echo $row['urlPath']; ?>" title="<?php echo $row['info1']; ?>" >
           <img src="<?php echo $row['thumbUrlPath']; ?>" width="72" height="72" alt="" /> </a>
           <?php endforeach?>
</div>
<?php endif;?>

Still show the first image only.

Jac

-Jax H.

Simple looping fade in/out slideshow

By Damon - January 4, 2013

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.  :)

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Simple looping fade in/out slideshow

By esupport - January 5, 2013

Hi Damon

I fixed a small place:

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

It works!

Thanks a lot!

Jax

-Jax H.

Simple looping fade in/out slideshow

By esupport - January 6, 2013

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

-Jax H.

Simple looping fade in/out slideshow

By Damon - January 7, 2013

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.

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Simple looping fade in/out slideshow

By esupport - January 8, 2013

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

-Jax H.

Simple looping fade in/out slideshow

By Damon - January 8, 2013

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!

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Simple looping fade in/out slideshow

By esupport - January 8, 2013

Hi Damon

Here you are:

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

Jac

-Jax H.