Results 1 to 4 of 4

Thread: How to sync slideshow pics with popup descriptions

  1. #1
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to sync slideshow pics with popup descriptions

    1) Script Title: Ultimate fadeinslideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm


    3) Describe problem: I love this utility. BUT. I have prepared an indexed list of explanatory text files for the pictures to display in a popup box on user demand.
    I cannot work out how to synchronise the images with the descriptions. My instinct tells me to get the variable 'curimage' or 'setting.curimage' out of the file fadeslideshow.js to use in the popup calling function. However, I can't fathom how to do this.

    It's clear that I've never programmed in javascript before.
    Please help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There's an undocumented oninit feature to this script which may be set in the on page call, example:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		var s = this.setting;
    		s.$gallerylayers.bind('click', function(){
    			alert(s.curimage);
    		});
    	}
    })
    Don't miss the added comma (red) after the togglerid property. Notice the:

    Code:
    alert(s.curimage);
    That will fire each time an image is clicked alerting the 0 based index of which image it is. Change the alert to your pop up function. You don't have to bind to a click of the images (the layer container actually here, amounts to the same thing). You could bind to whatever you like:

    Code:
    	oninit: function(){
    		var s = this.setting;
    		jQuery('#mybutton').bind('click', function(){
    			alert(s.curimage);
    		});
    	}
    That would allow you to have a button with the id 'mybutton' to trigger this.

    Or simply set a global using the onslide (another undocumented feature) function instead:

    Code:
    	onslide: function(layer, idx){
    		window.slideNum = idx;
    	}
    That will set slideNum to this same zero based index. It will then be available in the global scope, so you could have a button somewhere with this onclick event:

    Code:
    onclick="if(typeof slideNum === 'number') popup(slideNum);"
    There are various ways.
    - John
    ________________________

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

  3. #3
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Solve sync problem with popup descriptions.

    John in USA - many many thanks. I could not have done this in years !

    I used the coding bit which you put first, using 'oninit'.
    I also tried the second which seemed simpler, i.e. setting a global scope for the index, but I could not fathom out where to put it or what the variable names indicated. It would have been guess work. I am interested to know just for learning purposes, if you have the time.

    Anyway, I got a terrific solution in double quick time, for which I'm very grateful.

    MrZico (Peter)

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Actually, this is the second method:

    Code:
    	oninit: function(){
    		var s = this.setting;
    		jQuery('#mybutton').bind('click', function(){
    			alert(s.curimage);
    		});
    	}
    It would allow you to have a button anywhere on your page:

    HTML Code:
    <input type="button" id="mybutton" value="Get Descriptions">
    The third method:

    Code:
    	onslide: function(layer, idx){
    		window.slideNum = idx;
    	}
    allows for a global variable. It can be anything that's not in use. Here I've chosen 'slideNum'. Using that method you may have a button on the page:

    HTML Code:
    <input type="button" onclick="if(typeof slideNum === 'number') alert(slideNum);" value="Get Descriptions">
    The first two methods are more efficient.
    - John
    ________________________

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

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
  •