Develop Reference

Clear main image in gallery on mouseout of thumbnail?

I'm using script found here:
Automatically load an image using javascript
I'm using them to build image gallery where the main image loads thumbnail image on mouseenter, but my main image begins blank not with the first thumbnail as in the answer. I need to know how to clear the main image back to blank on mouseout of each thumbnail?

Try JQuery .mouseout() like this:
$('.thumbnails img').mouseout(function () {
this.src = '';
});
Click http://jsfiddle.net/cnx65ev0/ to see it running. Hover over the images and when you leave them, they become blank. I hope this is what you wanted.

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 !

fadein images proloaded with javascript

image preloading code snippet :
myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
jquery code to display preloaded images:
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
I used image preloading so that the first image in my slider does not take time to show up, but it does with a blank space instead and all the consequent images show up without showing any blank space. But I don't know how to fadeIn the images during display.
the following code
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn('slow');
shows an error in console:
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn is not a function
I want a slider the one in http://www.cisco.com/
1) what should be the steps so that no blank space shows up at the very first time the slider begins? Putting code inside $(document).ready(.. or not does nothing.
2) how to achieve the fadeIn effect?
3) In http://www.cisco.com/, for each image, the text on the image seems to be highlighted a bit after the rest part of the image. How to achieve that?
EDIT:
after the image preloading snippet, the next segment follows:
for (i=0; i<n; i++){
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
if(i==n-1){
i=0;
}
}
that is all about the part of the slideshow I am interested to discuss here.

You don't want to be calling .html() on an img tag. You want to be setting the .src attribute on the img tag to point it to a new image. Assuming that .vrpl_slider_img is initially not visible, you would use this:
preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
// then some time later after the preload images have loaded
$(".vrpl_slider_img").attr("src", "img/1.jpg").fadeIn(40000);
You do not need to use the preload images at all once they've been loaded. The point of the preload images it to cause the images to get loaded into the browser cache so they are available locally (rather than over the internet) and will thus be loaded immediately when requested in the future. So, you just use the .src attribute with the normal image path and, because the image is in the browser cache, it will load immediately.

Colorbox multiple image slideshow by clicking one image

Please take a look at this site as a reference: http://www.philsalesses.com/place-pulse/
On the left you'll see a screenshot of an image. If you click the image, it will open colorbox for that one image.
I'm using wordpress, so associated with that post there are 4 more screenshots, all in a gallery.
What I want to do is when you click on that one image, to cycle through all the images in the gallery associated with that post.
I'm brand spanking new to wordpress, so please speak down to me.

No need to speak down to - everyone starts somewhere. As for showing your other images, the way the colorbox plugin is setup on your page is like so (pseudocode):
for all links that contain an image {
if the link is to an image {
if the image has a CSS class of "colorbox-[0-9]+" {
group it with all other images with the same CSS class
}
if the image has a CSS class of "colorbox-manual" or no CSS class {
don't group it with any other images
}
}
}
Looking at your page I see two problems:
Your one image link has the CSS class "colorbox-manual".
There's only one link on your page that meets the above criteria :)
The easiest way to fix it would be to add the other 4 images to your post so they show up as thumbnails, however I suspect this isn't what you want. As a hack, what you could do is add the other 4 images and then give them all a display: none style. That way the colorbox plugin would find them and group them with you main image, but not actually show the thumbnails on the post.
Something like this for the four images:
<img src="image1-thumb.jpg" />
<img src="image2-thumb.jpg" />
<img src="image3-thumb.jpg" />
<img src="image4-thumb.jpg" />
If that doesn't work, check in your markup for the class that the colorbox plugin adds to your images. It should be in the form colorbox-[0-9]+ (i.e. colorbox-123).

I used NextGen Gallery, imported the pictures using that, set the "Effect" in the options to off. Then I went in to the nextgen source and added colorbox-1 as a class under each img. Style the CSS and I'm done. 4 hours tops.
Take a look at http://www.philsalesses.com/seaswarm for a demo.

What is the prefered method to preload images <img> and why?

What is the best method to preload images <img> and why? I want to show images on link's hover i can't use images in CSS background so i can't use CSS sprite. but i want to preload all images while page load . which are add as <img>.

You can use the Image() object in JavaScript to preload the image, then swap it in when you're ready. Here's the HTML:
<img name="img01" src="regular_image.jpg">
Then in the JavaScript:
my_img = new Image();
my_img.src = "swap_image.jpg";
Which will put the image in your cache. When you swap it in, you can call:
document.img01.src='swap_image.jpg'