Simple Image Rotator - CMS Builder + jQuery + CSS

Hi,

That's great. Thank you for sharing this.

Thanks Zick

Great post.

Could you attach the rotate_this.ini.php that you used.

I'll pass it all on in the cookbook

Thanks,

Jerry

Hey Jerry,
The (rotate_this.ini.php) file is now among the attachments.

Here's a little info on how I used this.

My client who is a product distributor wanted to display their supplier's logos on their home page. They also wanted people to be able to click on a logo and arrive to a landing page with more details about the supplier.

So I created a supplier's category menu and added an upload field called "logos". I then set up the supplier's list and details viewer pages.

Once the supplier pages where built I then add the "rotate_this" record code seen below to my client's home page in the upper most php area and just below the home page php record code.

list($rotate_thisRecords, $rotate_thisMetaData) = getRecords(array(
'tableName' => 'rotate_this',
));

I then added my links and scripts code seen below to power the logo rotator to the home page, just below the page's title <title>The Home Page</title>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/1-jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/1-jcarousellite_button.js"></script>
<link rel="stylesheet" type="text/css" href="css/simplelogorotator.css">

With that complete I just needed to figure out where I wanted the logo rotator to appear on the home page and dropped in the code seen below.

<div id="rotate_this">
<div id="slide-container">
<div id="slides-boxed">
<ul>
<?php foreach ($rotate_thisRecords as $record): ?>
<?php foreach ($record['logo'] as $upload): ?>
<!-- logos -->
<li>
<?php if ($upload['hasThumbnail']): ?>
<div class="slide-images" style="background:url(<?php echo $upload['thumbUrlPath'] ?>) no-repeat 0 0;" onmouseover="this.style.cursor='pointer';" onclick="document.location.href='<?php echo $record['_link'] ?>'"></div>
<?php endif ?>
</li>
<!-- /logo -->
<?php endforeach ?>
<?php endforeach ?>
</ul>
<!-- /slides-boxed --></div>
<!-- /slide-container --></div>
<!-- /rotate_this --></div>

Cheers,
Zick

Thanks Zick,

I'm also working on a (small) update to the calendar project and will post it very soon.

http://www.interactivetools.com/iforum/Products_C2/CMS_Builder_F35/Calendar_populated_with_CMS_Builder_records_P82903-1

Jerry

OK, so I followed your instructions and got this to work perfect including adding a link on each image by using the additional image fields (Caption etc) for the user to be able to have each image link to wherever they want.

Now, the images are sliding in from the right as per the script, but do you know if it's a way to make these images fade in instead of sliding in?

MingyQ [cool]

Hey Mingyq,
I checked the script and the js files, but didn't see any mention of a fade option for the simple image rotator. Try checking out the site http://www.gmarwaha.com/jquery/jcarousellite/ ... there may be some documentation on how to implement a fade.