Simple Image Rotator - CMS Builder + jQuery + CSS

8 posts by 4 authors in: Forums > CMS Builder
Last Post: August 10, 2011   (RSS)

By Zicky - January 25, 2011 - edited: February 2, 2011

Here's a simple image rotator built with jQuery, CSS and pulling records from a Category Menu, using top level categories. It's a stripped down version of http://www.gmarwaha.com/jquery/jcarousellite/ if you need a more full feature version of this jQuery image rotator.

The rotator pauses on hover and once clicked will delivery you to the category menu record.

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "/home/content/a/b/c/thiswebsite/html/abcdef/lib/viewer_functions.php";

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

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Logo Rotator</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">
</head>

<body>
<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>
</body>
</html>


Attached is a sample php file, css and two js files. I stripped out the html effecting the buttons, but the (1-jcarousellite_button.js) file is required for this to run even though there are no prev/next buttons in the php file. You could probably edit it out the need for it in the (1-jcarousellite_1.0.1.js), but I was felling too lazy to mess with it right now.

Hope someone finds this useful.

Re: [zick] Simple Image Rotator - CMS Builder + jQuery + CSS

By Jason - January 26, 2011

Hi,

That's great. Thank you for sharing this.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

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

Re: [zick] Simple Image Rotator - CMS Builder + jQuery + CSS

By gkornbluth - February 2, 2011

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
The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [zick] Simple Image Rotator - CMS Builder + jQuery + CSS

By gkornbluth - February 2, 2011

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
The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Simple Image Rotator - CMS Builder + jQuery + CSS

By Zicky - February 2, 2011

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


Cool... I'll check it out. I've had may hands full lately and just haven't had much time to mess with the Calendar. But I hope to get back into that project soon.

Re: [zick] Simple Image Rotator - CMS Builder + jQuery + CSS

By mingyq - August 9, 2011

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]

Re: [mingyq] Simple Image Rotator - CMS Builder + jQuery + CSS

By Zicky - August 10, 2011

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.