WebYep Fading Slideshow
STEP 1
1. Create a new page and name it Admin - make sure to give it a php extension.
2. From the Page Actions pick the WebYep page action.
3. Add a WebYep Image item - see the screen grab above. I have found it best to keep the size of this image in scale to images used in the slideshow, for example the WebYep image item above is 192 x 144 pixels which is 30% of the slideshow image size.
4 Duplicate the Webyep Image item to the required number. Don't forget to rename the Fieldnames of each item to image2, image3 etc.
5. Add a WebYey logon item
STEP 2
1. Create a new page and name it slideshow.php or whatever suits you.
2. Add a WebYep page action to the page.
3. Add the Sequence Timer page action. Experiment with the Speed setting. As my example only uses 4 images only the first 4 triggers are set to Yes.
STEP 3
1. Add an HTML item to the page and size it to the slideshow image size, in my example it is 640 x 480 pixels.
2. Add a Target Show/Hide Layer action to the HTML item and copy the settings above.
3. Name the HTML pic1 or something similar.
4. Remember to change the Target# to the correct number on the duplicates you make in Step 5 below
STEP 4
1. Select the HTML item and from the Insert menu choose Action Item > WebYep Image
2. Drag/Resize the webYep Image item so that it fills the HTML item.
3. Use the settings above. The Fieldname needs to be exactly the same as its smaller version on the admin page
STEP 5
1. Select the HTML item and from the Item menu choose Duplicate.
2. For the Number of Copies set it to the same ammount of images you have on the admin page (minus one) and that the Duplicate Horizontal and Vertical offsets are set to 0 pixels, in my example I have choosen 3 as I have a total of 4 images.
3. Now rename your duplicates. In the example above I have only renamed the first duplicate pic2 / image2. The next duplicate would be named pic3 / image3. It is vital that the WebYep Image items inside the HTML items have exactly the same name as the ones on the admin page.
STEP 6
1. On the admin page I have placed a hyperlink to the slideshow page just for convenience.
STEP 7
1. Now publish your files.
2. Next upload the published files to your WebYep enabled server for testing.
2. Go to the admin.php page on your server.
3. In my example you can see each 640 x 480 pixel image has been loaded into the appropriate box where they have been automatically resized.
4. Now go to the slideshow.php page or click the link if you made one and you should see the slideshow play.
5. Here are the links to my completed example pages:
Slideshow page: http://www.pixelarte.co.uk/webyepslideshow/slideshow.php
Admin page: http://www.pixelarte.co.uk/webyepslideshow/admin.php