A BETTER JQUERY SLIDE SHOW - Jul 19th, 2015


My client wanted to have more flexibility in their slide show, like the ability to display a second image along with the
main image. (In this case an image that compares the size of their artwork to the size of a person.

Greg Thomas from Interactive Tools suggested looking at the JQuery plugin Cycle2 at:

http://jquery.malsup.com/cycle2/

It proved to be a very versatile solution that was really easy to implement, is extremely well documented, and has
plenty of options and plugins on the downloads page.

There are only 2 files that need to be loaded in the head of your viewer (although plugin files are also needed for
advanced functions).
jquery.cycle2.min.js and http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

Here’s my implementation for a captioned, fade in slide show with a second image called size_image that’s displayed
to the left of the caption information. Each image is linked to a detail page for that record called
‘homepageslidedetail.php’. NOTE: the preg_replace makes sure that there are no extra double quotes hanging around to
muck up the works.

I’m using a multi-record editor called ‘portfolio_images’ with 2 upload fields called ‘image’ and ‘size
image’ along with text fields for ‘title’ and ‘size_of_work and other information.

At the very top of the viewer

<?php

require_once "/path_to_your_server/cmsAdmin/lib/viewer_functions.php";

// load records from 'portfolio_images'
list($portfolio_imagesRecords, $portfolio_imagesMetaData) = getRecords(array(
'tableName' => 'portfolio_images',
'loadUploads' => true,
'loadUploads' => true,
'allowSearch' => false,
));

In the Head section of the viewer: (my .js files are in a folder called Scripts)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<
script src="Scripts/jquery.cycle2.min.js"></script>

And in the Body of the viewer:

<?php foreach ($portfolio_imagesRecords as $record): ?>
<div align="center">
<a href="homepageslidedetail.php?<?php echo $record['num']?>">
<?php foreach ($record['image'] as $index => $upload): ?> <img src="<?php echo
htmlencode($upload['thumbUrlPath2']) ?><?php endforeach ?>" >
</a>
<div class="cycle-caption">

<table align="center" width="60%" border="0" cellspacing="0" style="border:hidden">
<tr>
<td class="text_font" align="left" valign="middle" style="padding-left:15px;">
<?php foreach ($record['size_image'] as $index => $upload2): ?><img src="<?php echo
htmlencode($upload2['thumbUrlPath']) ?>" /><?php endforeach ?></td>
<td class="text_font" align="left" valign="top"><?php $record['title'] = preg_replace("/['\"]/","&acute;",
htmlencode($record['title']) ) ;
$record['size_of_work'] = preg_replace("/['\"]/","&acute;", htmlencode($record['size_of_work']) ); ?>
<?php echo strtoupper($record['title']) ?>
<?php echo strtoupper($record['size_of_work']) ?>
</td>
</tr>
</table></div></div>
<?php endforeach ?>


</div>

</td>
</tr>
<tr>
<td width="60%" valign="top" align="center" style="text-align:center;">
<span class="heading_font" ><b>

YOUR SHOW TITLE GOES HERE</b></span>
</td>
</tr>
<tr>
<td align="center" > <span class="text_font" >Click/Tap An Image To Learn More
</span><div class="text_font" align="center" style="text-align:left; width:60%;">
<?php echo $curated_show_description ?></div>

</td>
</tr>
</table>







The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service