SIMPLE IMAGE ROTATOR - CMSB + JQUERY + CSS - Dec 29th, 2018


User Zickey offered this simple image rotator built with jQuery, CSS and pulling records from a Category Menu, using top
level categories.

He says 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.

You can download the required files and a sample viewer from

http://www.thecmsbcookbook.com/downloads/simple_image_rotator.zip

To implement this, the following code goes at the top and in the head section of your viewer:
(Don’t forget to change the path to your viewer_functions.php)


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

require_once "/path_to_your/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>


And in the body where you want the images to be displayed.


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


You can modify the css file to make the container any size that you want it to be.

Zickey said he 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.



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