[jQuery] Re: simple jQuery img src Question
Small correction: it should be bind('readystatechange'.. as jQuery
adds the 'on' prefix by itself.
cheers,
- ricardo
On Jan 22, 3:25 am, LoicDuros loic.du...@gmail.com wrote:
Thanks everyone for your help. many different ways of doing it... I'll
try each of them until something works! THanks!
On Jan 21, 11:35 pm, Ricardo Tomasi ricardob...@gmail.com wrote:
A cross-browser way of doing that:
$('img').fadeOut(500, function(){
$(this).attr('src',newsrc).bind('onreadystatechangeload', function()
{
if (this.complete) $(this).fadeIn(1000);
});
});
http://jsbin.com/urikuhttp://jsbin.com/uriku/edit
On Jan 21, 7:30 pm, Balazs Endresz balazs.endr...@gmail.com wrote:
Also, see this discussion about using theloadevent with
images:http://groups.google.com/group/jquery-dev/browse_thread/thread/24b107...
On Jan 21, 8:55 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
Fixed braces:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
});
--
Bohdan
On Jan 21, 8:54 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
In theory it would be something like this:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
}
...but I'm not at all sure if the load() captures the src
attribute change like that.
--
Bohdan
On Jan 21, 7:54 pm, LoicDuros loic.du...@gmail.com wrote:
Hi,
I'm new to JQuery and used to use Scriptaculous. I would like to
make
the following:
A function to fade out animage, then change the src of theimage, and
once the new src is loaded, to fade in theimageback (so that it's
fading in with the newimageloaded).
Here is how I did it using Scriptaculous, however, the site will now
use jQuery and so I have to reproduce the same thing with it - is
there such a thing as observe in jQuery:
function navAction(newImg) {
new Effect.Fade('image', {duration:0.5, afterFinish:function(){
document.getElementById('image').src = 'images/' + newImg;
$(document.getElementById(image)).observe('load', display);
}
});
}
function display(event){
new Effect.Appear('image', {duration:1});
}
[jQuery] Re: simple jQuery img src Question
In theory it would be something like this:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
}
...but I'm not at all sure if the load() captures the src
attribute change like that.
--
Bohdan
On Jan 21, 7:54 pm, LoicDuros loic.du...@gmail.com wrote:
Hi,
I'm new to JQuery and used to use Scriptaculous. I would like to make
the following:
A function to fade out an image, then change the src of the image, and
once the new src is loaded, to fade in the image back (so that it's
fading in with the new image loaded).
Here is how I did it using Scriptaculous, however, the site will now
use jQuery and so I have to reproduce the same thing with it - is
there such a thing as observe in jQuery:
function navAction(newImg) {
new Effect.Fade('image', {duration:0.5, afterFinish:function(){
document.getElementById('image').src = 'images/' + newImg;
$(document.getElementById(image)).observe('load', display);
}
});
}
function display(event){
new Effect.Appear('image', {duration:1});
}
[jQuery] Re: simple jQuery img src Question
Fixed braces:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
});
--
Bohdan
On Jan 21, 8:54 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
In theory it would be something like this:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
}
...but I'm not at all sure if the load() captures the src
attribute change like that.
--
Bohdan
On Jan 21, 7:54 pm, LoicDuros loic.du...@gmail.com wrote:
Hi,
I'm new to JQuery and used to use Scriptaculous. I would like to make
the following:
A function to fade out an image, then change the src of the image, and
once the new src is loaded, to fade in the image back (so that it's
fading in with the new image loaded).
Here is how I did it using Scriptaculous, however, the site will now
use jQuery and so I have to reproduce the same thing with it - is
there such a thing as observe in jQuery:
function navAction(newImg) {
new Effect.Fade('image', {duration:0.5, afterFinish:function(){
document.getElementById('image').src = 'images/' + newImg;
$(document.getElementById(image)).observe('load', display);
}
});
}
function display(event){
new Effect.Appear('image', {duration:1});
}
[jQuery] Re: simple jQuery img src Question
Also, see this discussion about using the load event with images:
http://groups.google.com/group/jquery-dev/browse_thread/thread/24b107e84adeaaee
On Jan 21, 8:55 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
Fixed braces:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
});
--
Bohdan
On Jan 21, 8:54 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
In theory it would be something like this:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
}
...but I'm not at all sure if the load() captures the src
attribute change like that.
--
Bohdan
On Jan 21, 7:54 pm, LoicDuros loic.du...@gmail.com wrote:
Hi,
I'm new to JQuery and used to use Scriptaculous. I would like to make
the following:
A function to fade out an image, then change the src of the image, and
once the new src is loaded, to fade in the image back (so that it's
fading in with the new image loaded).
Here is how I did it using Scriptaculous, however, the site will now
use jQuery and so I have to reproduce the same thing with it - is
there such a thing as observe in jQuery:
function navAction(newImg) {
new Effect.Fade('image', {duration:0.5, afterFinish:function(){
document.getElementById('image').src = 'images/' + newImg;
$(document.getElementById(image)).observe('load', display);
}
});
}
function display(event){
new Effect.Appear('image', {duration:1});
}
[jQuery] Re: simple jQuery img src Question
A cross-browser way of doing that:
$('img').fadeOut(500, function(){
$(this).attr('src',newsrc).bind('onreadystatechange load', function()
{
if (this.complete) $(this).fadeIn(1000);
});
});
http://jsbin.com/uriku
http://jsbin.com/uriku/edit
On Jan 21, 7:30 pm, Balazs Endresz balazs.endr...@gmail.com wrote:
Also, see this discussion about using the load event with
images:http://groups.google.com/group/jquery-dev/browse_thread/thread/24b107...
On Jan 21, 8:55 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
Fixed braces:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
});
--
Bohdan
On Jan 21, 8:54 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
In theory it would be something like this:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
}
...but I'm not at all sure if the load() captures the src
attribute change like that.
--
Bohdan
On Jan 21, 7:54 pm, LoicDuros loic.du...@gmail.com wrote:
Hi,
I'm new to JQuery and used to use Scriptaculous. I would like to make
the following:
A function to fade out an image, then change the src of the image, and
once the new src is loaded, to fade in the image back (so that it's
fading in with the new image loaded).
Here is how I did it using Scriptaculous, however, the site will now
use jQuery and so I have to reproduce the same thing with it - is
there such a thing as observe in jQuery:
function navAction(newImg) {
new Effect.Fade('image', {duration:0.5, afterFinish:function(){
document.getElementById('image').src = 'images/' + newImg;
$(document.getElementById(image)).observe('load', display);
}
});
}
function display(event){
new Effect.Appear('image', {duration:1});
}
[jQuery] Re: simple jQuery img src Question
Thanks everyone for your help. many different ways of doing it... I'll
try each of them until something works! THanks!
On Jan 21, 11:35 pm, Ricardo Tomasi ricardob...@gmail.com wrote:
A cross-browser way of doing that:
$('img').fadeOut(500, function(){
$(this).attr('src',newsrc).bind('onreadystatechange load', function()
{
if (this.complete) $(this).fadeIn(1000);
});
});
http://jsbin.com/urikuhttp://jsbin.com/uriku/edit
On Jan 21, 7:30 pm, Balazs Endresz balazs.endr...@gmail.com wrote:
Also, see this discussion about using the load event with
images:http://groups.google.com/group/jquery-dev/browse_thread/thread/24b107...
On Jan 21, 8:55 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
Fixed braces:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
});
--
Bohdan
On Jan 21, 8:54 pm, Bohdan Ganicky bohdan.gani...@gmail.com wrote:
In theory it would be something like this:
$('#image').fadeOut(500, function() {
$(this).attr('src','images/'+newImg).load(function() {
$(this).fadeIn(1000);
});
}
...but I'm not at all sure if the load() captures the src
attribute change like that.
--
Bohdan
On Jan 21, 7:54 pm, LoicDuros loic.du...@gmail.com wrote:
Hi,
I'm new to JQuery and used to use Scriptaculous. I would like to make
the following:
A function to fade out an image, then change the src of the image, and
once the new src is loaded, to fade in the image back (so that it's
fading in with the new image loaded).
Here is how I did it using Scriptaculous, however, the site will now
use jQuery and so I have to reproduce the same thing with it - is
there such a thing as observe in jQuery:
function navAction(newImg) {
new Effect.Fade('image', {duration:0.5, afterFinish:function(){
document.getElementById('image').src = 'images/' + newImg;
$(document.getElementById(image)).observe('load', display);
}
});
}
function display(event){
new Effect.Appear('image', {duration:1});
}
