Kill bxSlider on button click so it can be reloaded

Kill bxSlider on button click so it can be reloaded - javascript

I am using bxslider to create a somewhat customized thumbnail/slider element. Basically I have a simple grid of thumbnails and the intent is to have the slider open on the specific thumbnail image on click.
The issue I'm coming across is that the slider remains active after closing the slider window and I need it to stop/reset.
Scouring the internet led me to the function destroySlider(), but that is resulting the following error in the console:
Uncaught TypeError: $(...).bxSlider(...).destroySlider is not a
function
Any thoughts on how best to do this is appreciated, code below:
JS:
function removeSlider(a, b) {
$(a).click(function(){
$(b).removeClass("open-slide");
$('.bxslider').bxSlider().destroySlider();
});
}
$('.open-slider').on('click', function (e) {
var startingImg = $(this).data('starting-img');
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
$('.bxslider').bxSlider({
startSlide: parseInt(startingImg)
});
removeSlider('.remove-port-item', '.slide-contain')
})
HTML:
<div class="row padding-md-bot">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
<div class="item-control">
<button class="remove-port-item button-close-slide">X</button>
<ul class="bxslider">
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
</ul>
</div>
</section>

Referring to comment by #Chris G above ^:
Try storing the slider in a global variable when you create it:
mySlider = $('.bxslider').bxSlider({ .... Then call
myslider.destroySlider(); Edit: according to the docs on github, this
will do it.
I tried this earlier with no luck, but I figured out why and here is the correct code:
var slider = $('.bxslider').bxSlider();
function removeSlider(a, b) {
$(a).click(function(){
$(b).removeClass("open-slide");
slider.destroySlider();
});
}
$('.open-slider').on('click', function (e) {
var startingImg = $(this).data('starting-img');
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
slider.reloadSlider({
startSlide: parseInt(startingImg)
})
removeSlider('.remove-port-item', '.slide-contain')
})
As Chris G points out, the ultimate solution is to move bxSlider to a global variable, but there was an extra step due to the fact that the click function for opening the slider is using a variable scoped to that function (startingImg). This was solved by running:
slider.reloadSlider({
startSlide: parseInt(startingImg)
})
UPDATE: This works if only using one set of slides in the markup. The minute I try to use multiple sets of slides, even though they have their own unique IDs, it breaks reloadSlider and destroySlider. I am still trying to work through this.

In order for the image clicks and X button to work regardless of the state, it needs to be checked, both when opening and closing the slider:
Demo:
var slider = {};
function removeSlider(a, b) {
$(a).click(function() {
$(b).removeClass("open-slide");
var slideSection = $(a).parent().parent().attr("id");
if (slider[slideSection]) {
slider[slideSection].destroySlider();
slider[slideSection] = null;
}
});
}
$('.open-slider').on('click', function(e) {
var startingImg = parseInt($(this).data('starting-img'));
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
if (slider[slideSection]) slider[slideSection].goToSlide(startingImg);
else slider[slideSection] = $('.bxslider').bxSlider({
startSlide: startingImg
});
})
$(document).ready(function() {
removeSlider('.remove-port-item', '.slide-contain');
});
.open-slider img {
width: 100%;
height: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="row padding-md-bot">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
<div class="item-control">
<button class="remove-port-item button-close-slide">X</button>
<ul class="bxslider">
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
</ul>
</div>
</section>
Edit: changed JS code to work for multiple groups of thumbs + slider.

Related

How to make a responsive isotope gallery plugin in different screen size?

I want to make the following isotope gallery responsive for all different screen size. there is always a gap whenever I want to see it in the smaller size window (320px,576px,768px). How can I solve it?
My website link:Website
Thank You.
$('.i_gallery').isotope({
itemSelector: '.g_item',
percentPosition: true,
masonry: {
columnWidth: '.g_item'
}
});
//filtering Click function
$('.portfolio-menu ul li').click(function() {
$('.portfolio-menu ul li').removeClass('active');
$(this).addClass('active');
let filterItems = $(this).attr('data-filter');
$('.i_gallery').isotope({
filter: filterItems
})
return false;
});
<div class="wrapper">
<div class="portfolio-menu">
<ul>
<li class="active">All</li>
<li data-filter=".web">Web Design</li>
<li data-filter=".logo">Logo Design</li>
<li data-filter=".wordpress">WordPress</li>
<li data-filter=".ecommerce">E-Commerce</li>
</ul>
</div>
<div class="i_gallery">
<div class="g_item web">
<img src="image/10.png" alt="" class="img-fluid">
</div>
<div class="g_item web">
<img src="image/11.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/12.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/13.png" alt="">
</div>
<div class="g_item logo">
<img src="image/14.png" alt="">
</div>
<div class="g_item logo">
<img src="image/15.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/16.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/17.png" alt="">
</div>
</div>
</div>
I have attached the external Js file and HTML file of the isotope gallery.

The isotope gallery seems to be occupying 94% all the time. You can try giving 3% margin to the parent container. So the gallery
i_gallery {
width: 100%;
/* margin: 0 auto; */
margin: 3%;
}
will come at center.

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});

You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

How to search for clicked element src attribute and add it to another jquery

I am working with TB and trying to find solution to combine carousel and modal feature. I know that carousel gallery already exists in ver.3 but I am still working in 2.3 for some reason.
The problem is when user clicks on the carousel on the page it appears modal window and starts to slide images from the begining and not from the current (clicked) image.
Idea is to find that src attribute of clicked element and pass it over to element within modal window. Any ideas how to do that? Thanks! Here is html structure.
<!-- Modal -->
<div id="modal-trigger" class="modal hide fade modal-trigger slide" aria-hidden="true">
<div class="modal-header">
<div class="num"></div>
<button class="close" data-dismiss="modal">Schließen</button>
</div>
<div class="modal-body">
<div id="myCarousel2" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class=" active"> </li>
<li data-target="#myCarousel2" data-slide-to="1" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="2" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="3" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="4" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="5" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="6" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="7" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="8" class=""> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1_big.jpg" alt="" />
</div>
<div class="item">
<img src="img/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/4.jpg" alt="" />
</div>
<div class="item">
<img src="img/5.jpg" alt="" />
</div>
<div class="item">
<img src="img/6.jpg" alt="" />
</div>
<div class="item">
<img src="img/7.jpg" alt="" />
</div>
<div class="item">
<img src="img/8.jpg" alt="" />
</div>
<div class="item">
<img src="img/9.jpg" alt="" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next">›</a>
</div>
</div>
</div>
Here is my test js code made for that:
$('.carousel').on('slide', function(e) {
// var slideFrom = $(this).find('.active').index();
// var slideTo = $(e.relatedTarget).index();
var clickedItem = $(this);
var replacedItem = $('#myCarousel2 .carousel-inner .item.active');
$(clickedItem).click(function() {
$(this).attr({
src: $(this).attr('src'),
'src': $(this).attr('src')
})
console.log("it should replace element src value");
});
// console.log(slideFrom+' => '+slideTo);
});
Something similar I am trying to achive but only with Twitter Bootstrap 2.3
http://bootdey.com/snippets/view/Bootstrap-Gallery-with-Modal-Lightbox-and-Carousel-114
**This code helped me to open almost the right image in modal window, but unfortunately it picks up allways the image with +1 number of img-data. Does anyone has solution to pick just the right image which in this case is one number lower? **
$('#myCarousel .item a').on('click', function() {
$('#modal-trigger').carousel(parseInt($(this).children().attr("data-id")));
console.log("Code works");
});

try to use trigger click on indicator corresponding to the clicked element (using index or id)
$('.carousel .someitem').on('click', function() {
var index = $(this).attr('index'); // or other (what you want)
$('#modal-trigger .carousel-indicators:eq('+index+')').trigger('click');
});
Something like this.
It's not tested.

And the answer is:
$('#myCarousel .item a').on('click', function() {
var goTo = parseInt($(this).children().attr("data-id"), 10) - 1;
if(goTo < 0)
goTo = 0;
$('#modal-trigger').carousel(goTo);
console.log("Code works");
});

resizeFix reInit sliders

end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>

You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}

Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);

Changing pictures by clicking on a text

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.

We Keep Coding

JavaScript is the programming language of the Web.

Kill bxSlider on button click so it can be reloaded - javascript

Related

How to make a responsive isotope gallery plugin in different screen size?

how to use same jQuery function on multiple group of lists

How to search for clicked element src attribute and add it to another jquery

resizeFix reInit sliders

Changing pictures by clicking on a text

Categories

Resources