Question

I am using Drupal 6 to build a website. I need to insert a carousel. As much as the drupal plugins claim that they make it easy, I have been trying like “forever” and just cant get it working. I admit I am not a php developer, nor a html/js developer. But I guess I shouldn’t need to have these skills if its suppose to be easy.

Now, I am referring to http://dev.herr-schuessler.de/jquery/popeye/demo.html and have placed the first sample in the body (full html) of a Page Content in drupal. I have also downloaded the jQuery-popeye.zip and unzipped in sites/default/files folder.

If I guess correctly, I need the class=”ppy-outer” to refer to this downloaded js files. So where do I place the js files in the drupal path ?

Code in the body of my Page Content

<div class="ppy-outer">
    <div class="ppy-stage">
        <div class="ppy-nav">
            <a class="ppy-prev" title="Previous image">Previous image</a>
            <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
            <a class="ppy-switch-compact" title="Close">Close</a>
            <a class="ppy-next" title="Next image">Next image</a>
        </div>
    </div>
</div>
<div class="ppy-caption">
    <div class="ppy-counter">
        Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong> 
    </div>
    <span class="ppy-text"></span>
</div> 

Edit : Getting a simple carousel working was such a pain, I had to move to wordpress. I expected more from drupal. But wordpress rocks big time. Compared wordpress and drupal here.

Answer 1

To create a carousel in drupal i had to use a few different modules.

Views, Image Upload and CCK

I created a content type which allows the user to upload images and specify alt text and title text.

Next i had to create a view that shows only this content type and ordered by updated date.

I had to create 2 templates that styled the view at this point.

Now on the page i wanted to place the carousel i placed some code that would pull in the view. For me it was:

<?php
  $view = views_get_view('Main_Slider');
  if ($view) {
    print $view->execute_display('default');
    unset ($view);
  }
?>

Now using javascript i had to find all the images in the view and place them into li tags.

For me i used:

$("li.mainsliderimg").appendTo("ul#main-slider");

Now that this is complete i then called the carousel which shows the images!