Develop Reference

Best way to swap images from a stack : src, visibility, z-index... something else?

I have 60 images. I want to display one image at a time and when the user pans it will display the next or the previous one depending on the pan's direction.
Simple example to explain my thought :
http://jquery.vostrel.cz/reel#demo
For now I load and append all my images to the DOM (img html tag... maybe as css background-image is better in my case) and I swap between them with the visibility attribute : hidden / visible.
It's working fine.
Second option : Same as before but I play with the z-index to put the desired image to the foreground.
Third option : just one image and I swap the src attribute.
EDIT 1 : images are intended to be displayed fullscreen and are 720p.
EDIT 2 : Loading the 60 images at the beginning is not really an issue... if I want more images I will load them as I need them.

I would place all images, positioned absolute in a container. Each image with a z-index of 1, except the first has the class top. The top class has z-index: 2.
In jQuery, when you click the img with class top it removes the class, finds the next element and adds the top class to that, each click making the next image visible.
Swapping the src or background image is going to require further loading on each click. Load everything, display accordingly with z-index.

Maybe the first option is the better one. But regarding performance issues, instead of loading every images at once, load only the first ones. On pan event load the next image bundle and so on.

Why you shouln't use the method with visibility, display, visibility or z-index: it would slow down the loading of your page, because 60 images would be loaded at the same time.
I tried the following, and it worked for clicking, although just in one direction (you can also add the buttons "back" an "forward"):
<img id="img" onmouseup="toggle()" scr="1.png" style="border-style:solid;padding:3px;border-width:1px;" />
javascript:
var i = 1;
function toggle() {
i++;
if(i==61) i = 1;
document.getElementById('img').src = i+".png";
}
Now you just have to put the images called "1.png, 2.png, 3.png, ... , 60.png" to the folder.

Z-index is much more slower than visibility.
If you want to browse a stack of images (hundreds of 720p images) go for the hidden/visible.
I would be interested to know why tough !

jQuery toggle div: have below content to slide "gently"

I use this script to toggle a div with an animation. It works like a charm, except that the content below the div to toggle moves jumpy when .click is triggered.
$('.toggle').click(function() {
var $toggled = $(this).attr('href');
$($toggled).siblings('.gallery:visible').hide();
$($toggled).toggle("slide", {direction: 'up'}, 750);
return false;
});
How can I have the content below to slide "gently" (as content of toggled div does)? Thanks in advance! :-)

I can't understand your call to .toggle with regards to the documentation. The order of parameters, their values, just don't match the documentation.
I have tried to use .slideToggle() - it works perfectly.

Try use thumbnails instead.
Use any program to change their size to the "slidedown" size. Change the <img> src to the thumbnail (smaller image) and change the <a> url to the actual size.
The website is loading the large size and then rezise them. This is my best guess why its feels laggy correct me if im wrong.
Good luck!
Hint: Try using a small image on every slot before you create thumbnails and see if it is actually causing the trouble.

jQuery load images in varying levels of quality

I have a load of images that I am displaying on a website.
I have each image in varying levels of quality. I have thumb(~10kb), small(~200kb), medium(~1.2mb) and large(~2.5mb). What I would like would be for the thumb image to be displayed and then have javascript load the small and replace it when it has loaded, then load the medium and replace that and so on. That way an image pops up straight away and just gets better and better quality.
The image is being displayed as the background of a div and the size is set as contain so it will stretch the smaller images to fill the space.
All I need to some jQuery which will load the image and when loaded replace the background.
UPDATE
This is how I've solved it. I've created hidden img element which loads each image and then displays when done. But I wouldn't say no to some help cleaning it up.
The html is just
<img id="image_loader" style="display:none;" />
And the jQuery is
$("#image_loader").attr("src", SmallURL);
$("#image_loader").load(function() {
$("#image_container").css("background-image", 'url('+SmallURL+')');
$("#image_loader").attr("src", MedURL);
$("#image_loader").load(function() {
$("#image_container").css("background-image", 'url('+MedURL+')');
$("#image_loader").attr("src", LargeURL);
$("#image_loader").load(function() {
$("#image_container").css("background-image", 'url('+LargeURL+')');
$("#image_loader").unbind('load');
});
});
});
But this is horribly messy. I've tried putting the URLs in an array and doing a $.each but it just skips to the large.
SECOND UPDATE
I've also found that I needed to unbind the load function once all images had been loaded or it would get stuck in an infinite loop. Hopefully if this can be cleaned up it can be done in a way which won't introduce any infinite loops.
Any ideas on how I can neaten this up?

The JQuery API might be a good starting point, if you haven't already checked it out.
What you're trying to do sounds like you want to load multiple images at each level of quality, so something like...
<img src="image_low.jpg" class="low"/>
<img src="image_med.jpg" class="med" style="display:none;"/>
<img src="image_high.jpg" class="high" style="display:none;"/>
<script>
$('.low').load(function() {
$(this).attr("src", $('.med').attr('src'));
});
$('.med').load(function() {
$(this).attr("src", $('.high').attr('src'));
});
</script>
EDIT: I had my own attempt here which was improved here

jQuery delay until background image is loaded, then faded in?

I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.
Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.
All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).
Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide() my entire body while the background image loads.
*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded? *
* EDIT 2 *
Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?
<script>
$(function() {
// create a dummy image
var img = new Image();
// give it a single load handler
$(img).one('load',function() {
$('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
});
// declare background image source
img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";
// make sure if fires in case it was cached
if( img.complete )
$(img).load();
});
</script>

This seems an old thread but I found a solution for this.
Hope it can help:
$(window).load(function(){
$('<img/>').attr('src', 'images/imgsrc.png').load(function() {
$('#loading').fadeOut(500);
$('#wrapper').fadeIn(200);
});
});

Use $(document).load() to achieve what you want.
"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"
It is, just before the page has loaded

Add display: none; to your body tag
<body style="display: none">
Then with jQuery modify your code so it looks like this:
$(img).load(function(){
$("body").show();
});
Now page content will only show after img loading is complete.

To check when the image is loaded, declare another, "regular" image (i.e. the <img> tag) with the same src and attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.
Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.

How to keep div focus when the mouse enters a child node

So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!

Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.

I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...

1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.