INSERTING SPRY SLIDESHOW WIDGET & ADDING IMAGES

Continuing from my earlier posts: I am going to insert the customized slide show I created yesterday   and import my own images and text into my photogallery.html  (See earlier posts for lessons 1-12)

I am ready to insert the slide show into my second page called Photo Gallery. In this tutorial, I am going to show you how to insert the widget and import and rename your images.
You will need to have two images of each slide.
The first one is a thumbnail at about 25% of the original slide size and the second on is the original slide. I saved mine as .jpgs...

Overview: I am going to insert a slide-show into a webpage I have already created.

(Double-click images to make them bigger.)

Lesson 13
How to insert your slide show from my widgets:

1. Open the - photogallery.html. Place the cursor in the .content area of the website and delete any lingering text. From the menubar, click on insert, then widgets (see figure 13.0)
2. In the widget pop-up, click on Spry Image Slide show with Filmstrip. And then click on the customized widget you have already created from the previous post. In my case, it is called TexArtisan Cakes. (see figure 13.1)
3. The widget will show up as a list and wider than the frame. This is normal.

 figure 13.0

 

 figure 13.1

 

 

Lesson 14
How to insert your images into the slide show:

1. Click on the first thumbnail image to pull up the properties toolbar at the bottom of the page. (If the properties toolbar is not open, click Ctrl+F3.) 
2. In the properties toolbar click on source of image or src and repath to your first thumbnail image in your images folder. (see figure 14.0)
3. In the properties toolbar click on hyperlink or link and repath to your first image that matches the thumbnail. (see figure 14.1)
4. Repeat steps 2 and 3 until you have uploaded all of your images.

figure 14.0

 

figure 14.1

 

Lesson 15
How to rename your images:

1. Click on Split to open up the code. Scroll down until you find your images, and rename the text. (see figure 15.0)
2. Click on Design to close the code and then click on Live View to check your progress!

 

 figure 15.0

 

figure 15.1