We Keep Coding

How to add captions for images in owl carousel 2-2.3.4?

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

Left align images with fewer images than 'slidesToShow'

In the code below there are two .wrapper divs, creating two carousels with slick.js. In the upper carousel there are two images, in the second carousel four images. In the initialisation of slick slidesToShow is set to 4.
The two images on the first carousel are centered horizontally, but I need them to be left aligned. How to left-align the carousel images? Images should be the same size for both carousels.
Code html head:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
CSS:
.wrapper div {
padding: 10px;
}
.wrapper img {
width: 100%;
height: auto;
}
JS:
$(document).ready(function(){
$('.wrapper').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 650,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
]
});
});
HTML body:
<div class="wrapper">
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
</div>
<div class="wrapper">
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
</div>
<script type="text/javascript" src="slick/slick.min.js"></script>
I tried the following, which works, but I prefer not to change slick.js generated code for maintenance reasons:
.slick-track {
margin-left: 0;
margin-right: 0;
}
Is there a more appropriate way to left align the images?

Slick documentation does not have an option to align left yet. So overriding css class is one way to go.
If you only want the first carousel to be left aligned, add following segment to one of custom override css files (any css file loads after slick.css)
.left-align-slick > .slick-list > .slick-track {
margin-left:0;
}
Add left-align-slick class to the container div of the carousel you want to be left aligned.
<div class="wrapper left-align-slick">
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
<p>title</p>
</div>
</div>

I faced the same problem. I just fill the space with empty slider containers.
<?php $count = 0; ?>
<?php foreach ($items as $_item): ?>
...
<?php endforeach ?>
<?= fillEmptySpace($count, $slideMinItems); ?>
function fillEmptySpace($count, $slideMinItems)
{
$emptySliderHtml = "<div class='product-item'></div>";
$output = "";
if ($count < $slideMinItems) {
$difference = $slideMinItems - $count;
for ($i = 0; $i < $difference; $i++) {
$output .= $emptySliderHtml;
}
}
return $output;
}

Jquery set attribute to every element

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'
}
}
});
})

Thumbnail slider not working

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/

Content from one div to the other on click - delay

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());
});