Simple Image Rotator - CMS Builder + jQuery + CSS
8 posts by 4 authors in: Forums > CMS Builder
Last Post: August 10, 2011 (RSS)
By Mikey - 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.
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.
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.
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/
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
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
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
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 Mikey - February 2, 2011
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
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
Re: [zick] Simple Image Rotator - CMS Builder + jQuery + CSS
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
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
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 Mikey - 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]
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 Mikey - 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.
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.