Left align images with fewer images than 'slidesToShow' - javascript

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

Related

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

Javascript doesn't toggle the display of an element

So, I'm trying to obtain multiple slideshows on my website.
I have done almost everything, excepting the fact that when I press a picture, the modal of previews is showing, but the clicked image is not showing up. I have to use the buttons of the slideshow to go through them and make the first one to appear.
**
If you don't want to go along this whole code, here you can see what's happening: http://beta.eduardstefan.com
**
I am not trying to promote myself, I just think that I am not quite easy to understand without the example
So, my question, how can I make the first picture to show up when I press one, or why it's not happening, what is bad with my code?
My html:
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(0,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3" data-no="0"> </div>
<a class="next" onclick="slide(0,1)">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(2,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_2" id="0" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_2" id="1" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_2" id="2" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_2" id="3" data-no="2"> </div>
<a class="next" onclick="slide(2,1)">❯</a>
</div>
<div class="imgpreview">
<i class="fa fa-close" onclick="closepreview()"></i>
<div class="slidepreview no_0">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
<div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
<div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
<div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
<a class="next" onclick="slide(1,1)">❯</a>
</div>
<div class="slidepreview no_2">
<a class="prev" onclick="slide(3,-1)">❮</a>
<div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_3" id="0"> </div>
<div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_3" id="1"> </div>
<div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_3" id="2"> </div>
<div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_3" id="3"> </div>
<a class="next" onclick="slide(3,1)">❯</a>
</div>
</div>
SCSS:
.portfolio-slideshow{
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.slide{
padding:0 35px;
display: block;
img{
display: none;
max-height:40vh;
max-width:100%;
}
}
.prev,.next{
display: flex;
align-items: center;
justify-content: center;
}
.imgpreview{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
padding: 50px;
}
.slidepreview{
display: none;
align-items: center;
justify-content: center;
.slidep{
display: block;
img{
display: none;
max-height: 85vh;
max-width: 85vw;
}
}
And Javascript:
var slideIndex = [0,0,0,0,0,0,0,0]
function showSlides(){
var aux = slideIndex.length;
var i;
for(i=0; i<aux; i+=2) { slide(i,0); }
}
function slide(n,m){
var i;
var aux = document.getElementsByClassName("slideimg_" + n);
var aux2 = aux.length - 1;
if (slideIndex[n] == 3 && m == 1) slideIndex[n] = -1;
if (slideIndex[n] == 0 && m == -1) slideIndex[n] = 4;
slideIndex[n] += m;
if (slideIndex[n] < 0) slideIndex = aux2;
else if (slideIndex[n] > aux2) slideIndex = 0;
for(i=0; i<aux.length; i++){
aux[i].style.display = "none";
aux[i].parentElement.style.display = 'none';
}
aux[slideIndex[n]].style.display = "block";
aux[slideIndex[n]].parentElement.style.display = 'block';
}
function closepreview(){
$('.imgpreview').css("display" , "none");
$('.slidepreview').css("display" , "none")
}
$(document).ready(function() {
$(".slide img").click(function(){
var id = $(this).attr('id');
var no = $(this).attr('data-no');
var no2 = no + 1;
$(".imgpreview").css("display" , "flex");
$(".no_" + no).css("display" , "flex");
$("img#" + id + ".slideimg_" + no2).css("display" , "block");
slideIndex[no2] = id;
});
}).resize();
The IDs must be unique.
Instead of inline event handlers I would suggest to attach them to the js code (separate html from js code).
I removed all IDs and I changed everything in jQuery using:
.index()
.toggle( display )
.nextAll(), .next(), .prev() and .prevAll()
I used a class: active. This class is used to mark the current active element. Moreover, every time I need to move next or prev I move this class to the corresponding element. This class takes track of which img must be shown.
The snippet:
$(document).ready(function() {
//
// Toggle visibility
//
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
$('.slide.active, .slide.active img').toggle(true);
//
// closing preview....
//
$('.imgpreview .fa.fa-close').on('click', function(e) {
$('.imgpreview, .slidepreview').css("display" , "none");
//
// ...remove active class and toggle visibility
//
$('.imgpreview, .slidepreview').find('.active, .active img').toggleClass(false).removeClass('active');
});
//
// on prev....
//
$(".prev").on('click', function(e) {
//
// get the active element and so the previous one
//
var active = $(this).nextAll('.slide.active');
var prev = active.prev('.slide');
if (prev.length == 0) {
//
// if at the beginning take the last one
//
prev = $(this).nextAll('.slide').last();
}
//
// move active class and toggle visibility
//
active.removeClass('active');
prev.addClass('active').find('img').andSelf().toggle(true);
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
});
$(".next").on('click', function(e) {
//
// get the active element and so the next one
//
var active = $(this).prevAll('.slide.active');
var next = active.next('.slide');
if (next.length == 0) {
//
// if at the end take the first one
//
next = $(this).prevAll('.slide').last();
}
//
// move active class and toggle visibility
//
active.removeClass('active');
next.addClass('active').find('img').andSelf().toggle(true);
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
});
$(".slide img").on('click', function(e) {
//
// take the index of curr element in the parent element
//
var idx = $(this).closest('div.slide').index();
var no = $(this).data('no');
$('.imgpreview, .no_' + no).css('display' , 'flex');
$('.no_' + no).children().eq(idx).addClass('active');
$('.no_' + no).find('.slide:not(.active), .slide:not(.active) img').toggle(false);
$('.no_' + no).find('.slide.active, .slide.active img').toggle(true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/style.css">
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/font-awesome.css">
<div class="portfolio-slideshow">
<a class="prev">❮</a>
<div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_0" data-no="0"></div>
<a class="next">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev">❮</a>
<div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_2" data-no="2"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_2" data-no="2"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_2" data-no="2"> </div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_2" data-no="2"></div>
<a class="next">❯</a>
</div>
<div class="imgpreview">
<i class="fa fa-close"></i>
<div class="slidepreview no_0">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_1"></div>
<a class="next">❯</a>
</div>
<div class="slidepreview no_2">
<a class="prev">❮</a>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_3"></div>
<a class="next">❯</a>
</div>
</div>
At least one problem is here:
var no = $(this).attr('data-no');
var no2 = no + 1;
no is a string so if no is "0", then no + 1 is "01", so instead you can do this:
var no = $(this).attr('data-no');
var no2 = Number(no) + 1;
https://codepen.io/anon/pen/MmwdZb?editors=1111
Beyond that, why re-invent the wheel? There are plenty of good slideshow plugins available.

How to add captions for images in owl carousel

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>

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/

jQuery How to apply custom loading for images?

I have this HTML:
<div class="page-loading-wrapper">
<div style="width: 168px" class="slide-content">
<div class="loading-panel" style="background-color: #dddddd; height: 120px; position: relative">
<div class="loading-text"><span class="loading-number">0</span>%</div>
<div class="loading-load">LOADING</div>
</div>
<img src="images/shkeer-loading.png" width="168" height="91" alt="" />
</div>
<div class="loading-bottom-line"></div>
</div>
<div id="maximage">
<div>
<img src="images/bg/bg.jpg" width="1580" height="889" alt="" />
</div>
<div>
<img src="images/bg/bg2.jpg" width="1352" height="748" alt="" />
</div>
<div>
<img src="images/bg/bg3.jpg" width="1285" height="803" alt="" />
</div>
<div>
<img src="images/bg/bg4.jpg" width="1290" height="807" alt="" />
</div>
<div>
<img src="images/bg/bg5.jpg" width="1295" height="921" alt="" />
</div>
<div>
<img src="images/bg/bg6.jpg" width="1280" height="750" alt="" />
</div>
<div>
<img src="images/bg/bg7.jpg" width="1280" height="750" alt="" />
</div>
</div>
and this Javascript code:
$('#maximage').maximage({
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
},
cycleOptions: {
fx:'scrollHorz',
autostopCount: 1,
autostop: 1
}
});
and this code for loading:
function changeLoading() {
var height = parseInt($(".loading-panel").height()) + 5;
$(".loading-panel").css("height", height + "px");
if ( height == 325) {
clearInterval(t);
var t2 = setInterval(changeNum, 110);
}
}
function changeNum() {
var n = parseInt($(".loading-number").html()) + 1;
$(".loading-number").html(n);
if ( n == 100) {
clearInterval(t2);
}
}
var t = setInterval(changeLoading, 10);
I'm using MaxCycle (Fullscreen Slideshow for use with jQuery Cycle Plugin)
and I'm trying to display loading bar while loading all images because they're very big about 150kb for each image.
Demo
My loading bar is not fully functional as you can see. it just count until MaxCycle is loaded
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
}
So how I can make this loading works 100% specially the percent number, to check each image is loaded or not?
Thank you very much.

Categories