Last updated 7 June 2014. Created on 1 June 2009.
Edited by acabouet, silverwing, yurtboy. Log in to edit this page.

This really is not that hard and I still do not see a module that does this simple.
Jcarousel might.

But all I want is ONE image at a time.
Made from a view and cck.

I want the client to make a node in this case called Front Page Image and they just attach the CCK image.

For that I also used Image Cache.

Here are the steps.
Needed Modules
Image Cache, Imagefield (cck), Views

1. Image cache
Add a preset. For me I just put resize and that was it.
With Imagecache I setup a predefined scaled image so no matter what they upload it fits well.

2. The Node.
Create a new node type then add a cck filefield Image.
After you save this I set the display to this as well but not really sure if that is needed.

3. Make the view.
Then I made a very simple view. I would attach it but it is so easy I will explain it so you can bend it to your needs.
--Make the view and add a page.
--Add a field which will be the name of the CCK field you did above
--Filter on Published
--Sort as needed.
--Show say 10
--Give it a path or just use default.

Now with a Home page view views or a node with View Field attached, or panels you can connect this view.

But it will just list out your images which is not what you really want.
But once you see the list is there you are ready for the next step.

Make you js file .
Once you have that make a call to it in your info file.
scripts[] = yournewjs.js

Visit the module page to refresh the theme.

Okay now you should see your js file in the source code and you know you are ready (if the file exists)

Here is the content for that file.
This code is mostly from the book D6 Javascript and Jquery

var ImageRotate = ImageRotate || {}; //was ImageRotate
 * Initialize the sticky rotation.
 ImageRotate.init = function() {
    var image = $(".views-field-field-front-page-image-fid img"); //using img was key
    // If we don't have enough, stop immediately.
    if (image.size() <= 1 || $('#node-form').size() > 0) {
    var highest = 197;
    image.each(function () {
      var imageHeight = $(this).height();
      if(imageHeight > highest) {
  highest = imageHeight;
    image.hide().css('height', highest + 'px');
    ImageRotate.counter = 0;
    ImageRotate.image = image;
    setInterval(ImageRotate.periodicRefresh, 7000);
 * Callback function to change show a new sticky.
  ImageRotate.periodicRefresh = function () {
    var image = ImageRotate.image;
    var count = ImageRotate.counter;
    var lastImage = image.size() - 1;
    var newcount;
    if (count == lastImage) {
      newcount = ImageRotate.counter = 0;
    else {
      newcount = ImageRotate.counter = count + 1;
    image.eq(count).fadeOut('normal', function () {

Replace views-field-field-front-page-image-fid with the css you have before the image.
Alright you should now be able to refresh the screen and you have a slide show.

See a sample at

Looking for support? Visit the forums, or join #drupal-support in IRC.


ingopingo’s picture


seems to be exactly what i need, but i don't understand parts of your description...

this is what i've done:

created the imagecache preset
created the node
created the view
created the .js file and put it into the js folder of my theme (litejazz) -> /sites/all/themes/litejazz/js/slideshow.js

but how exactly i call this .js file???

would be nice if someone could explain this step to me...

best regards,