Changing pictures by clicking on a text - javascript

I have a text on a list
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
and I have a <div> for the pictures and the labels
<div class="show">
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">LION</div>
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">TIGER</div>
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">CHEETAH</div>
</div>
what I was intending to do is when I click on the word LION the <div> will show the picture of the lion and its label and then, when clicked on the tiger the lion pic and label will be hidden and the tiger will be shown...any javascript or jquery command for this?
I'm sorry I just not very good at this.

Yet another solution :)
Js Fiddler Demo here
HTML
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="pic" data-name="lion"><img src="http://rs183.pbsrc.com/albums/x46/rebelrhoads/Lion.jpg~c200"/></div>
<div class="labels" data-name="lion">LION</div>
<div class="pic" data-name="tiger"><img src="http://www.perthzoo.wa.gov.au/wp-content/uploads/2011/06/Sumatran-Tiger.jpg"/></div>
<div class="labels" data-name="tiger">TIGER</div>
<div class="pic" data-name="cheetah"><img src="http://blog.londolozi.com/wp-content/uploads/2013/11/thumb-cheetah.jpg"/></div>
<div class="labels" data-name="cheetah">CHEETAH</div>
</div>
CSS
li{
color:#999;
cursor:pointer;
}
li.selected{
color:#000;
}
li:hover{
color:#000;
}
div.pic, div.labels{
display:none;
}
JavaScript
$(function(){
$('li').click(showAnimal);
});
function showAnimal(){
$('li').removeClass('selected');
$(this).addClass('selected');
var animal = $(this).text();
if(animal.toString().toLowerCase() == "animals")
$('div[data-name]').show();
else{
$('div.pic').hide();
$('div.labels').hide();
$('div[data-name=' + animal.toString().toLowerCase() + ']').show();
}
}

This is my idea:
html
<div class="show">
<div class="pic lion"><img src="LION.jpg"></pic>
<div class="labels lion">LION</div>
<div class="pic tiger"><img src="LION.jpg"></pic>
<div class="labels tiger">TIGER</div>
<div class="pic cheetah"><img src="LION.jpg"></pic>
<div class="labels cheetah">CHEETAH</div>
</div>
javascript
$(function(){
$('.animalss').click(function(){
switch($(this).text()){
case 'LION':
$('.pic').not('.lion').hide();
$('.labels').not('.lion').hide();
$('.lion').show();
break;
case 'TIGER':
$('.pic').not('.tiger').hide();
$('.labels').not('.tiger').hide();
$('.tiger').show();
break;
case 'CHEETAH':
$('.pic').not('.cheetah').hide();
$('.labels').not('.cheetah').hide();
$('.cheetah').show();
break;
}
});
});

Try this
HTML
<label>ANIMALS</label>
<ul class="1">
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="lion" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">LION</div>
</div>
<div class="tiger" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">TIGER</div>
</div>
<div class="cheetah" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">CHEETAH</div>
</div>
</div>
Jquery Script
$('ul li').on('click',function(){
var text=$(this).text().toLowerCase();
$('.'+text).show('slow').siblings().hide();
});
DEMO

//check the solution on fiddle DEMO
http://jsfiddle.net/5Ks5n/
html
<ul class="animal-list">
<li class="liHEADER" data-view="lion">Lion</li>
<li class="animalss" data-view="tiger">Tiger</li>
</ul>
<div class="show">
<div class="pic" style="display:none" data-animal="lion">
<img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" />
<div class="labels">LION</div>
</div>
<div class="pic" style="display:none" data-animal="tiger">
<img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" />
<div class="labels">TIGER</div>
</div>
</div>
Javascript
$(document).on("click",".animal-list",function(element){
var $target = $(element.target);
var animal = $target.attr("data-view");
$(".pic").hide();
$("[data-animal='"+ animal +"']").show();
});

Simple approach:
<label>ANIMALS</label>
<ul class="1">
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="lion_pic" style="display:none">
<img src="LION.jpg"></pic>
<label>LION</label>
</div>
<div class="tiger_pic" style="display:none">
<img src="TIGER.jpg"></pic>
<label>TIGER</label>
</div>
<div class="cheetah_pic" style="display:none">
<img src="CHEETAH.jpg"></pic>
<label>CHEETAH</label>
</div>
</div>
JS Code:
$('ul.1').click(function(e){
var type = $(e.target).text();
if(type === 'LION'){
$('.lion_pic').show();
$('.tiger_pic').hide();
$('.cheetah_pic').hide();
} else if(type === 'TIGER'){
$('.tiger_pic').show();
$('.lion_pic').hide()
$('.cheetah_pic').hide()
} else {
$('.cheetah_pic').show();
$('.lion_pic').hide()
$('.tiger_pic').hide()
}
});

The easiest but not shortest way to do this to assign classes to a group, group mean elements wich are interact with each oter i.e. lion text, image and lable in your case. Then use this code:
<pre>
<style>
.show div{display:none;}
</style>
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss" id = "lion" onclick="showImage(this.id);">LION</li>
<li class="animalss" id = "tiger" onclick="showImage(this.id);">TIGER</li>
<li class="animalss" id="cheetah" onclick="showImage(this.id);">CHEETAH</li>
</ul>
<div class="show">
<div class="pic lion"><img src="LION.jpg"></pic>
<div class="labels lion">LION</div>
<div class="pic tiger"><img src="LION.jpg"></pic>
<div class="labels tiger">TIGER</div>
<div class="pic cheetah"><img src="LION.jpg"></pic>
<div class="labels cheetah">CHEETAH</div>
</div>
</pre>
Then jQuery will be
<pre>
<script>
function showImage(param){
var classToShow = param;
$('.'+param).show();
$('.show div:not("."'+param+'")').hide();
}
</script>
</pre>
Check for syntex error and let me know about it.

I have reformatted your HTML so that its much easier to illustrate since I think maybe you are able to change the HTML of your site. This is perhaps how most people write code for Tabs.
<ul>
<li class="animals">LION</li>
<li class="animals">TIGER</li>
</ul>
<div class="content">
<div class="pic" id="lion">
<img src="LION.jpg" />
<div class="labels">LION</div>
</div>
<div class="pic" id="tiger">
<img src="TIGER.jpg" />
<div class="labels">TIGER</div>
</div>
</div>
and here is the jQuery code,
$(".pic").hide();
$("a[href='#lion']").on('click', function() {
$(".pic").hide();
$("#lion").show();
});
$("a[href='#tiger']").on('click', function() {
$(".pic").hide();
$("#tiger").show();
});
everytime we reload the page, we make sure the are hidden using $(".pic").hide(). Then when the user clicks LION or TIGER links, we will hide both and then show only the correct div, which is either LION or TIGER. Here is a Working Example. It is certainly possible to make the code even shorter by abstracting LION and TIGER to ANIMALS (or well, anything you want), but then it will be harder to understand for beginners.

Related

Trying to filter non-hovered elements with jquery

I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});
You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>

Hide parent div class if child div class does not have content when there are multiple parent divs with the same class name

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>

JQuery hover toggle related selector

I have a list of images and separate list where each item is related to an image. Is it possible to have a hover event that fades the related image in and out using JQuery? I.e. when you hover over listid-1, image-1 fades in.
This is the best I could do:
$(document).ready(function(){
$( ".options li" ).hover(function( event ) {
$('.image-' + (this - ".listid")).toggleFade( "300" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg'>
<img class='image-2' src='2.jpg'>
<img class='image-3' src='3.jpg'>
<img class='image-4' src='4.jpg'>
<img class='image-5' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
You have a couple of issues. Firstly concatenating the this reference with a string isn't going to give you a valid selector. Secondly, the method name is fadeToggle(), not toggleFade().
To fix the problems you could first group the li and img elements by giving them all the same respective classes, then relate the hovered li to the img by their indexes, something like this:
$(document).ready(function() {
$(".options .listid").hover(function(event) {
$('.image').eq($(this).index()).fadeToggle("300");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image' src='1.jpg'>
<img class='image' src='2.jpg'>
<img class='image' src='3.jpg'>
<img class='image' src='4.jpg'>
<img class='image' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid'>One</li>
<li class='listid'>Two</li>
<li class='listid'>Three</li>
<li class='listid'>Four</li>
<li class='listid'>Five</li>
</ul>
</nav>
</div>
</div>
You can get class of current li and split at - to get number and use it as selector for image.
$('img').hide()
$(".options li").hover(function() {
$('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
If you have multiple classes on images instead you can use data attributes to select images.
$('img').hide()
$(".options li").hover(function() {
$('img.image-' + $(this).data('img')).fadeToggle(300)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li data-img="1" class='listid-1'>One</li>
<li data-img="2" class='listid-2'>Two</li>
<li data-img="3" class='listid-3'>Three</li>
<li data-img="4" class='listid-4'>Four</li>
<li data-img="5" class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>

jQuery find closest ul

My HTML structure is like this:
<div class="product-slider-title">
<div><span class="left"> </span></div>
<div>Sample title</div>
<div><span class="right"> </span></div>
</div>
<div id="prslider1" class="product-slider-wrapper">
<div class="left-prduct-slider-nav sprites"></div>
<div class="right-prduct-slider-nav sprites"></div>
<div class="product-slider">
<ul>
<li class="product-holder"></li>
</ul>
</div>
</div>
How can i find the closest .product-slider ul from .left-prduct-slider-nav when i click on .left-prduct-slider-nav?
if this is .left-prduct-slider-nav then
var ul = $(this).siblings('.product-slider').find('ul')
Demo: Fiddle
You can use nextAll() to search the siblings after current element and use find() to searched the children in the matched element returned by nextAll.
Live Demo
$(this).nextAll('.product-slider').find('ul');
This should work
var ul = $('.left-prduct-slider-nav').closest('ul');
Hmm try this:
$('.left-prduct-slider-nav').click(function () {
var closest_ul = $(this).parent().find('.product-holder ul');
});
The closest .product-slider ul from .left-prduct-slider-nav is just the first one in the list, so you can use :first:
$('.left-prduct-slider-nav').click(function() {
$(this).parent().find('.product-slider ul:first')
})
Try first-child:
HTML:
<div class="product-slider-title">
<div><span class="left"> </span>
</div>
<div>Sample title</div>
<div><span class="right"> </span>
</div>
</div>
<div id="prslider1" class="product-slider-wrapper">
<div class="left-prduct-slider-nav sprites">Left Slider Nav</div>
<div class="right-prduct-slider-nav sprites"></div>
<div class="product-slider">
<ul>
<li class="product-holder1"></li>
</ul>
<ul>
<li class="product-holder"></li>
</ul>
<ul>
<li class="product-holder"></li>
</ul>
<ul>
<li class="product-holder"></li>
</ul>
</div>
</div>
<div class="product-slider-title">
<div><span class="left"> </span>
</div>
<div>Sample title</div>
<div><span class="right"> </span>
</div>
</div>
<div id="prslider1" class="product-slider-wrapper">
<div class="left-prduct-slider-nav sprites"></div>
<div class="right-prduct-slider-nav sprites"></div>
<div class="product-slider">
<ul>
<li class="product-holder"></li>
</ul>
</div>
</div>
JS:
$(document).ready(function () {
$(".left-prduct-slider-nav").click(function () {
alert($(".product-slider").find("ul:first-child").find("li").prop("class"));
});
});
jsFiddle.
Explanation:
I handle the .click() function of .left-prduct-slider-nav then I alert the class of the closest or in other words the first ul:first-child's li.
Proof:
The proof is that I changed the class of the first ul's li and then alert() it and then the output I get is this: product-holder1.
Try this:
$(this).next().next().find('ul');

Thumbnails Image Slider

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

Categories