Simple Image Rotator - CMS Builder + jQuery + CSS

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

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: [gkornbluth] Simple Image Rotator - CMS Builder + jQuery + CSS

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

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.