can't turn a fadeTo in fadeIn - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts

October 5, 2010 at 9:03 pm #30446

allampatu

Participant

hello everybody

i have a slideshow gallery with this fade

var wrap = $("#image_wrap").fadeTo("medium", 0.5);

that i don’t like to much. i prefer a classical fade in.

so i tried to turn the fadeout in fadein but it doesn’t work.

anybody could explain why? maybe because on page load the image is displaied?

thanks a lot

October 5, 2010 at 10:19 pm #78781

coffeendonut

Member

wat do you mean by “fadeout in fadein” ..?

October 6, 2010 at 7:02 am #78797

allampatu

Participant

sorry i mean fadeto() in fadein().

October 6, 2010 at 7:09 am #78798

jamygolden

Member

Could we see the rest of your javascript?

October 6, 2010 at 3:34 pm #78609

allampatu

Participant

this is a flowplayer script

it’s a thumb slideshow with a big preview and i would like to click on a thumb and with a fadein preview on big window

$("#browsable").scrollable().navigator();



$(function() {



$(".scrollable").scrollable();



$(".items img").click(function() {



// see if same thumb is being clicked

if ($(this).hasClass("active")) { return; }



// calclulate large image's URL based on the thumbnail URL (flickr specific)

var url = $(this).attr("src").replace("_t", "");



// get handle to element that wraps the image and make it semi-transparent

var wrap = $("#image_wrap").fadeTo("medium", 0.5);



// the large image from www.flickr.com

var img = new Image();





// call this function after it's loaded

img.onload = function() {



// make wrapper fully visible

wrap.fadeTo("fast", 1);



// change the image

wrap.find("img").attr("src", url);



};



// begin loading the image from www.flickr.com

img.src = url;



// activate item

$(".items img").removeClass("active");

$(this).addClass("active");



// when page loads simulate a "click" on the first image

}).filter(":first").click();

});

October 7, 2010 at 5:25 am #78549

jamygolden

Member

Try this:

$("#browsable").scrollable().navigator();



$(function() {



$(".scrollable").scrollable();



$(".items img").click(function() {



// see if same thumb is being clicked

if ($(this).hasClass("active")) { return; }



// calclulate large image's URL based on the thumbnail URL (flickr specific)

var url = $(this).attr("src").replace("_t", "");



// get handle to element that wraps the image and make it semi-transparent

var wrap = $("#image_wrap");



// the large image from www.flickr.com

var img = new Image();





// call this function after it's loaded

img.onload = function() {



// make wrapper fully visible

wrap.fadeTo("fast", 1);



// change the image

wrap.fadeTo("medium", 0.5).find("img").attr("src", url);



};



// begin loading the image from www.flickr.com

img.src = url;



// activate item

$(".items img").removeClass("active");

$(this).addClass("active");



// when page loads simulate a "click" on the first image

}).filter(":first").click();

});