We Keep Coding

Problem showing the main slider on user click in a splidejs carousel

I just made a carousel using splide and I just made it in the way I want. There is only one detail left and it doesn't work. I don't want to show the main slider at the beginning and begin to show it only when the user click on any thumbnail. I implemented it this way:
#main-slider{
display:none;
}
and then
thumbnails.on('click', function(){
document.getElementById('main-slider').style.display = "block";
})
But the main slider only get partially visible. That is, only pagination and arrows will display. No way to show everything, especially the image.
Here's the entire code:
{% load static %}
{% comment %} If you want to fully customize the slider appearance, pick the splide-core.min.css file that does not include arrows, pagination and progress bar styles, which reduces unnecessary "override" works. {% endcomment %}
<link href="{% static 'js/splide-3.2.1/dist/css/splide.min.css' %}" rel="stylesheet">
<style>
.splide__slide {
/* opacity of the thumbnails */
opacity: .6;
}
.splide__slide.is-active {
/* opacity of the selected thumbnail */
opacity: 1;
}
#main-slider{
display:none;
}
</style>
<div class="splide">
<div id="main-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
{% for image in images %}
<li class="splide__slide">
<img src="{{ image.image.url }}" />
</li>
{% endfor %}
</ul>
</div>
</div>
<div id="thumbnail-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
{% for image in images %}
<li class="splide__slide">
{% comment %} data-splide-lazy must be enabled for lazy load {% endcomment %}
<img src="{{ image.image.url }}" data-splide-lazy="{{ image.image.url }}">
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
var main = new Splide( '#main-slider', {
type : 'slide',
heightRatio: 0.5,
speed :500,
pagination : true,
arrows : true,
cover : true,
} );
var thumbnails = new Splide( '#thumbnail-slider', {
fixedWidth : 100,
fixedHeight : 60,
gap : 10,
perMove : 1,
perPage : 1,
rewind : true,
pagination : false,
cover : true,
isNavigation: true,
lazyLoad : false,
keyboard : true,
wheel : true,
focus : 'center',
dragMinThreshold: {
mouse: 4,
touch: 10,
},
breakpoints : {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} );
main.sync( thumbnails );
main.mount();
thumbnails.mount();
thumbnails.on('click', function(){
document.getElementById('main-slider').style.display = "block";
})
} );
</script>
<script src="{% static 'js/splide-3.2.1/dist/js/splide.min.js' %}"></script>

owl carousel slide n by n

Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible?
$('.owl-carousel').owlCarousel({
loop:true,
items:5,
margin:10,
nav:true
})
Demo
i googled and checked plugin website but couldn't find anything.

Use the slideBy options in the owlCarousel config:
$('.owl-carousel').owlCarousel({
loop:true,
items: 5,
margin:10,
slideBy: 5, // slide 5 items
nav:true
})
.item {
background: red;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>

You should include slideBy: 5 or slideBy: 'page' option, as they describe it on their documentation.
https://jsfiddle.net/w3ka3vqw/151/

Isotope and lightbox, how to only show the visible (filtered) images in lightbox

I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy)
I have configured Isotope already, so that images are layed out and filterable, this is all working fine.
Currently, when i open an image in the lightbox, it loads all the images in the series, including images which are currently hidden (filtered by Isotope).
I want to change my solution so that only the visible images will be loaded into the Lightbox. This way a user can use isotope to filter down to the desired set of images, and can then view these in a larger format using the lightbox.
the code below is what is outputted by wordpress (from view page source).
I have tried the solution in this post but i wasn't able to adapt to my code.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="*">Afficher tout</button>
<button class="button" data-filter=".faune">faune</button><button class="button" data-filter=".flore">flore</button><button class="button" data-filter=".paysage">paysage</button>
</div>
<div id="isotopegallery" class="grid">
<div class="element-item flore" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat.jpg" data-lightbox="image-1" data-title="Portfolio elt 8 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat-150x150.jpg" alt="">
</a>
</div>
<div class="element-item faune" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier.jpg" data-lightbox="image-1" data-title="Portfolio elt 7 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier-150x150.jpg" alt="">
</a>
</div>
<div class="element-item flore" >
<a href="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-1024x789.jpg" data-lightbox="image-1" data-title="Portfolio elt 6 ">
<img src="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-150x150.jpg" alt="">
</a>
</div>
<div class="element-item faune" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere.jpg" data-lightbox="image-1" data-title="Portfolio elt 5 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere-150x150.jpg" alt="">
</a>
</div>
<div class="element-item flore" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1.jpg" data-lightbox="image-1" data-title="Portfolio elt 4 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1-150x150.jpg" alt="">
</a>
</div>
<div class="element-item paysage" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie.jpg" data-lightbox="image-1" data-title="Portfolio elt 3 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie-150x150.jpg" alt="">
</a>
</div>
</div>
</p>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- framework gallery isotope -->
<script src="https://npmcdn.com/isotope-layout#3.0/dist/isotope.pkgd.min.js"></script>
<!-- framework gallery lightbox -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"></script>
<!-- framework gallery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script>
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
</script>
Thanks for your help

Using magnificPopup I add/remove classes used by magnificPopup (see delegate option) in isotope's arrangeComplete event.
Isotope element with image, the class=mag is used by magnificPopup
<div class="element-item">
<a href="gallery-image" class="mag">
<img src="gallery-thumb" />
</a>
</div>
magnificPopup using a delegate
$grid.magnificPopup({
type: 'image',
delegate: 'a.mag',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
opener: function (e) {
return e.find("img");
}
}
});
Add/remove magnificPopup delegate classes
$grid.on('arrangeComplete', function(event, filteredItems) {
$(".element-item:hidden a").removeClass("mag");
$(".element-item:visible a").addClass("mag");
});

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images.
For example:
Image #2
Image #3
Image #4
http://lokeshdhakar.com/projects/lightbox2/#getting-started

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/

owl carousel scroll to clicked item

I have a simple owl-carousel,
HTML:
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
JavaScript:
$('.owl-carousel').owlCarousel({
items: 5,
loop:true,
nav:true,
margin: 10
})
Included:
owl.carousel.js
owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
How to force the carousel scroll to the clicked item?

<html>
<head>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
.owl-carousel .item {
height: 80px;
background: #4DC7A0;
}
</style>
</head>
<body>
<div id="owl-demo">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(document).on('click', '.owl-item', function(){
n = $(this).index();
console.log(n)
$('.owl-wrapper').trigger('owl.goTo', n);
});
});
</script>
</body>
</html>
There are was few trouble with version, and thats why i send you full html page - try it to yourself!

You can try next code:
var sync2 = jQuery('.sync2').owlCarousel({
loop:true,
margin:0,
nav:false,
dots:false,
responsive:{
0:{
items:4
}
},
center: false,
navText: ["",""],
linked: ".sync1"
});
sync2.on('click', '.owl-item', function(event) {
var target = jQuery(this).index();;
sync2.owlCarousel('current',target);
});

Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$('button').trigger('to.owl.carousel', 1);

None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :
//Select by id if one is set or via '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}
Please note : My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**
//Scroll to last selected carousel
$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');
//scroll to last clicked item
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}