Image Rotator

Hi drupalfool,

it should be easy to implement. But the problem i see is that many people will not need or want this feature...

i am still thinking about the right implementation for the coor switcher... ;-)

i would recommend this script here... it uses jquery...

http://medienfreunde.com/lab/innerfade/

im sorry, i dont have much time these days... otherwise i would try to explain how you can implement it ... but if you look at the source code it should explain itself.. you need a div container that has a certain name (id)... then just include the javascript at the head of the page.tpl.php and it will do its magic ;-)

as a general tip. Downlaod Firefox. Then download the Firebug Plugin.

It will help you a lot in figuring out what is going on in your template and where. Rcightclick on any element on a website and select "Inspect Element" from the firebug menu. It will show you the html source for any given element and it will show you which css information exists in all the different css files (and which is used).

The code of the innerfade script should all be put into the page.tpl.php ... but i didnt have the time to try it myself... Use Firebug, it will help you...

First: dont place the js code in the drupal/misc folder ;-) put all the custom template stuff in the theme folder

it should be something like sites/all/themes/fourseasons/innerfade/jquery.innerfade.js

then add somehting like this to your template.php

<?php
drupal_add_js(base_path() . 'sites/all/themes/fourseasons/innerfade/jquery.innerfade.js');
drupal_add_js('
  $(document).ready(function(){
    $('#header-img').innerfade({
      speed: 1000,
      timeout: 3000,
      type: 'sequence',
      containerheight: '200px'
    });
  });
', inline);

?>

i was a bit fast, try this without the php delimiters:

<?php
drupal_add_js(base_path() . 'sites/all/themes/fourseasons/innerfade/jquery.innerfade.js');
drupal_add_js('
  $(document).ready(function(){
    $("#header-img").innerfade({
      speed: 1000,
      timeout: 3000,
      type: "sequence",
      containerheight: "200px"
    });
  });
', inline);

?>

if i had more time i would really try to help you out, but im doing this while my customers are writing angry mails ;-)

if it helps, the marinelli theme for d6 has rotating banners - perhaps you could look over his code?
http://drupal.org/project/marinelli

Is this on a live site? I would like to see it in action with the four seasons theme. Thanks.

hey drupalfool, thanks for the great step by step tutorial. Happy you managed to get it working...

Hi drupalfool, and thanks for sharing your work with us first of all. I have followed your step by step tutorial and it works beautifully.

However, there is something weird going on with this js. Yesterday someone said that the images were switching too fast and indeed, it seemed right to me. I opened the small javascript file and modified the time between slides from 2000 to 10000, but to my surprise, nothing changed, or at least the duration between the slides is not 10 secs but more close to 4 secs. Could you please check your implementation and see if you can change the slide duration ?

Thanks a lot.

Later edit: Yes, I have cleared the cache :)

Drupalfool,

First of all - thanks so much for taking the time to make this tutorial! If we all do what you have done for the various problems that we solve, this site will become an even more effective resource and more attractive to newcomers.

I am trying to implement Innerfade on a theme called Ad Agency. I can't get it to work! I am attaching the page.tpl.php file and template.php. The pertinent div ID is "homepic". I am trying to get the big central banner to rotate. I realize you don't have time to do this for every single theme, but any ideas or help you can give me would be GREATLY appreciated!

Fred

Thanks for the really nice work guys. I am trying to have this working on my own site. The given code implements a fixed list of images. I would like to let my users upload photo's to a certain folder (eg files\images\header) through a header-node with a cck image-field. Does anyone know a solution to have innerfade collect the images from this folder automatically (as in: without me adding img-statements manually)?

Etje

I am having a small issue with the image rotator. The rotator works fine, but I cannot seem to center it on the block without it messing up. It will center, but then displays all of the images it is supposed to rotate, instead of just rotating in new images in the same spot. Please help.

I'm trying to get Image Rotator working inside a block. I'm loosing my mind here! I'm using the Ubiquity theme and just like in Four Season theme, I cannot find the ?> at the end of theme's template.php! So I'm truly clueless where to paste this snippet:

drupal_add_js('/images/rotate/jquery.innerfade.js');
drupal_add_js('
$(document).ready(function(){
$("#rotate-image img").show();
$("#rotate-image").innerfade({
speed: 1000,
timeout: 8000,
type: "sequence",
containerheight: "132px"
});
});
', inline);

Here's the template.php attached. I have followed drupalfool's (and tdh's) guides carefully. I assume I don't need to modify my page.tlp.php?

Hi shittii, just put it at the end... there is not always a ?> at the end of the template file...

then you need to modify your tpl.php file!

this jquery looks for a div with an id called "rotate-image"

so in your tpl.php file there should be something like:

<div id="rotate-image">
  <img src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/header_image0.jpg" alt="header image 0" />
  <img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/header_image1.jpg" alt="header image 1" />
  <img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/header_image2.jpg" alt="header image 2" />
  <img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/header_image3.jpg" alt="header image 3" />
</div>

make sure the images are in your themes folder under /img/header/

EDIT: sorry forgot you wanted to use that in a block... you have to create a block template file for this block and put the code above ... or the easier way is: create a block on the blocks administration screen... set the input filter to PHP and then paste the code above ...

I've tried to make this work in drupal 6.2 but with no luck...

It only slides the alt text "header image 0" etc...

This is how the page.tpl.php looks like;

<div id="header-image">
<img src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/0.jpg" alt="header image 0" />
<img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/1.jpg" alt="header image 1" />
<img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>/img/header/2.jpg" alt="header image 2" />

And template.php;

drupal_add_js(path_to_theme('fourseasons') . '/innerfade/jquery.innerfade.js');
drupal_add_js('
$(document).ready(function(){
  $("#header-image img").show();
  $("#header-image").innerfade({
    speed: 1000,
    timeout: 6000,
    type: "sequence",
    containerheight: "80px"
  });
});
', inline);
?>

Don't know if I have to edit style.css, but it look like this;

#header-image {
  height:80px;
  background-color:#FF9900;
  background-image:url(img/headerimg.jpg);
  background-repeat:no-repeat;

The script doesn't want to slide images - only the text.
It should look easy to fix, but I've tried everything.
Images are stored at themes/fourseasons/img/header/ and named as I've wrote page.tpl.php

Help please?

I'm having the exact same problem as workbench. Has anybody been able to get this to work on Drupal 6.2? Can we re-open this issue?

For everybody, looking for an Image rotator, there is anohter solution that i used in a site that im working on right now for D6. Wait 6 seconds on the frontpage ;-)

DEMO: http://www.arco-mountainexperts.com/

I use the jquery cycle plug-in, which offers a lot of effects: http://malsup.com/jquery/cycle/

In my page.tpl.php i use the following code:

<div id="headerimages">
  <img src="/PathToImg/header.jpg" width="765" height="366" />
</div>

then (simplyfied for this example) i use the following code in the template.php (make sure you download and copy the plug-in from the project page http://malsup.com/jquery/cycle/):

  drupal_add_js('PathToPlugin/jquery.cycle.all.pack.js', 'module');
  drupal_add_js('
    $(document).ready( function () {  
      $("#headerimages").append("<img src=\"//PathToImg/header1.jpg\" style=\"display:none;\" width=765 height=366 />");
      $("#headerimages").append("<img src=\"//PathToImg/header2.jpg\" style=\"display:none;\" width=765 height=366 />");
      $("#headerimages").append("<img src=\"//PathToImg/header3.jpg\" style=\"display:none;\" width=765 height=366 />");
      $("#headerimages").append("<img src=\"//PathToImg/header4.jpg\" style=\"display:none;\" width=765 height=366 />");
      
      $("#headerimages").cycle({ 
        fx:     "fade", 
        speed:   1500, 
        timeout: 6000, 
        next:   "#headerimages", 
        pause:   1
      });
    });
  ', 'inline');

* this approach adds the additional images (hidden) after the page has loaded, using jquerys append().
* then initiallizes the cycle plugin
* check the plugin homepage for instructions, how to use all the cool effects: http://malsup.com/jquery/cycle/

derjochenmeyer,

Excellent post, thank you!

For some reason the path to the images that you specified in your template.php code didn't work for me. I had to change it to this:

$("#headerimages").append("<img src="PathToImg/header2.jpg\" style=\"display:none;\" width=765

Again, thank you for a very helpful post.

**edit** nevermind on the JQuery Cycle Lite, got it to work, thanks for the code, I love it!! I just wish IE 7 faded/transistioned cleaner like Firefox does for png files. IE outlines the images in black when it fades, Firefox just fades away clean and clear.

-Scott

Thanks drupalfool – #14 works for my 5.9 site. Cheers! Scott

Hi,
I tried image rotator using blocks as given by drupalfool - March 30, 2008 - 20:26 (#20), and it was a success until i checked it in Internet Explorer 6.0. It works all right in Firefox.
In I.E., i can see only the first image (no fading, nothing).
Here is how i used it:

.
.
.
<script type="text/javascript" src="/drupal5/images/rotate/jquery.innerfade.js"></script>
<script type="text/javascript" src="/drupal5/images/rotate/jquery.js"></script>
.
.
.
<script type="text/javascript">
$(document).ready(function(){
$("#rotate-image img").show();
$("#rotate-image").innerfade({
speed: 3000,
timeout: 6000,
type: "sequence",
containerheight: "320px"
});
});
</script>

<div class="content">
<div id="rotate-image">
<img src="/drupal5/images/rotate/pic1.png" alt="header image 0"  />
<img style="display:none;"src="/drupal5/images/rotate/pic2.png" alt="header image 1" />
<img style="display:none;" src="/drupal5/images/rotate/pic3.png" alt="header image 2" />
<img style="display:none;" src="/drupal5/images/rotate/pic4.png" alt="header image 3" />
<img style="display:none;" src="/drupal5/images/rotate/pic5.png" alt="header image 4" />
<img style="display:none;" src="/drupal5/images/rotate/pic6.png" alt="header image 5" />
</div>
</div>

Did anyone come across this problem in I.E.? Help would be appreciated.

Thanks.

Hi,

This is working like a charm on my site ..

I have a problem though .. Right now its left aligned .. I want to right align it and put content on the left, like we do for riight aligned images .. But when I am trying to right align by

Hi,

I was also wondering if its possible to stop playing of image rotator after first play .. If we would give a kind of stop/ play button?

There's a module called "slideshow_creator" that does a lot of this for you. But it's got a few wierd features like it crops pictures. Anyway the code in #29 is excellent - but it's better to install the jquery_plugins module and change one of the add_js lines to:

drupal_add_js(drupal_get_path('module', 'jquery_plugin') .'/jquery.cycle.min.js');

Earlier I was using script mentioned by derjochenmeyer. But today I saw that the rotating images are no more working. I tried making changes for Drupal 6 but without result. Then I went through these steps for block mentioned by drupalfool and successfully pulled it off for our home page @ http://www.newearthmarketing.com

Great!! Thanks.

Imran Khan
Project Manager
New Earth Marketing