I got a Thumbnail slider but that does not work right, When i click a particular thumb image, the main images is repeated is the same image appears.
Anyone can help me to solve this
Relevant URL: http://jsfiddle.net/danoftheman/C3Sr3/1/
$(document).ready(function() {
$(function() {
// If there are gallery thumbs on the page
if ($('#gallery-thumbs').length > 0) {
// Cache the thumb selector for speed
var thumb = $('#gallery-thumbs').find('.thumb');
// How many thumbs do you want to show & scroll by
var visibleThumbs = 4;
// Put slider into variable to use public functions
var gallerySlider = $('#gallery').bxSlider({
controls: false,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
onAfterSlide: function(currentSlideNumber) {
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onNextSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
},
onPrevSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
// When clicking a thumb
thumb.click(function(e) {
// -6 as BX slider clones a bunch of elements
gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6);
// Prevent default click behaviour
e.preventDefault();
});
// Function to calculate which slide to move the thumbs to
function slideThumbs(currentSlideNumber, visibleThumbs) {
// Calculate the first number and ignore the remainder
var m = Math.floor(currentSlideNumber / visibleThumbs);
// Multiply by the number of visible slides to calculate the exact slide we need to move to
var slideTo = m * visibleThumbs;
// Tell the slider to move
thumbsSlider.goToSlide(slideTo);
}
// When you click on a thumb
$('#gallery-thumbs').find('.thumb').click(function() {
// Remove the active class from all thumbs
$('#gallery-thumbs').find('.thumb').removeClass('pager-active');
// Add the active class to the clicked thumb
$(this).addClass('pager-active');
});
// Thumbnail slider
var thumbsSlider = $('#gallery-thumbs').gbxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
displaySlideQty: visibleThumbs,
moveSlideQty: visibleThumbs,
infiniteLoop: false,
slideWidth: 200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10
});
}
});
});
.gallery-container {
width: 350px;
height: 300px;
}
.gallery-thumbs-container {
width: 350px;
height: 300px;
}
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/jquery.bxslider.css" rel="stylesheet" />
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/gallery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js" type="text/javascript"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js" type="text/javascript"></script>
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-silver-blue.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-cherry-red.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-ivory.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-white.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-brown.jpg" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-silver-blue.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-cherry-red.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-ivory.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
</ul>
</div>
</div>
Update this line
gallerySlider.goToSlide($(this).closest('.thumb-item').index() -6);
to
gallerySlider.goToSlide($(this).closest('.thumb-item').index() );
http://jsfiddle.net/C3Sr3/23/
Related
Is this code still working? I tried it but unfortunately, it didn't work...
I'm using OwlCarousel2-2.3.4 version. When I load the .JS code, and put the id #figcaption the figure didn't appear. I do not know why it isn't workin'...
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<style>
figure img {
display: block;
width:100%;
height: auto;
}
.owl-wrapper-outer{
display : none;
}
</style>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr('src', currentImg.attr('src'))
.attr('alt', currentImg.attr('alt'))
.attr('title', currentImg.attr('title'));
$('#figcaption').text(currentImg.attr('title'));
}
});
</script>
Thanks for your help !
You can use translated.owl.carousel event for that
Here is a working Fiddle
owl.on('translated.owl.carousel', function(event) {
var comment = $(this).find('.active').find('img').attr('alt');
var title = $(this).find('.active').find('img').attr('title');
if(comment) $('.image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');
});
UPDATE:
Slightly improved code and added functionality to update image caption
on carousel load.
FIDDLE
I'm using own carousel, so to add caption I followed this question on stack overflow but it didn't work for me. Then I checked using inspect element and found that their is no 'active' class on my carousel current image. So I added script to do so. In the end my script look like this
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
afterAction: function(el) {
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems
.eq(this.currentItem)
.addClass('active')
},
onInitialized: function() {
var activeImg = $('.owl-carousel').find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
}
});
owl = $('.owl-carousel').owlCarousel();
$('.prev').click(function() {
owl.trigger('prev.owl.carousel');
});
$('.next').click(function() {
owl.trigger('next.owl.carousel');
});
owl.on('translated.owl.carousel', function(event) {
var activeImg = $(this).find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
});
});
The script is not working properly.
In this solution i am using HTML figcaption element that represents a caption or a legend associated with a HTML figure.
Also i have added all the needed logic at OWL Carousel afterMove after move callback:
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
singleItem: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr({
'src': currentImg.attr('src'),
'alt': currentImg.attr('alt'),
'title': currentImg.attr('title')
});
$('#figcaption').text(currentImg.attr('title'));
}
});
.owl-carousel .owl-item img {
display: block;
width:80%;
height:100px;
}
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="50" height="30">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
#YosvelQuintero posted the script but don't know why he deleted it. So I am posting it again in case if anybody need it.
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<style>
figure img {
display: block;
width:100%;
height: auto;
}
.owl-wrapper-outer{
display : none;
}
</style>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr('src', currentImg.attr('src'))
.attr('alt', currentImg.attr('alt'))
.attr('title', currentImg.attr('title'));
$('#figcaption').text(currentImg.attr('title'));
}
});
</script>
I want to set attribute of every a tag as img tag's src.
Here is what I did.
$(document).ready(function() {
var href=$('.single img').attr('src');
$('.single').attr('href',href);
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single" >
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
But every a tag has same href.
How can I fix this
You can use attr() with callback, which iterate over the elements and update the attribute by getting children img attribute value
$(document).ready(function() {
$('.single').attr('href', function() { // iterate over a tag
return $(this)
.find('img') // get children img
.attr('src') // get arc attribute
});
$(".single").fancybox({
helpers: {
title: {
type: 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
You should go through all of the images and assign it one by one (That's using your own code).
You can do something like:
$(document).ready(function() {
$(".single img").each(function() {
var href=$(this).attr('src');
$(this).parent().attr('href',href);
})
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
I wrote a simple function that takes content from one div and put it to the other when specified element is clicked. I did it for the image caption in my slider. So, when you click arrow which is an anchor, then content from div 'orbit-caption' assigned to the 'active' slide is put to the other one 'image-caption'.
<ul class="projects-slider" data-orbit>
<li>
<img src="img/projects/1.jpg" alt="slide 1" />
<div class="orbit-caption">
Text 1
</div>
</li>
<li>
<img src="img/projects/2.jpg" alt="slide 2" />
<div class="orbit-caption">
Text 2
</div>
</li>
<li>
<img src="img/projects/3.jpg" alt="slide 3" />
<div class="orbit-caption">
Text 3
</div>
</li>
<li>
<img src="img/projects/4.jpg" alt="slide 4" />
<div class="orbit-caption">
Text 4
</div>
</li>
<li>
<img src="img/projects/5.jpg" alt="slide 5" />
<div class="orbit-caption">
Text 5
</div>
</li>
</ul>
<span></span>
<span></span>
<footer><div class="img-caption"></div></footer>
<script>
$(document).ready(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
$('.orbit-container a').click(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
});
});
</script>
The problem is that click is delayed, I mean that when I click once, my image got description of previous one. Could someone help me with this problem and show how to simplify my function?
Is it what you want ?
http://jsfiddle.net/OxyDesign/5o3aa225/
JS
$(document).ready(function() {
$('.img-caption').text($('li.active .orbit-caption').html());
$('.orbit-next,.orbit-prev').click(function() {
var currentLi = $('li.active'),
newLi = $(this).hasClass('orbit-next') ? currentLi.next() : currentLi.prev();
if(newLi.length){
currentLi.removeClass('active');
newLi.addClass('active');
$('.img-caption').text(newLi.find('.orbit-caption').html());
}
});
});
You also can use the settings of the orbit slider (Orbit Doc) and add your function as a callback (after_slide_change) :
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: false,
animation_speed: 500,
navigation_arrows: true,
timer: false,
bullets: false,
slide_number: false,
slide_number_text: 'of',
swipe: true,
variable_height: 'auto',
after_slide_change : function(){
$('.img-caption').text($('li.active').find('.orbit-caption').html());
}
}
});
Or you can use the event after-slide-change.fndtn.orbit (Orbit Doc)
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('li.active').find('.orbit-caption').html());
});
Or
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('.orbit-caption').eq(orbit.slide_number).html());
});
I am using jCarouselLite on this page
Here is the code
//jcarousel 1.0.1
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:7,start:0,scroll:2,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
jQuery(document).ready(function($) {
$(".slider").jCarouselLite({
btnNext: null,
btnPrev: null,
visible: 7,
scroll: 2,
vertical: false,
circular: true,
itemFallbackDimension: 150,
start: 0,
auto: 4000,
speed: 1000
});
});
On that way it's working some times with showing 7 images and sometimes it's showing only 5 images and sometimes no images and stopped working.
Please help me to fix it.
Thanks
can you post your html, please?
normally you can slide with the jcarousel just by preparing the html on the right way
like this:
<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
<div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
<img src="pic/slide1.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
<img src="pic/slide2.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
<img src="pic/slide3.jpg" alt="slide" />
</li>
</ul> </div>
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
<a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
<a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
</div>
</div>
<!-- END #pictureslide -->
in Javascript you only have to write this (the id is at the ul):
$('#mycarousel').jcarousel({
"wrap": 'circular',
"scroll": 2
....
});