There are a number of different ways to create image slideshows in Drupal. The Views Slideshow module [6] is one option but doesn't seem to work with the Image module [7] that I'm using on this site. Another option that looks very promising, and should work with Image, is the PicLens module [8] by Cooliris [9].
I wanted to do something simpler to create a rotating image block on the front page of Learn By The Drop to showcase some of the Drupal screenshots that I've uploaded to my gallery. I decided to use the very simple JW Image Rotator [10] as the tool to help me perform this task.
Step 1: I created a basic image gallery using the Image module. My gallery is located here [11]. See this tutorial [12] if you need guidance on how to do that.
Step 2: I used the Views module [13] to create an RSS feed (http://learnbythedrop.com/gallery/feed [14]) for my images. Check out my CCK and Views [15] section for more information on the View module.
Step 3: I added and configured the Media RSS module [16] because the JW Image Rotator reads the Media RSS [17] element in order to display the proper photo.
Step 4: Download the JW Image Rotator [10] and upload the files to a folder on your website.
Step 5: Add a new block to your Drupal site. Paste the appropriate embed code for the JW Image Rotator into the body of the block. Make sure that you have selected an input format of Full HTML. I have attached a sample file to this drop that you can use to start out. More information is available over on the JW Player Wiki [18].
Related Images
[19] |
||
| Example Block | Views Configuration | Views Styling |
Copyright 2009, Robert Safuto, Some Rights Reserved [22]. Please visit Learn By The Drop [23] to comment, subscribe or explore additional content not available via the RSS Feed.
| Attachment | Size | Hits | Last download |
|---|---|---|---|
| jw_image-rotator_code.txt [24] | 692 bytes | 1187 | 16 hours 23 min ago |
Links:
[1] http://learnbythedrop.com/category/read
[2] http://learnbythedrop.com/category/images
[3] http://learnbythedrop.com/category/media
[4] http://learnbythedrop.com/category/rss
[5] http://learnbythedrop.com/category/slideshow
[6] http://drupal.org/project/views_slideshow
[7] http://drupal.org/project/image
[8] http://drupal.org/project/piclens
[9] http://www.cooliris.com/
[10] http://www.longtailvideo.com/players/jw-image-rotator/
[11] http://learnbythedrop.com/gallery/screenshots
[12] http://learnbythedrop.com/drop/93
[13] http://drupal.org/project/views
[14] http://learnbythedrop.com/gallery/feed
[15] http://learnbythedrop.com/cckandviews
[16] http://drupal.org/project/mediarss
[17] http://search.yahoo.com/mrss
[18] http://developer.longtailvideo.com/trac/wiki/Flashvars3
[19] http://learnbythedrop.com/system/files/images/LearnByTheDrop-ImageBlock.png
[20] http://learnbythedrop.com/system/files/images/MediaRSS-view.png
[21] http://learnbythedrop.com/system/files/images/MediaRSS-view-style.png
[22] http://creativecommons.org/licenses/by-nc/3.0/
[23] http://learnbythedrop.com
[24] http://learnbythedrop.com/system/files/jw_image-rotator_code.txt
[25] http://twitter.com/share
[26] http://www.addthis.com/bookmark.php