PDA

View Full Version : Swiss Army Slideshow (2) / controls with images instead of buttons



Jongen
10-18-2011, 09:33 AM
1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

3) Describe problem: I would like to replace the controls (buttons with >> and <<) from the second example with images. The third example is made with images but I didn't succeed in 'mixing' the scripts. The images I would like to use are small triangles and don't have to change when pressed or hovered.

I have come this far:

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=true;

//And configure the image buttons' images here:
var previmg='../images/btn_arrowleft.png';
var stopimg='../images/btn_arrowstop.png'; // not using this one
var playimg='../images/btn_arrowplay.png'; // not using this one
var nextimg='../images/btn_arrowright.png';

var slides=[];
//configure the below images and descriptions to your own.
slides[0] = ["../images/booksdbwg01.jpg", "Tatarstan, Karzan"];
slides[1] = ["../images/booksdbwg02.jpg", "Tatarstan, Karzan"];
slides[2] = ["../images/booksdbwg03.jpg", "Russia"];
slides[3] = ["../images/booksdbwg04.jpg", "Siberia, Baikal"];
slides[4] = ["../images/booksdbwg05.jpg", "Georgia, Dwalta"];
slides[5] = ["../images/booksdbwg06.jpg", "Georgia"];
slides[6] = ["../images/booksdbwg07.jpg", "Russia, Vasiljevska"];
slides[7] = ["../images/booksdbwg08.jpg", "Russia, Vasiljevska"];
slides[8] = ["../images/booksdbwg09.jpg", "Siberia, Apanas"];
slides[9] = ["../images/booksdbwg10.jpg", "Siberia, Apanas"];



//optional properties for these images:
slides.desc_prefix='<b>Let\'s sit down before we go<\/b><br /> '; //string prefix for image descriptions display
slides.controls=1; //use images for controls
slides.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides.counter=1; //use to show image count
slides.width=770; //use to set width of widest image if dimensions vary
slides.height=510; //use to set height of tallest image if dimensions vary
slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides.use_alt=1; //use for descriptions as images alt attributes
slides.use_title=1; //use for descriptions as images title attributes
slides.nofade=0; //use for no fade-in, fade-out effect for this show
slides.border=0; //set border width for images
slides.border_color='white'; //set border color for images

But then no controls show up...
(I'm using the updated swissarmy.js dated 1/25/09)

jscheuer1
10-18-2011, 02:47 PM
Further tweaking may be required to get what you want, but here:


//optional properties for these images:
slides.desc_prefix='<b>Let\'s sit down before we go<\/b><br /> '; //string prefix for image descriptions display
slides.controls=1; //use images for controls
slides.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides.counter=1; //use to show image count
slides.width=770; //use to set width of widest image if dimensions vary
slides.height=510; //use to set height of tallest image if dimensions vary
slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides.use_alt=1; //use for descriptions as images alt attributes
slides.use_title=1; //use for descriptions as images title attributes
slides.nofade=0; //use for no fade-in, fade-out effect for this show
slides.border=0; //set border width for images
slides.border_color='white'; //set border color for images

The highlighted line needs to be:


slides.image_controls=1; //use images for controls

The browser cache may need to be cleared and/or the page refreshed to see changes.

Jongen
10-20-2011, 05:22 PM
Wow! Thank you John!!! I'm very happy with your answer and this script!