womble
Posts: 5721
Joined: 3/14/2005
From: Living on the edge
Status: offline
 |
RE: Slide show with thumbnails - 9/15/2006 15:18:21
Larry, all you need to do is to add in the code changes detailed in that thread to the original code supplied on the main site - the large javascript file either in the <head> of the page or as an external js file, and the other in the <body> wherever you want the slideshow to appear.
The only thing you have to do in that main script that goes in the <head> is give it the list of files you want in the slideshow (right near the top of the script):
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["../photo1.jpg", "", "", "I'm George"] //plain image syntax
fadeimages[1]=["../photo2.jpg", "http://www.cssdrive.com", "", "I'm Sarah"] //image with link syntax
fadeimages[2]=["../photo3.jpg", "http://www.javascriptkit.com", "_new", "Who are you?"] //image with link and target syntax
so for example for their demo of the two images/slideshows, they have:
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["../dynamicindex4/bs00825a.gif", "http://www.wired.com", ""]
fadeimages2[1]=["../dynamicindex4/bs00847a.gif", "http://www.theregister.com", ""]
fadeimages2[2]=["../dynamicindex4/hh01478a.gif", "http://www.news.com", "_new"]
To have four images in a row, you'd just add in two more code blocks like that. There examples show the different methods of using links etc. as well though, so you'd just need the plain image syntax type, with the extra bit shown in that thread, so you'd have, for your first image in the row:
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["../photo1.jpg", "", "", "Your text here"] //plain image syntax
fadeimages[1]=["../photo2.jpg", "", "", "Your text here"]
fadeimages[2]=["../photo3.jpg", "", "", "Your text here"]
You can add more images to the slideshow by just giving it the next number up - i.e. to add in three more images you'd use fadeimages[3], fadeimages[4], and fadeimages[5], ie.:
fadeimages[3]=["../photo4.jpg", "", "", "Your text here"]
fadeimages[4]=["../photo5.jpg", "", "", "Your text here"]
fadeimages[5]=["../photo6.jpg", "", "", "Your text here"]
For each photo in the row you want, you'd just have another array like that, but rather than calling the next one 'fadeimages' you'd call it fadeimages2 or whatever - but I've attached the full script with the changes as a text file - all you need to do is change the image paths and add in whatever text you want for each image.
If you look at the source code for that page on Dynamic Drive, that's what they've done there and they've just set up a table to hold those two slideshow images - add another couple of cells to your table and you've got your holder for your slideshows.
In each table cell you just add the following, one in each table cell, as in Step 2 - for the first image in the row:
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 120, 225, 0, 3000, 1, "R")
</script>
For the second:
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 120, 225, 0, 3000, 1, "R")
</script>
Third:
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages3, 120, 225, 0, 3000, 1, "R")
</script>
Fourth:
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages4, 120, 225, 0, 3000, 1, "R")
</script>
The second parameter for each slideshow is your image width "120". The next one, currently 225 you'll need to alter to a height that allows enough room for both the image and the text. The next one's "0", currently set at no border - alter that for each to suit, and you can change the delay between the changes in milliseconds - it's currently at 3000 = 3 seconds. Penultimate value is whether you want it to pause when the mouse is over it - it's currently set to ("1") - it should be "0" if you don't want it to pause. The final one's optional and tells it to randomise the order the pics are displayed in. If you don't want it to be random, just remove that last parameter.
That's all there is to it. 
Full script file here.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
|
Printable Version 
New Messages
No New Messages
Hot Topic w/ New Messages
Hot Topic w/o New Messages
Locked w/ New Messages
Locked w/o New Messages
Post New Thread