Create Image slide using javascript on Drupal


If you want to create an image slide on Drupal, one way to do it is using javascript. Here are some samples:

There are prev and next button to control your image slide. Your image will be play automatically, but you can control with button.

Here is the step by step:

  1. Download the javascript from here.
  2. Extract to your theme folder.
  3. open your [themename].info files and add these lines to register the javascript.
    scripts[] = js/jquery-1.js
    scripts[] = js/jquery.js
    scripts[] = js/jquery_002.js
  4. Create a block and add this line to the body:
    <div style="position: relative; width: 597px; height: 215px;" id="slides">
    <a style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 597px; height: 215px;" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="/sites/all/themes/it_ministry/images/featured_image.jpg" alt="Featured" width="597" height="215"></a><a style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; width: 597px; height: 215px;" href="#" title="Donec ultrices, enim id dictum tristique, nibh eros auctor nisi"><img src="/sites/all/themes/it_ministry/images/featured_image_2.jpg" width="597" height="215"></a>
    </div>
    <h1><a href="#" id="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h1>
    <div id="featurednav">
    <a href="#" id="prev"><span>Previous</span></a><a href="#" id="next"><span>Next</span></a>
    </div>

    Adjust the style to your theme.
  5. You may have to edit some css. Here is the example for prev and next button:
    #prev {
    background:url(images/prev.png) no-repeat scroll 4px 2px transparent;
    display:block;
    height:54px;
    left:11px;
    padding:2px 0 0 4px;
    position:relative;
    top:-139px;
    width:25px;
    z-index:100;
    }
    #next {
    background:url(images/next.png) no-repeat scroll 1px 2px transparent;
    display:block;
    height:54px;
    left:920px;
    padding:2px 4px 0 0;
    position:relative;
    top:-211px;
    width:25px;
    z-index:100;
    }
    #prev span, #next span {
    display: none;
    }
  6. The display of the image slide is highly dependent to your drupal theme and styles. You need to adjust it based on your needs.
  7. If you want to try using the image from the first example, you can download it here.

2 responses to “Create Image slide using javascript on Drupal”

  1. dj wholesale says :

    Great.

    Thanks your info.
    Drupal …………Cool.

  2. Pablo says :

    Cool, do you know a way of add Jquery effects?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: