We Keep Coding

Owl-carousel need scroll effect on navigation hover - javascript

This is the code for my owl-carousel.
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: false,
lazyLoad: true
});
});
I need to scroll the carousel slowly, when I hover on the "prev" or "next' buttons.
Is anyone know how to do this?
FIDDLE

Add this JS
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
Your complete JS should look like this
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: false,
lazyLoad: true,
});
$(".owl-inner").hover(function() {
$(".owl-prev").show();
$(".owl-next").show();
}, function() {
$(".owl-prev").hide();
$(".owl-next").hide();
});
$(".owl-prev").hide();
$(".owl-next").hide();
});
#owl-demo .owl-item > div img {
display: block;
width: 100%;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom:4px;
margin:0px 50px;
}
#owl-demo .owl-item > div {
padding: 0px 2px
}
.owl-theme .owl-controls .owl-buttons div {
position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: 0px;
top: 55px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>
<div id="owl-demo" class="owl-carousel">
<div class="owl-inner">
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
</div>
Reference

Related

good day.... is there a way to change the background image of div while using Slick.Js ? say for example, if i press one of the image thumbnail, the background of div would change. so far my code is not reliable when it comes for example different image sizes
im not sure how to change the background image of div if i press each images in the slick carousel
$(document).ready(function() {
$('.slider-for').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
fade: true,
asNavFor: '.thumbnails'
});
$('.thumbnails').slick({
slidesToShow: 9,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 2000
});
});
* {
margin: 0 auto;
padding: 0
}
body {
font-family: "Open Sans", sans-serif;
color: black;
}
.slid {
width: 100%;
}
.thumbnail-img {
cursor: pointer;
}
.slider-for {
position: relative;
width: 100%;
}
.thumbnails {
margin-top: -300px;
}
.cc {
position: relative;
}
.slider-for {
position: absolute;
}
.some {
z-index: 9999;
position: absolute;
}
/** HEADER **/
.banner-img {
background-size: fill;
width: 100%;
}
.header {
display: block;
width: 80%;
height: 1020px;
margin: auto;
color: white;
}
.container {
width: 1440px;
}
.navbar {
padding-top: 20px;
}
.navbar a {
color: black;
text-decoration: none;
}
.logo {
float: left !important;
}
.navlink {
float: right;
}
.navlink li {
float: left;
margin-left: 100px;
list-style: none;
}
.hero-text {
margin-top: 100px;
float: left !important;
}
.hero-text h1 {
font-size: 75px;
font-weight: 900;
}
.hero-text h2 {
font-size: 40px;
font-weight: 300;
}
.hero-text p {
margin-top: 100px;
font-size: 22px;
font-weight: 300;
}
<!-- slick slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<div class="slid">
<div class="slider3">
<div class="cc">
<div class="some">
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<h3>B2B DESIGN</h3>
</div>
<div class="navlink">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="container hero-text">
<h1>Unlimited Lorem for <br>unlimited ipsume</h1>
<h2>& Fusce feugiat congue ipsum</h2>
<p>Ut vel orci sem. Morbi quis diam ac ligula ultricies <br>Ut eget massa ornare, porta elit quis, porttitor leo. Nulla facilisi. </p>
</div>
</div>
<!-- container -->
</div>
<!-- end header -->
</div>
<!-- some-->
<div class="slider-for">
<div>
<img class="banner-img" src="https://pbs.twimg.com/media/En-d0nPWMAIXYQk.jpg:large" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://sepidehirvani.com/wp-content/uploads/2017/04/green-nature-dual-monitor-other-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://tz-mag-media.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2018/02/26144641/image101.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://i.pinimg.com/originals/91/24/0f/91240f62852bedc0f49d344389ae7097.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropBalade_en_pirogue_canoe-rambling_Iharana-Bush-Camp-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2017/01/1_K30D454AF2827C_44-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://bokun.s3.amazonaws.com/d397bd70-f43c-4b8f-a04a-feff5ab3ddf9.jpeg?w=247&h=200&fit=crop" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://i1.wp.com/www.climatechangetheatreaction.com/wp-content/uploads/2019/10/b40a592b47cea301d5e70906d4a86562-e1570158663199.jpg?resize=2000%2C1024" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2017/02/cropBat-Forest_BBC-Hide_Aerial.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropMasoala_Wildlife_HR11-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://s3.eu-west-2.amazonaws.com/tourhound/tours/3726999a-490b-476b-9722-e56a839613f6/crop2016-GP-ODL-ALH-220-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://wineandcountrylife.com/wp-content/uploads/2019/08/PoolhouseINT_wide-5239_originalLead.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy">
</div>
</div>
<!-- slider-for -->
</div>
<div class="thumbnails">
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://pbs.twimg.com/media/En-d0nPWMAIXYQk.jpg:large" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://sepidehirvani.com/wp-content/uploads/2017/04/green-nature-dual-monitor-other-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://i.pinimg.com/originals/91/24/0f/91240f62852bedc0f49d344389ae7097.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropBalade_en_pirogue_canoe-rambling_Iharana-Bush-Camp-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2017/01/1_K30D454AF2827C_44-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://bokun.s3.amazonaws.com/d397bd70-f43c-4b8f-a04a-feff5ab3ddf9.jpeg?w=247&h=200&fit=crop" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://i1.wp.com/www.climatechangetheatreaction.com/wp-content/uploads/2019/10/b40a592b47cea301d5e70906d4a86562-e1570158663199.jpg?resize=2000%2C1024" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2017/02/cropBat-Forest_BBC-Hide_Aerial.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropMasoala_Wildlife_HR11-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://s3.eu-west-2.amazonaws.com/tourhound/tours/3726999a-490b-476b-9722-e56a839613f6/crop2016-GP-ODL-ALH-220-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://wineandcountrylife.com/wp-content/uploads/2019/08/PoolhouseINT_wide-5239_originalLead.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy" width="210" height="224">
</div>
</div>
<!-- thumbnails -->
</div>
<!-- slider 3-->
</div>
<!--slid-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

In a way, it's already working, though it's an image tag and not a background.
The problem is because the header (cf. .some) is in front of your carrousel. You end up not being able to click on the elements, so if you remove the z-index rule from:
.some {
/* z-index: 9999; */
position: absolute;
}
It'll work as expected.
However, you'll have to remake your HTML structure to get both your texts and the functionality. Or at least change some CSS rules, but it can end to get pretty hacky.

I found these carousels (after trying half a dozen similar carousels which broke down when placed in bootstrap modals) …originally the custom js function was attached to IDs and I changed that to class names to get the other carousels to show up.
The problem now is that the carousels are not independent, clicking on thumbnails changes the main image across all carousels; furthermore, the .synced class which differentiates the active thumbnail works only for the first carousel.
Is there a way to make them independent without adding IDs to the JS? I'm adding the content with PHP; I think I can only add IDs to the HTML (the modals already pull a unique ID for each gallery from the posts)
var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");
$(document).ready(function() {
primary.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination : false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
navigation : true,
navigationText : ["",""]
});
secondary.owlCarousel({
items : 7,
itemsDesktop : [1200,8],
itemsDesktopSmall : [992,7],
itemsTablet : [768,6],
itemsMobile : [480,4],
pagination : false,
responsiveRefreshRate : 100,
navigation : true,
navigationText : ["",""],
afterInit : function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if (secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
primary.trigger("owl.goTo",number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found===false) {
if (num>sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", num - sync2visible.length+2);
} else{
if (num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
secondary.trigger("owl.goTo", num-1);
}
}
});
$( ".collapse-button" ).click(function() {
var thumbnailsWrapper = $('.thumbnails-wrapper');
if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
thumbnailsWrapper.find('.icon').addClass('-flip');
}
else {
thumbnailsWrapper.animate({bottom: '0'});
thumbnailsWrapper.find('.icon').removeClass('-flip');
}
});
body {
margin: 12px;
}
.component {
position: relative;
overflow: hidden;
width: 300px;
max-height: 300px;
background: tomato;
margin: 0 auto 12px;
}
.main-carousel .owl-prev {
left: 10px;
}
.main-carousel .owl-prev:after {
border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
right: 10px;
}
.main-carousel .owl-next:after {
border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
content: '';
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main-carousel .item {
height: 200px;
}
.thumbnails-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.thumbnails-wrapper .item {
margin: 5px;
cursor: pointer;
height: 36px;
}
.thumbnails-wrapper .item .image {
border: 2px solid #fff;
max-height: 36px;
}
.thumbnails-wrapper .synced .image {
border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
position: absolute;
height: 11px;
width: 1px;
bottom: 50%;
transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
content: '';
display: inline-block;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
right: -5px;
}
.thumbnails-wrapper .owl-next:after {
border-left: 9px solid #fff;
}
.item {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
height: auto;
display: block;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

set secondary and primary variables when thumbnails and arrows clicked,
var secondary= $(el).siblings('.thumbnails-wrapper');
var primary= $(this).parents('.component').find('.owl-carousel');
var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");
$(document).ready(function() {
primary.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination : false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
navigation : true,
navigationText : ["",""]
});
secondary.owlCarousel({
items : 7,
itemsDesktop : [1200,8],
itemsDesktopSmall : [992,7],
itemsTablet : [768,6],
itemsMobile : [480,4],
pagination : false,
responsiveRefreshRate : 100,
navigation : true,
navigationText : ["",""],
afterInit : function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
var secondary= $(el).siblings('.thumbnails-wrapper');
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if (secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
var primary= $(this).parents('.component').find('.owl-carousel');
primary.trigger("owl.goTo",number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found===false) {
if (num>sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", num - sync2visible.length+2);
} else{
if (num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
secondary.trigger("owl.goTo", num-1);
}
}
});
$( ".collapse-button" ).click(function() {
var thumbnailsWrapper = $('.thumbnails-wrapper');
if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
thumbnailsWrapper.find('.icon').addClass('-flip');
}
else {
thumbnailsWrapper.animate({bottom: '0'});
thumbnailsWrapper.find('.icon').removeClass('-flip');
}
});
body {
margin: 12px;
}
.component {
position: relative;
overflow: hidden;
width: 300px;
max-height: 300px;
background: tomato;
margin: 0 auto 12px;
}
.main-carousel .owl-prev {
left: 10px;
}
.main-carousel .owl-prev:after {
border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
right: 10px;
}
.main-carousel .owl-next:after {
border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
content: '';
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main-carousel .item {
height: 200px;
}
.thumbnails-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.thumbnails-wrapper .item {
margin: 5px;
cursor: pointer;
height: 36px;
}
.thumbnails-wrapper .item .image {
border: 2px solid #fff;
max-height: 36px;
}
.thumbnails-wrapper .synced .image {
border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
position: absolute;
height: 11px;
width: 1px;
bottom: 50%;
transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
content: '';
display: inline-block;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
right: -5px;
}
.thumbnails-wrapper .owl-next:after {
border-left: 9px solid #fff;
}
.item {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
height: auto;
display: block;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

I am trying to get a thumbnail with filter to work on my site. I have been using this one at codepen as inspiration. It is working without any problem at codepen but as soon I insert the code into my wordpress site (using divi. theme) the filtering is not working at all.
In the code below I have changed the style from #port to #portiz and .btn to .butn. I made this changes because I noticed it override the existing styling and I also wanted to test out if this was the problem. I have also made the same changes in the JS and the HTML.
I cant figure out where or what to change, or add.
Best,
Ray
<script>
$(function() {
var selectedClass = "";
$(".fil-cat").click(function(){
selectedClass = $(this).attr("data-rel");
$("#portiz").fadeTo(100, 0.1);
$("#portiz div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#portiz").fadeTo(300, 1);
}, 300);
});
});
</script>
#portiz{
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {
}
.scale-anm {
transform: scale(1);
}
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.butn {
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border: 1px solid;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
background-color: rgba(0, 0, 0, 0);
}
.butn:hover {
text-decoration: none;
}
.butn:focus {
outline: none;
border-color: var(--darken-2);
box-shadow: 0 0 0 3px var(--darken-3);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
<div class="toolbar mb2 mt2">
<button class="butn fil-cat" href="" data-rel="all">All</button>
<button class="butn fil-cat" data-rel="web">Websites</button>
<button class="butn fil-cat" data-rel="flyers">Flyers</button>
<button class="butn fil-cat" data-rel="bcards">Business Cards</button>
</div>
<div style="clear:both;"></div>
<div id="portiz">
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
</div>
<div style="clear:both;"></div>

Your JS is kinda messy, but it works. You just have a couple of mistakes in your SO snippet:
You shoudn't include <script></script> tags in the JS editor
You forgot to include jQuery, so in your example $ is not defined.
Besides that, it works:
$(function() {
var selectedClass = "";
$(".fil-cat").click(function(){
selectedClass = $(this).attr("data-rel");
$("#portiz").fadeTo(100, 0.1);
$("#portiz div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#portiz").fadeTo(300, 1);
}, 300);
});
});
#portiz{
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {
}
.scale-anm {
transform: scale(1);
}
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.butn {
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border: 1px solid;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
background-color: rgba(0, 0, 0, 0);
}
.butn:hover {
text-decoration: none;
}
.butn:focus {
outline: none;
border-color: var(--darken-2);
box-shadow: 0 0 0 3px var(--darken-3);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar mb2 mt2">
<button class="butn fil-cat" href="" data-rel="all">All</button>
<button class="butn fil-cat" data-rel="web">Websites</button>
<button class="butn fil-cat" data-rel="flyers">Flyers</button>
<button class="butn fil-cat" data-rel="bcards">Business Cards</button>
</div>
<div style="clear:both;"></div>
<div id="portiz">
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
</div>
<div style="clear:both;"></div>

I have created this JavaScript function it works if I use it for 1 gallery but if I use it for 2 it changes the gallery in the first one, I know I'm close but can't quite seam to figure out this last bit, do I need to use .each function?
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
$('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
$('.big-photo img').attr('src', path);
});
return this
}
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>

You can make use of the container class. As the main container have a class, inside the event handler, get this element and use this to get the other elements associated(are children of this container) with this instance.
So, instead of global selectors
$('.big-photo img').attr('src', path);
which will select all the matching elements on the page, use descendant selector with find().
container.find('.big-photo img').attr('src', path)
Code:
$('.photo-thumbnails .thumbnail').click(function () {
// Get the main container of the gallery
var container = $(this).closest('.gallery-photos');
// Use that container to get elements inside it
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', path);
});
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
var container = $(this).closest('.gallery-photos');
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
container.find('.big-photo img').attr('src', path);
});
return this;
};
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
Suggestion:
$('.photo-thumbnails .thumbnail').click(function () {
// Cache this instance
var $this = $(this);
// Get the main container of the gallery
var container = $this.closest('.gallery-photos');
// Select only the thumbnail elements having current class
container.find('.photo-thumbnails .thumbnail.current').removeClass('current');
$this.addClass('current');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', $this.find('img').attr('src'));
});

The below code is a slider that manipulates between two dividers, previous and next. Each divider represents a set of ten images, as you can see in two parallel vertical lines. I'm trying to make each divider 2 parallel horizontal lines (5 images on each line), However it's getting messed up and the 2 dividers are getting connected. Any help please?
HTML:
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JQUERY:
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
src="js/jquery.scrollTo.js"
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
JSFIDDLE: http://jsfiddle.net/2ghovmww/

As I see it you can achieve what you want with display:inline for each horizontal block, but as you have implemented it, the width of your container is smaller than the width of five elements in a row, so they can't be displayed. If you use overflow:hidden you will have two rows but the elements that exceed the width of the container will be hidden. So first you must adjust the width of the container and its parent elements.