How to create a slideshow for your website

January 2, 2011 at 11:42 am Leave a comment


Creating a slideshow for adding to your website is an easy work. You can simply write a short JavaScript that refresh the image control (i.e. <img>) periodically with different images. However, what we usually expect from the slideshow is a beautiful transition affects. This thing is not easy to be done by just using JavaScript because we need a powerful image processing library for image transition effects like blending, rotating, etc.

There are two popular ways to create a slideshow for website. The first one is using JavaScript together with image processing libraries. The second one is using Flash object to show images. Either ways require a lot of programming effort for a slideshow with variety in effects. Luckily, many free tools now are available for you to download and create to beautiful slideshow objects without requiring a single line of code.

In this post, I introduce you the JW ImageRotator. This is a free slideshow tool with most features that you need.  There are few reasons for my interest in this tool. Firstly, it is Flash-based object so you can embed it to webpage very easy. Second, its transition effect is very beautiful. Next, this slideshow allows interactions from the JavaScript so you can control it with your code. This is a great thing because you can use it in a very flexible way. Finally, its documentation is full enough for you to get started as well as to customize the control in advanced level. That’s why I don’t include any instruction on how to use this tool in this post. All are available at this link http://www.longtailvideo.com/players/jw-image-rotator/

Instead, I show you a simplest demo of the control.  You can see this demo by clicking below image.

waterfall

Just note that you need four things for the slideshow to work:

  • imagerotator.swf file:main component enables the slideshow
  • Image files: you cannot miss them because they are the content of your slideshow
  • Xml file: this file is listing all image files of your slideshow. Don’t worry if you don’t familiar with XML file. It is just a text file that you can create by using Nodepad or any text editor. The XML format used by JW ImageRotator is really simple. Below is the simplest example of this file

<?xml version=”1.0″ encoding=”utf-8″?>
<playlist version=”1″ xmlns=”http://xspf.org/ns/0/”&gt;
<trackList>
                <track>
                                <location>http://mysite.com/pathto/image1.jpg</location&gt;
                </track>
                <track>
                                <location>http://mysite.com/pathto/image2.jpg</location&gt;
                </track>
                …
                add more images here
                …
</trackList>
</playlist>

  • HTML code: this code is to embed to slideshow object to your website. An example of this code is bellow

<embed
src=’http://mysite.com/pathto/imagerotator.swf&#8217;
width=’320′
height=’240′
allowscriptaccess=’never’
allowfullscreen=’false’
wmode=’transparent’
flashvars=’file=http://mysite.com/pathto/mylist.xml&shownavigation=false’ />

Remember to replace links in the examples with your own links. If item 1 -3 in the same directory, you can use the relative path instead.

Thanks for reading and hope you will have a beautiful slideshow in your website.

Advertisements

Entry filed under: Web Programming. Tags: , , , , , , , , .

How to disable the menu of JW Player ? Turn on / off OneNote taskbar icon

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

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Posts

/openmp AMD app fixing dead pixel iphone C++ cmd program CPU C sharp dead pixels directory download ibm synthetic data generator Dynamic Dynamic Memory Allocation Edit Environment Variables in Windows Environment Variables error lnk2019: unresolved external symbol _getprocessmemoryinfo@12 referenced in function error lnk2019: unresolved external symbol _ getprocessmemoryinfo@12 referenced in function "void __cdecl printmemoryinfo(unsigned long example code Fixing Dead Pixels and Gray Lines on the iPhone Screen Fixing Dead Pixels on the iPhone Screen Fixing Gray Lines on the iPhone Screen Fix iPhone getprocessmemoryinfo GPU Gray Line iPhone Screen gray lines gray pixels green pixels GUI how to "new" a two-dimension array in C++ how to use ibm quest synthetic data generator ibm data generator ibm quest data generator ibm quest data generator exe ibm quest data mining project ibm quest market-basket synthetic data generator ibm quest market basket market-basket synthetic data generator ibm quest synthetic data generator ibm quest synthetic data generator linux ibm synthetic data generator ibm synthetic generator Intel iPhone Iphone 3G iPhone 3GS iPhone 4 iphone gray lines on startup iphone pixel damage iPhone Screen iPhone screen damage Linux market-basket synthetic data generator Memory Allocation Multicore multithread multi thread multi threaded multithreading mysql extract data into file new OpenCL Path processor quest data generator quest synthetic data generator R SAS Set Environment Variables Set Environment Variables in Windows souce code source code stuck pixels system file two dimension array Windows 7 Windows Vista

%d bloggers like this: