Results 1 to 2 of 2

Thread: Fade over in other image

  1. #1
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade over in other image

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem: I would like to fade the images over in eachother. When I click now it disappears and the next fades in. Is it possible to let the current picture to fade out and immediately fade in the image I clicked?

    Thank you!
    Last edited by jscheuer1; 08-30-2012 at 05:18 AM. Reason: broken link

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Use this modified version of the script (right click and 'Save As'):

    thumbnailviewer2.js

    It's best if all of the images are the same size. And you must set the style width of the loadarea to the width of the largest image and its style height to the height of the largest image + room for descriptions/titles if any. Example:

    Code:
    <div id="loadarea" style="width: 516px; height: 420px;"></div>
    There's one new option/configuration in the script:

    Code:
    /*Image Thumbnail Viewer II (May 19th, 2010)
    * This notice must stay intact for usage 
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    //Last updated: Sept 26th, 2010: http://www.dynamicdrive.com/forums/showthread.php?t=57892
    //Unofficial update Aug 30th, 2012 allows previous image to remain until current image appears: http://www.dynamicdrive.com/forums/showthread.php?70481-Fade-over-in-other-image
    
    jQuery.noConflict()
    
    jQuery.thumbnailviewer2={
    		loadmsg: jQuery('<div style="position:absolute;top:0;left:0;background-color:white;padding:5px;"><img src="spinningred.gif" /><br />Loading Large Image...</div>'), //HTML for loading message. Make sure image paths are correct
    		background: 'white', //background for transition if not set inline
    
    	/////NO NEED TO EDIT BEYOND HERE////////////////
    
    	dsetting: {trigger:'mouseov . . .
    Set it to the desired background for the transition (required to prevent bleed through). It may be overridden by an inline setting for a trigger, example:

    Code:
    <a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage" 
    rev="targetdiv:loadarea2,trigger:click,background:red">Saturn #2 (click)</a>
    It need not be a simple color. Any valid css background value may be used.

    This was tested here and works. If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 09-02-2012 at 08:13 AM. Reason: code improvement
    - John
    ________________________

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

Similar Threads

  1. Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE
    By trillodigital in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2011, 12:18 PM
  2. Replies: 3
    Last Post: 04-26-2010, 04:51 PM
  3. Ultimate Fade-in slideshow (v2.1) - 1st image no fade in
    By tomkorver in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-05-2010, 05:07 AM
  4. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM
  5. Replies: 0
    Last Post: 04-24-2006, 08:31 PM

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
  •