PDA

View Full Version : Fade over in other image



Joepiooo
08-29-2012, 07:34 AM
1) Script Title: Image Thumbnail Viewer II

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

jscheuer1
08-30-2012, 07:25 AM
Use this modified version of the script (right click and 'Save As'):

4708

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:


<div id="loadarea" style="width: 516px; height: 420px;"></div>

There's one new option/configuration in the script:


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


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