I have the below HTML I'm trying to loop through using jQuery's .each() method:
<div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">
<div class="vehiclesInBox" id="product3">
<div class="fltLeft numAmt3">
<span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name3">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden3">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
<div class="vehiclesInBox" id="product4">
<div class="fltLeft numAmt4">
<span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name4">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
<img class="pattern patternInShipment" src="../images/fire1192015.png">
<img class="vehicle vehicleInShipment" src="../images/truck1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden4">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
<div class="vehiclesInBox" id="product5">
<div class="fltLeft numAmt5"><span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name5">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
<img class="pattern patternInShipment" src="../images/squiggle1192015.png">
<img class="vehicle vehicleInShipment" src="../images/van1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden5">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
<div class="vehiclesInBox" id="product6">
<div class="fltLeft numAmt6"><span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name6">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden6">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
I'm attempting to look through all of the div containers with a class of .vehiclesInBox and compare the image sources in them. If there is an exact match of all three images, remove the newest duplicate div#product(x), and add a number counter to the matched container in span#builtVehNum. My jQuery is below:
$("#currentOrder .vehiclesInBox").each(function() {
var jaVehicle = $(this).find("img.vehicleInShipment").attr("src")
var jaWheel = $(this).find("img.wheelsInShipment").attr("src")
var jaPattern = $(this).find("img.patternInShipment").attr("src")
});
I'm confused as to what the next step would be? Any help is appreciated. Thanks!
Its not yet adding the counter, but here you have a rough selection logic:
$("#currentOrder .vehiclesInBox").each(function() {
var cont = $(this),
images = cont.find('img'),
srcs = new Array(images.eq(0).attr('src'), images.eq(1).attr('src'), images.eq(2).attr('src')),
matchings = $("#currentOrder .vehiclesInBox").filter(function() {
return $(this).find('img[src="' + srcs[0] + '"]').length && $(this).find('img[src="' + srcs[1] + '"]').length && $(this).find('img[src="' + srcs[2] + '"]').length;
});
if (matchings.length > 1) {
matchings.filter(':last').fadeTo(500, .5);
}
});
Replace fadeTo(500, .5); with remove();.
Working fiddle
I would handle it something like this:
Loop over each product and then for each product, loop over its images.
Within the loop, you'll create an array to keep track of all image sources. Each time you encounter a new image, check if its source already exists in the array. If it does not, add it. If if DOES, add one to our duplicateCounter.
At the end, check if the duplicateCounter is equal to 3 (in other words, you have three matching image sources).
If so, remove the current product
See code below (run to see it in action):
function removeDuplicates() {
var imgSources = []; // empty array to hold image sources for comparison
var duplicateCounter; // counter to keep track of how many duplicate image sources found
var src;
// Loop over each product
$("#currentOrder .vehiclesInBox").each(function() {
// Reset the duplicate counter to zero for each new product
duplicateCounter = 0;
// Loop over the current product's images
$(this).find('img').each(function() {
src = $(this).attr('src');
// Check if the current image source exists in the image source array.
// If it does, increment the counter by one.
if ($.inArray(src, imgSources) > -1) {
duplicateCounter++;
} else {
// If it doesn't already exist in the array, add it
imgSources.push(src);
}
});
// Now that we've looped through all the images for the current product, check if the duplicate count is 3. If so, remove the product.
if (duplicateCounter === 3) {
$(this).remove();
}
});
}
$(document).ready(function() {
// Call the function on document ready
removeDuplicates();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">
<div class="vehiclesInBox" id="product3">
<div>Product 3</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
<div class="vehiclesInBox" id="product4">
<div>Product 4</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
<img class="pattern patternInShipment" src="../images/fire1192015.png">
<img class="vehicle vehicleInShipment" src="../images/truck1192015.png" style="">
</div>
<div class="vehiclesInBox" id="product5">
<div>Product 5</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
<img class="pattern patternInShipment" src="../images/squiggle1192015.png">
<img class="vehicle vehicleInShipment" src="../images/van1192015.png" style="">
</div>
<div class="vehiclesInBox" id="product6">
<div>Product 6 (this one has duplicate images and will be removed...)</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
</body>
</html>
Related
i have below code :
<div id="test">
<img src="#">
</div>
I append span to this div tag:
$('div#test').append('<span>123123</span>');
this result :
<div id="test">
<img src="#">
<span>123123<span>
</div>
but I want get span first , like this :
<div id="test">
<span>123123<span>
<img src="#">
</div>
Thanks for your help
You can use $.prepend()
$('div#test').prepend('<span>123123</span>');
You can use prepend(); to change the order.
.before() is easier to remember. Then there's its counterpart .insertBefore(). And then there's the previously mentioned .prepend() and its opposite .prependTo().
Plain JavaScript has .before(), .prepend(), .insertBefore(), and my favorite .insertAdjacentHTML(). .insertAdjacentHTML() is like .innerHTML that can insert htmlString at 4 different positions in relation to an element.
Signature:
DOMObject.insertAdjacentHTML(Position,htmlString)
Position:
"beforebegin" <div> "afterbegin" ... "beforeend" </div>"afterend"
$('#test1 img').before('<span>123123</span>');
$('<span>123123</span>').insertBefore('#test2 img');
$('#test3').prepend('<span>123123</span>');
$('<span>123123</span>').prependTo('#test4');
document.querySelector('#test5 img').before(document.createElement('SPAN').textContent = '123123');
var span = document.createElement('SPAN');
span.textContent = '123123';
document.querySelector('#test6').insertBefore(span, document.querySelector('#test6 img'));
document.querySelector('#test7').prepend(document.createElement('SPAN').textContent = '123123');
document.querySelector('#test8').insertAdjacentHTML('afterbegin', '<span>123123</span>');
<div id="test1">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test2">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test3">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test4">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test5">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test6">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test7">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test8">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.
HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p>A photo credit.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
JavaScript
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});
You were on the right direction. However a couple mistakes in your javascript.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to jsfiddle)
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit:
Bonus:
If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.popper.hide { display: none; }
It's hard to fully gather what you want to do, but if I understand correctly...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.
It is expected to work in the following manner:
.popper:has(> p:empty) { display: none }
I hope this helps... :)
You can check this code.
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" />
</div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p>
<p>A photo credit.</p>
</p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev">
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>
I have ms2Gallery on MODX website. And I want to add some functionality (add left and right buttons).
<div class="large-12 medium-12 columns main_page_preview text-center">
<div class="main_page_title large-8 medium-8 large-offset-2 medium-offset-2 columns">
<h1>NAME</h1>
</div>
<div id="msGallery">
<div class="large-12 medium-12 columns" style="max-height: 845px; overflow: hidden; margin-bottom: 15px;" href="/assets/images/resources/33/banya-10.jpg">
<img src="/assets/images/resources/33/banya-10.jpg" width="100%" alt="" title="" id="mainImage">
</div>
<div class="clearfix"></div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-01.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-01.jpg">
<img src="/assets/images/resources/33/360x270/banya-01.jpg" alt="" title="banya_01.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-04.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-04.jpg">
<img src="/assets/images/resources/33/360x270/banya-04.jpg" alt="" title="banya_04.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-06.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-06.jpg">
<img src="/assets/images/resources/33/360x270/banya-06.jpg" alt="" title="banya_06.jpg" width="100%" data-id="">
</a>
</div>
<img src="build/img/prev-left.png" class="left-arrow-gallery" id="leftarrow">
<img src="build/img/next-right.png" class="right-arrrow-gallery" id="rightarrow">
</div>
To solve this problem I created this js-code:
var clicks= 0;
$('#rightarrow').on('click', function(){
clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})
But I want to decrease elements on the left click, no matter how many times I clicked on right arrow.
var clicks = 0;
var leftClicks = 0;
var _ElementCount = $(".thumbnail").length;
$('#rightarrow').on('click', function(){
clicks = _ElementCount ? clicks = 0 : clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks = 0 ? clicks = _ElementCount : clicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})
i'm new to jquery.I tried to load gallery when click image in script. I want to replace images src links when click the top images.
like this-->
image1 image2 image3
if image1 click load gallery1, if image2 click load gallery2 lick vice.
this is the my html code
<div>
<img id="book1" src="image1.jpg">
<img id="book2" src="image2.jpg">
</div>
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
i want to replace this
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
into
<div id="pages">
<div style="background: url(new1.jpg); width:100%;"></div>
<div style="background: url(new2.jpg); width:100%;"></div>
<div style="background: url(new3.jpg); width:100%;"></div>
<div>
i just want to replace the html
Can anyone help me to write this jquery?
You can try this:-
<div id="demo">
<img id="book1" src="image1.jpg" class="image1">
<img id="book2" src="image2.jpg" class="image2">
<img id="book3" src="image3.jpg" class="image3">
</div>
<div id="pages">
<div id="image1" style="background: url(1.jpg); width:100%;"></div>
<div id="image2" style="background: url(2.jpg); width:100%;"></div>
<div id="image3" style="background: url(3.jpg); width:100%;"></div>
<div>
javascript ->
$(document).on("click","#demo img",function(){
var $self= $(this);
selfId = '#' + $self.attr('class'),
$("#pages").replaceWith($("#"+selfId) );
});
example:http://api.jquery.com/replacewith/
You can try below code, where you can add data attribute data-gallary to images and its value equal to id of the page div. Add id to the page div as shown below.
Now you need to hide and show pages on the basis of clicked image.
NOTE - please make sure that all ids should be unique through out the HTML.
HTML:
<div>
<img id="book1" src="image1.jpg" data-gallary="page1">
<img id="book2" src="image2.jpg" data-gallary="page2">
</div>
<div id="pages">
<div id="page1" style="background: url(1.jpg); width:100%;"></div>
<div id="page2" style="background: url(2.jpg); width:100%;"></div>
<div id="page3" style="background: url(3.jpg); width:100%;"></div>
<div>
JQuery:
$(function(){
$('img[id^=book]').click(function(){
//hide all pages
$('div[id^=page]').hide();
//show corresponding page
var pageId= $(this).data('gallary');
$('#'+pageId).show();
});
});
Check this fiddle
Simple jQuery code
$("#book1").click(function(){
$('#page1').attr('src','http://placehold.it/350x150.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
$("#book2").click(function(){
$('#page1').attr('src','http://placehold.it/300x300.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
If you are simply trying to alter the img src, you can use this.
You can try $("#book1").attr("src",[your new src]);
If you want to do it on click...
$("#book1").click(function(){
$("#book1").attr("src",[your new src]);
});
Hope that helps
Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.
Thumbs Part HTML
<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Larger Images HTML
<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery
$("#thumbs img").click(function(){
$("#thumbs img.clicked").removeClass('clicked');
$("#panel img").hide();
$("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
Here is the demo:
http://jsfiddle.net/L7yKp/5/
On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.
Here is a simple working demo matching your needs: http://jsfiddle.net/D6XHt/1/
Note: It's not the same html as yours but should you push to the right direction. The technique i'ma using has one disadvantage. Without JS enabled your users will see only on big image.
BUT a real advantage is you will save bandwidth and page loading time if you have many images. This is because every big image will load only if the user clicks a thumbnail.
Here is another working solution with all images in document.
http://jsfiddle.net/D6XHt/2/
If you want to show your Images in a fancy lightbox Popup try
http://fancybox.net/home or
http://www.jacklmoore.com/colorbox