Results 1 to 7 of 7

Thread: Fade-in slideshow 2.4 - Mouseover to start the show?

  1. #1
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade-in slideshow 2.4 - Mouseover to start the show?

    1) Script Title: Fade-in Slideshow 2.4

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

    3) Describe problem: The way I have my page setup right now is to have a single image in the background that fades into one more image. Is it possible to make the slideshow manual and start the transition by a simple mouseover? What type of code would I need and where would I put it? Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Do you already have it set up with the slideshow? If so, are you using the descriptions feature?

    Basically, we can get the show to initialize in manual and remove the current mouseover/out events and substitute our own without editing the script. This can all be done using the show's oninit function.

    Just how we do that would depend upon whether or not you are going to use the descriptions, and if so, how.

    Also, starting onmouseover is pretty easy. Is there anything that you would want to have happen onmouseout or on subsequent mouseovers?

    In any case, it would be helpful to see what you currently have:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

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

    Default

    Found the fix, with the help of a friend. For future reference, here's what I did....

    1. In the html page, make sure that:
    a. displaymode is set to 'manual'
    b. descreveal is set to "none"
    c. Togglerid is set to ""

    That's all you need to worry about in the html page. On to the javascript

    2. You will need to comment out lines 79 and 80. It should look like this....
    // setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
    // setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
    3. Go to line 89 and copy it twice just under it so that the copied code is now in lines 90 and 91.

    4. Line 90 should look like this
    setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showslide('next')})
    5. Line 91 should look like this
    setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showslide('next')})
    In line 91, you can change it to "next" or "previous" or a number of other things I think, depending on what you want to accomplish. I was trying to have just one image fade into another, then back on mouseleave, so this works great. Hopefully this helped somebody.

  4. #4
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    By the way, here's the link showing you what I wanted to accomplish

    http://dmassphoto.com/fade-example-n...-example-1.htm

    I wanted the viewer to focus on the image instead of where they should click to start the transition. The mouseenter seemed perfect for that, and on mouseleave I wanted it to go back to the original image. If there's a way you can make it more efficient, I'd love to see it! Thank you very much for this!

    The commenting in the code is excellent, btw.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    That doesn't work at all in Firefox. Anyways I don't like to edit the script if I don't have to, makes it harder to get support later. And harder to keep track of what one has done.

    If you revert to the official version of the script, this on page call works in Firefox, IE, and Opera, probably all that the official version works in:

    Code:
    <script type="text/javascript">
    fadeSlideShow.prototype.oninit = function(){
    	var show = this;
    	function overOut(){
    		show.showslide.call(show, 'next');
    	}
    	this.setting.$wrapperdiv.unbind('mouseenter mouseleave').hover(overOut, overOut);
    };
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [334, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://dmassphoto.com/fade-example-new/img/ORAU-Before.jpg", "", "", ""],
    		["http://dmassphoto.com/fade-example-new/img/ORAU-after.jpg", "", "", ""]//<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 2000, //transition duration (milliseconds) between slides
    	descreveal: "none",//style of description panel - ondemand, always, peekaboo, none
    	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
    	oninit: function(){
    		this.oninit();
    	}
    })
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [500, 353], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://dmassphoto.com/fade-example-new/img/mel-before.jpg", "", "", ""],
    		["http://dmassphoto.com/fade-example-new/img/mel-after.jpg", "", "", ""] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 2000, //transition duration (milliseconds) between slides
    	descreveal: "none",//style of description panel - ondemand, always, peekaboo, none
    	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
    	oninit: function(){
    		this.oninit();
    	}
    })
    </script>
    Note: You need a togglerid to avoid a fatal error in Firefox. You don't have to actually have a div with that id though. Also see the added comma after the togglerid value. This is also required.

    Your table doesn't work in Firefox either, this version does:

    HTML Code:
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="334" valign="top"><div id="fadeshow1"></div>&nbsp;</td>
        <td align="center"><p>Testing 123 testing 123 this is an example to show the difference between a simple photoshoot and an image created by me.<br>
          <br>
        Place your mouse over the images to see the difference</p></td>
        <td width="500" valign="top"><div id="fadeshow2"></div>&nbsp;</td>
      </tr>
    </table>
    - John
    ________________________

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

  6. #6
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks! I got it working.
    Last edited by dmassphoto; 09-25-2010 at 02:49 PM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    I was playing around with this a bit more, might give you some ideas:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://www.dmassphoto.com/fade-example-new/fadeslideshow.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">
    fadeSlideShow.prototype.oninit = function(){
    	var show = this;
    	function overOut(){show.showslide('next');}
    	this.setting.$wrapperdiv.unbind('mouseenter mouseleave').hover(overOut, overOut);
    };
    
    fadeSlideShow_descpanel.slidespeed = 600; //speed of description panel animation (in millisec)
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [334, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://dmassphoto.com/fade-example-new/img/ORAU-Before.jpg", "", "", "Conference Room - Before"],
    		["http://dmassphoto.com/fade-example-new/img/ORAU-after.jpg", "", "", "Conference Room - After"]//<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 2000, //transition duration (milliseconds) between slides
    	descreveal: "peekaboo",//style of description panel - ondemand, always, peekaboo, none
    	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
    	oninit: function(){
    		this.oninit();
    	}
    })
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [500, 353], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://dmassphoto.com/fade-example-new/img/mel-before.jpg", "", "", "Mel - Before"],
    		["http://dmassphoto.com/fade-example-new/img/mel-after.jpg", "", "", "Mel - After"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 2000, //transition duration (milliseconds) between slides
    	descreveal: "peekaboo",//style of description panel - ondemand, always, peekaboo, none
    	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
    	oninit: function(){
    		this.oninit();
    	}
    })
    </script>
    <style type="text/css">
    body {
    	background-color: #000;
    	color: #fff;
    	font: normal 95% sans-serif;
    }
    table {
    	height: 500px;
    	border: none;
    	margin: 0 auto;
    }
    td {
    	padding: 0;
    	margin: 0;
    }
    #mel {
    	vertical-align: top;
    }
    td p {
    	padding: 0 1em;
    	text-indent: 1em;
    	text-align: left;
    	max-width: 25em;
    }
    .descpanelfg {
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <table>
      <tr>
        <td><div id="fadeshow1"></div></td>
        <td><p>Testing 123 testing 123 this is an example to show the difference between a simple photoshoot and an image created by me.
        <p>Place your mouse over the images to see the difference.</td>
        <td id="mel"><div id="fadeshow2"></div></td>
      </tr>
    </table>
    </body>
    </html>
    - 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
  •