We Keep Coding

how to make a jquery carousel

jquery
$('img').click(function() {
$('#carousel-container').toggle();
var img = $(this).attr('src');
var left = $(this).prev().attr('src');
var right = $(this).next().attr('src');
$("#carousel").attr('src', img);
$('#carousel-right').click(function() {
$('#carousel').attr('src', right);
});
$('#carousel-left').click(function() {
$('#carousel').attr('src', left);
});
});
html
img(src='images/img1.jpg')
img(src='images/img2.jpg')
img(src='images/img3.jpg')
img(src='images/img4.jpg')
img(src='images/img5.jpg')
img(src='images/img6.jpg')
img(src='images/img7.jpg')
img(src='images/img8.jpg')
img(src='images/img9.jpg')
img(src='images/img10.jpg')
img(src='images/img11.jpg')
img(src='images/img12.jpg')
img(src='images/img13.jpg')
img(src='images/img14.jpg')
img(src='images/img15.jpg')
img(src='images/img16.jpg')
I want a carousel to pop up when a image is clicked showing the clicked image. and then have left and right buttons to cycle through the images. But i don't know how to cycle through the images.

You can use Bootstrap carousel it's really easy to use it.

How to get JQuery to swap picture prior to page being displayed

I've got the following script which swaps the source of an image. However currently this happens after the page loads so the user experiences a split second of seeing one picture before it switches to the correct image.
<script>
window.onload = function () {
var winnerName = $("#leaderboard tr td:eq(1)").text().trim();
$("#pictureDiv img").attr("src", "/Content/Images/" + winnerName + ".jpg");
};
</script>
How can I get the image to switch before loading?
Note I've also tried:
<script>
$(function() {
var winnerName = $("#leaderboard tr td:eq(1)").text().trim();
$("#pictureDiv img").attr("src", "/Content/Images/" + winnerName + ".jpg");
});
</script>
but this results in the same thing occurring

Both of the window.onload or jQuery's $(function()... functions are only called when the page is fully loaded.
The closest you could get is to add the function to the images onload handler.
<img src="..." onload="function() {...}">
But I suspect the same will still occur.
If the image's src needs to be set using javascript then you could try dynamically creating the image and adding it in where you need it, using something like the following.
$(function() {
var winnerName = $("#leaderboard tr td:eq(1)").text().trim();
var imgElement = $('<img>').attr("src", "/Content/Images/" + winnerName + ".jpg");
$("#pictureDiv").append(imgElement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pictureDiv"></div>

Which function controls the product image change?

http://www.wargame-club.com/3-day-molle-assault-backpack-black.html
When I click the four product thumbnail images under the big product image, the product image will change. I find there is no click function on the a label. How does it make the product image on the thumbnail images change? Thank you.
<li>
<a title="" class="cloud-zoom-gallery" rel="popupWin:'http://www.wargame-club.com/catalog/product/gallery/id/24/image/83/', useZoom: 'cloudZoom', smallImage: 'http://www.wargame-club.com/media/catalog/product/cache/6/image/265x265/fa17b1d835a4c57a29916eae7df1805d/A/S/AS043_2.jpg'" href="http://www.wargame-club.com/media/catalog/product/cache/6/image/fa17b1d835a4c57a29916eae7df1805d/A/S/AS043_2.jpg"></a>
</li>

When you inspect the page and check the javascript files, you will get to the:
http://www.wargame-club.com/js/cjm/colorselectorplus/cloud-zoom.1.0.2.min.js
In this file you will find the following code:
$(this).bind('click', $(this), function (event) {
var data = event.data.data('relOpts');
// Destroy the previous zoom
$('#' + data.useZoom).data('zoom').destroy();
// Change the biglink to point to the new big image.
$('#' + data.useZoom).attr('href', event.data.attr('href'));
// Change the small image to point to the new small image.
$('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
// Init a new zoom with the new images.
$('#' + event.data.data('relOpts').useZoom).CloudZoom();
}
the script used is:
http://www.starplugins.com/cloudzoom

Impliment the animation on click only at the first click?

I have multiple anchor tags with a rel="<img src"#"/>".
When I click on any <a></a>, I show a large image in another div with the rel value using a fadeIn effect.
What I want to do is check if the large image has the same src as the rel of the anchor and prevent the fadeIn effect if so.
$(document).ready(function () {
$("a.largeimg").click(function () {
var image = $(this).attr("rel");
$('.main-product-image').html('<img src="' + image + '"/>');
$('.main-product-image img').hide();
$('.main-product-image img').fadeIn();
return false;
if(src == image) {
$('.main-product-image img').show();
}
});

You can check if the rel of the anchor and the src of the image are the same and if so escape the function before the fade in code, like so:
var src = $('.main-product-image img').attr("src");
if (src == image) return false;

If I understand you question correctly, before the animation you need to confirm if the src of the image is equal to the rel attribute of the clicked element, thus preventing the animation!
JQUERY
$(document).ready(function () {
// use bind when targeting many elements
$("a.largeimg").bind("click", function () {
var $target = $('.main-product-image'), // target element
src = $target.find('img').attr("src"), // src from existent image
image = $(this).attr("rel"); // rel from clicked element
// if src different from image
if (src != image) {
$target.html('<img src="' + image + '"/>'); // append new image
$target.find('img').hide().fadeIn(); // perform the animation
}
// prevent the browser from continuing to bubble the clicked element
return false;
});
});
Ps:
Not tested, but should work just fine!

For Statement and Img Problem

I am using the following logic in a for statement
The problem I am having is that it seems that when you hover over the first image - it hides 'all the images'. I want to try and preserve the [i] for each image but it seems it doesn't do this ?
function myHandler(elem, img) {
var curImg = img;
var curImgId = curImg.find('img');
$(curImgId).live('click', function() {
$(this).hide();
});
//Other stuff requiring preservation of [i]
}

When you hover over the first image, that image hides. This is normal.
However, your problem is the second image moves into the space previously filled by the first image, and the second image gets a mouse event, which causes that image to hide. This happens continuously until the rest of the images all disappear.
You can test this by hovering over the second image - all the images to the right disappear.

EDIT: I would second #Digital Planes answer,
the second image comes in place of first one due to first one being hidden and triggers an event.
Here is a working code : http://jsfiddle.net/njPdQ/8/
The change is :
function myHandler(elem, img) {
console.log(elem);
var curImg = img;
var curImgId = curImg.find('img');
console.log(img);
$(curImgId).live('mouseenter', function() {
console.log("Event handler: Hiding " + elem);
// $(this).hide();
$(this).css("visibility", "hidden"); //this will keep the images in place
});
}