Develop Reference

enlarging a thumbnail onClick

I am trying to make a sort of image library where the user can view a series of thumbnails and click on them to view them in full size. I have managed to make this work but the way I have done it requires lots of repetitive code. Here is an example of what I have for each image:
script
function load1() {
document.getElementById('wup').src = document.getElementById('wop1').src
var myElement = document.querySelector("#wup");
myElement.style.visibility = "visible";
var myElementB = document.querySelector("button");
myElementB.style.visibility = "visible";
var myElementC = document.querySelector("#cover");
myElementC.style.visibility = "visible";
}
Pretty much what happens is every thumbnail (there are quite a lot) has one of these functions that runs when clicked. It makes a large image in the center of the screen appear, and the source of the image is whatever thumbnail was clicked. While this method does work, it requires lots of what feels like unnecessary repetition.
What I am looking for:
A simple and efficient way to do the same thing.
Any help would be much appreciated! Thanks.

Just create a function that does this for each element.
function showLargeImage(thumbnail) {
document.getElementById('wup').src = thumbnail.src
document.querySelector("#wup").style.visibility = "visible";
document.querySelector("button").style.visibility = "visible";
document.querySelector("#cover").style.visibility = "visible";
}
Then for each image just call the function onclick.
<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>

Change image source on mouseover then get the image back on mouseout

<img src="img/image1.png" id="mainimage">
<p>Dog</p>
<p>Cat</p>
I am trying to use JavaScript/jQuery so that whenever a user places their mouse over any of the links with the id's pet1 & pet2 it will change the image src of the image with the id of mainimage.
var img = document.getElementById('swap');
document.getElementById('pet1').onmouseover = function(){
// manipulate the image source here.
img.src = img.src.replace(/\.jpg/, '-on.jpg');
}
The above JavaScript is a script I found here that seems to have the functionality I am looking for. The only problem is that whenever my mouse is over the link it does not display the image I want. Ok, the question I am looking for is how can I make the image with the source (img/pet1.jpg) appear?
Any help will be appreciated!

Try this more simply
$(function() {
$("#pet1")
.mouseover(function() {
var src = 'first image path';
$("#mainimage").attr("src", src);
})
.mouseout(function() {
var src2 ='Default image path';
$(this).attr("src", src2;
});
});
Similllar for second image and for shortening even this you can give a class to every link you want and then by using $(element).each() function and "data" attribute of html5 you can manage it in more cool way

This should get you started.
For all links at once we set a mouseover handler (which takes the ID of the link, turns it into a path to the image, and displays it) and a mouseout handler (which reverts the image's src to its original image).
$(document).ready(function() {
// To start with, get a reference to the image and its original src
var $mainImage = $('#mainimage'),
originalImageSrc = $mainImage.attr('src');
// Then add mouseover and mouseout handlers to all the links
$('a')
.on('mouseover', function() {
var newImageSrc = 'img/' + $(this).attr('id') + '.jpg';
$mainImage.attr('src', newImageSrc);
})
.on('mouseout', function() {
$mainImage.attr('src', originalImageSrc);
});
});
You can see it working in this JSFiddle. So that you can see it working in the JSFiddle without real images, I've used a div's text rather than an img's src, but that's just for the demo.
Of course you could always adapt it (maybe you want to be more specific than all a tags, and maybe you don't always want to use the format img/<id>.jpg – in which case you could add a data-img-src attribute to all your links and use .data('imgSrc') instead of the .attr('id')).

Hopefully this is what you're looking for.
HTML:
<img src="http://placehold.it/300x150" id="theImage">
<p>Red</p>
<p>Blue</p>
JS:
$('.yourClass').hover(function() {
var newImg = $(this).data('img');
$('#theImage').attr('src',newImg)
}, function() {
$('#theImage').attr('src','http://placehold.it/300x150')
});
JSFiddle

Pre-load Jquery hover images

Right now I am building a map of the US, and when you hover over any given state, I am replacing the image with an image of a different color.
My problem is that the way I am currently doing things, the image is being replaced and a new image loaded on hover.
I have the HTML laid out as:
<img class="state" id="alaska" src="img/united-states_Alaska.png" alt="alaska">
<img class="state" id="hawaii" src="img/united-states_hawaii.png" alt="hawaii">
And the jQuery I am using is:
$('.interactive-map img').each(function(e){
var src = $(this).attr('src');
$(this).hover(function(){
$(this).attr('src', src.replace('.png', '-hover.png'));
}, function(){
$(this).attr('src', src);
});
});
I am curious if there is another way to either preload the images with JavaScript, or make it so that there isn't a new request for image every time I hover. I would like to not have to change the HTML or CSS much and optimize it in JavaScript.

Add your images to the DOM on page load but in hidden state, then they get cached
$(function() {
var images = ['url/to/your/jpg1.jpg', 'ur/to/your/png2.png'];
var d = document.createElement("div");
d.style.display = 'none';
document.body.appendChild(d);
for (var i in images)
{
var img = document.createElement("img");
img.src = images[i];
d.appendChild(img);
}
});

Have two image tags and set the first image's display: block. Set the second image's display: none.
Then on hover you switch the them. It is as easy as that.

Use PreloadJS
Example:
var preload = new createjs.LoadQueue();
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile('http://createjs.com/images/404/gBot-confused.jpg');
function handleFileComplete(event) {
document.body.appendChild(event.result);
}
Full Docs: here
Another interesting post using JS and AJAX: Preloading

jQuery image preload

I got a web application, in which there are some images.
Will show a overlay in my page at start and that will automatically fadeout on all images loades.
I need something like this
its rough code
var image1="image1.jpg";
var image2="image2.jpg";
var image4="image4.jpg";
image1 & image2 & image4 loaded then fadeout #preload and show content.
Please help me ... I tried this .. but not working ..
var img1 = new Image();
img1.src = "../images/wall.jpg";
img1.onload = function() {
alert("loaded");
};

var images_loading = $('img').length;
$('img').load(function(){
if(!--images_loading) {
// all images loaded
}
});
Please mind you can't use display:none to hide images.
Using display:none will block image download by your browser. User visibility:hidden instead.

Try this fiddle. I've made it using mostly raw javascript.
If you want, you could use jQuerys .load to replace the onload function, and append to replace appendChild

Image Swap using jQuery

I hope somebody could help me out with this.
I'm working on a portfolio website that currently looks like this:
http://cargocollective.com/shap
As you can see, I have a png image over 15 animated gif thumbnails.
Basically, I want to have some short gif animations popping into some of the screens from a time to time, so what i'm trying to do is to have a script that replaces some of the gifs with others, either randomly OR after a certain amount of time.
I hope that someone can understand what i mean and help me.
__________ *UPDATE*:
Thanks a lot, I really appreciate the help. I'm sorry for the lack of knowladge I have, making it hard for me to use what you just wrote there, but this is what I added to my source code:
<script type="text/javascript">
$(document).ready(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif")
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479849/prt_166x132_1314132538.gif");
else
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif");
setTimeout(changer,time);
}
</script>
I just copied the URL of 2 of my gif thumbnails and added them to the script, is that absolutely wrong?
Maybe the fact that I'm using the cargocollective system makes things complicated.
Here is what it looks like right now, as you can see, something IS happening, but I can't really control it:
http://cargocollective.com/shap
(after a minute the png overlay is gone for whatever reason)
best,
s

Tube televisions! How wonderfully quaint. ;-)
Well, here's something I tossed together. Obviously you should change the actual image SRCs into something that exists on your server.
http://jsfiddle.net/9KrsV/1/
$(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="images/chalk-dotted.png")
$img.attr("src","images/chalk-box.png");
else
$img.attr("src","images/chalk-dotted.png");
setTimeout(changer,time);
}
UPDATE: Obviously, this is pretty narrow. Here's another script that will store the old SRC and eventually flip back to it:
function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "noisy_static.gif";
if ($img.attr("src") == newsrc) {
$img.attr("src", $img.data("oldsrc"));
} else {
$img.data("oldsrc",$img.attr("src"));
$img.attr("src", newsrc);
}
setTimeout(changer, time);
}