Advanced Search

Results 1 to 3 of 3

Thread: Swiss Army Slideshow (2) / controls with images instead of buttons

  1. #1
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Swiss Army Slideshow (2) / controls with images instead of buttons

    1) Script Title: Swiss Army Image Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/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)

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Further tweaking may be required to get what you want, but here:

    Code:
    //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:

    Code:
     slides.image_controls=1; //use images for controls
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Jongen (10-20-2011)

  4. #3
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Wow! Thank you John!!! I'm very happy with your answer and this script!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •