Photo Slideshow

DVD Photo Slideshow

How to make a jQuery image slideshow for your website

If you are not a master of  HTML, Flash, JavaScript or CSS skills and want to create a jQuery image slideshow for your website,  read this tutorial to learn how to make a jQuery slideshow with Web Album Maker  and add it to your site easily.

Create a jQuery image slideshow and embed to your website

1. Download and install Web Album Maker on your computer(Click to get download link)

2. Add images into Web Album Maker

Drag images from your computer to  Images area, or you can click Add Images button to locate pictures and add them into Web Album Maker. Then you can add title, description and URL for images, arrange image order, or remove images.

add images to jquery slideshow maker

Add images

3. Select a theme and set width and height

Click Theme tab to select a theme for your jQuery slideshow, the software provides various stylish jQuery themes to choose for your photo gallery and photo banner, such as bottom thumbnail, right thumbnail, bottom dot, etc.

In the Image Size boxes, you can set width and height for the jQuery slideshow. For example, I set 700 x 200 px for the flash banner.

select theme for jquery slideshow

select a theme

4. Preview and Publish a jQuery slideshow

Click the Preview button to view the slideshow. If you are satisfied with it, click the Publish button to create the jQuery slideshow.  When it is published successfully, you can see the notice window below, with tips on how to embed the slideshow into your own web page.

notice window

notice window

5. Add a jQuery slideshow into your website page

  • Open the output folder, you can  see 3 folders, 1 html page and one css file.

output folder for jquery slideshow

slideshow output folder

  • Copy all the files in the output folder and paste them into the same folder where you put your website pages.
  • Open the HTML page of the jQuery slideshow in Dreamweaver.
  • Copy and paste the two parts below separately into head section and body section of your own web page.
  • Preview the web page in browser, you can see the jQuery displayed.

paste code to embed slideshow

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: