Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Problem with Fade-in slideshow (v2.1)

  1. #1
    Join Date
    May 2010
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Problem with Fade-in slideshow (v2.1)

    hi,
    how the change Fade-in slideshow to carrying the corresponding description automatically when changing the images ?
    this should be exactly like, slideshow on http://www.aiesec.org/
    link to Fade-in slideshow (v2.1)
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    In here I changed
    Code:
    descreveal: "auto"
    (bellow appear in red)
    but it's not working.

    can anyone suggest me the solution ?

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", 
    	dimensions: [250, 180],
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing."],
    		["http://i29.tinypic.com/xp3hns.jpg", "", "", "Some day I'd like"],
                    ["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful "] 
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false,
    	fadeduration: 200, 
    	descreveal: "auto",
    	togglerid: ""
    })
    
    </script>
    Last edited by hansan; 05-04-2010 at 08:47 AM.

  2. #2
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Reading the description of your code on the publisher's side leads me to believe the auto option is not for descreveal but for togglerid the only 2 options for descreveal are "always" and "manual" hope this helps.
    Erik.

  3. #3
    Join Date
    May 2010
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Erik_M, i tried it.that's not the point.
    i'm sure it has a some method to do it.

  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

    Erik_M is right. Using 'always' is the closest you can come with this script without a fairly major modification. Using 'always' will have the descriptions always in view, not jumping up and down as on the page you linked to.
    - John
    ________________________

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

  5. #5
    Join Date
    May 2010
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    No jscheuer1, actually i want to descriptions jumping up and down automatically when slides are changing rather than descriptions always in view.
    this is an example that i really need

    http://www.aiesec.org/

    please look at the slideshow in above link.

    further can we do the Fade-in slideshow, more smoothly(continuously) rather than images turn on and off ? ( exactly like above link slideshow )

  6. #6
    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

    Yes, that's the best you can do without a fair amount of modification to the script. I've been taking a look at it, and the script does have an onslide feature, but I don't see how that will allow it to do what you want. It almost does, except for when the user causes the slide show to pause onmouseover, then the timing for the descriptions gets screwy. I was thinking of adding an onbeforeslide feature. If that's possible to do without too much trouble, then it shouldn't be too hard to get the kind of action for the descriptions that you want.
    - John
    ________________________

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

  7. #7
    Join Date
    May 2010
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    yes jscheuer1, pause onmouseover is a problem.
    1st we have to remove onmouseover function. then we can do the modification that i really want.

    How can we do that ?

  8. #8
    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

    I think you want a pause. What if the images are going by too quickly for the first time viewer to read the descriptions? They would like a pause for that. And, if there are links, you really need a pause so that the link the user is clicking on doesn't change while they are in the process of clicking on it. The example you linked to has a mouseover pause. The only real problem with the pause was that it required more extensive modification to get the effect you want to both work and to look right. The mouseout event was a problem in manual mode though because it dismissed the description. In always mode, there were the images to control the descriptions. I chose always mode and set the dimensions of the control images to 0. One other problem with the mouseover pause was that the length of time it took to resume motion equaled the pause rate configured for the slide show. This results in either too quick of a show, or too long of a pause after the mouseout. I made a separate property for that - mouseresume.

    After all that, and the onbeforeslide property I mentioned before, and a few more modifications, I came up with this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow_onbefore.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //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", "#what", "", "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", "", "", "Eat your fruits!"],
    		["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:4000, cycles:0, wraparound:false, mouseresume:300},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 600, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "",
    	onbeforeslide: function(layer, idx){
    		this.showhidedescpanel('hide');		
    	},
    	onslide: function(layer, idx){
    		if(this.setting.imagearray[idx][3]){
    			this.setting.$descinner.empty().html(this.setting.imagearray[idx][3])
    			this.showhidedescpanel('show');
    		}
    		
    	}
    })
    </script>
    </head>
    <body>
    <div id="fadeshow2"></div>
    </body>
    </html>
    It uses this modified script (right click and 'save as'):

    Attachment 3292
    Last edited by jscheuer1; 05-05-2010 at 12:01 AM. Reason: minor update to script
    - John
    ________________________

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

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

    hansan (05-05-2010)

  10. #9
    Join Date
    May 2010
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    hmmmm..... that is fine.this is the slide show that i really need
    thank you jscheuer1.

    i want to make this more continuously(more smoothly). would you mine telling me how the slow down image transition speed?(not the duration of image view)
    what is the variable should i increase?

  11. #10
    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

    That's (as it is in the original version) the:

    Code:
    fadeduration: 600, //transition duration (milliseconds)
    When you modify that, you may or may not want to also modify:

    Code:
    displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, mouseresume:300},
    The pause is how long each image displays, the mouseresume is for, after a mouseover pause occurs, how long it takes after mouseout for the show to transition to the next image.

    Neither of these is directly related to the fadeduration, but in some circumstances they will work together to produce various intervals. Play around with the slide show once you have your preferred fadeduration set in order to see if you want to adjust either of these two other values.
    - John
    ________________________

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

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

    hansan (05-05-2010)

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
  •