How to apply animation to an element when displayed? - javascript

I'm using a div to contain 3 sets of images. I have a back and a next button with which the user can navigate between the images.
My HTML:
<div class="imgs">
<button>Back</button>
<div class="conatiner">
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
</div>
<button>Next</button>
</div>
My CSS:
.imgs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
display: none;
}
.container > .displayed{
display: grid;
grid-auto-columns: 1fr 1fr 1fr;
}
.container > .displayed > img{
width: 40px;
height: 40px;
border: 2px solid red;
}
The way how it works is that I have some JavaScript which ads the .displayed class to the displayed set of images. I want to achieve that when the class change happens one of the divs fades out and the other fades in so it will be more smooth. Is there a way to do this with CSS animations? Or how should I achieve this result?


You should try using animation with #keyframes since that, will make an animation every time a element goes from hidden to displayed, as you as want.
Try something around this:
const images = document.querySelector(".container > .img-holder-1 ");
document.querySelector("#back").addEventListener('click', function() { images.classList.toggle('displayed'); });
.imgs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
display: none;
}
.container > .displayed{
display: grid;
grid-auto-columns: 1fr 1fr 1fr;
opacity:0;
animation:fade-in 1s forwards;
}
.container > .displayed > img{
width: 40px;
height: 40px;
border: 2px solid red;
}
#keyframes fade-in{
from{
opacity: 0;
}
to{
opacity:1;
}
}
<div class="imgs">
<button id="back">Toggle Class</button>
<div class="container">
<div class="img-holder-1 displayed">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
<div class="img-holder-1">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
<div class="img-holder-1">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
</div>
</div>
Click on "Toggle Class" to see the fade-in effect.

Related

Flexbox flex-flow alternative for earlier versions of browsers

<template>
<div>
<h2>Kanal Listesi</h2>
<div class="container">
<div v-for="(channel,index) in channels" :key="index">
<div v-if="channel.ChName">
<img
:src="'http://uyanik.tv/conf/images/'+channel.Image"
:class="{selectedIndex:currentIndex === index}"
:ref="index"
/>
</div>
</div>
</div>
</div>
</template>
.container {
display: flex;
flex-flow: row wrap;
/*min-width:1200px;
overflow-x:auto; */
justify-content: center;
}
.container::after {
content: "";
flex: 0 1 32.7%;
}
div > div > div > div > img{
margin: 10px 10px 10px 10px;
height: 100px;
}
div{
text-align: center;
}
My VueJs app has a container which utilizes from flexbox to shift unfitting boxes to the next rows. The issue is that the app will be used in TVs which uses earlier versions of browsers . Thus, I am not able to use flex-flow property as old versions partially supports flexbox. Right now, items overflows to the outer screen. I must display the items like in the output below:
But I get this output in the device :

You can use float or inline-block to get this desired layout, see below example:
div {
width:100%;
padding:0 15px;
}
div img {
float:left;
margin:10px;
}
<div>
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
JSFiddle

Image is stretched when place into carousal

I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>

You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>

You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}

Making multiple image carousels in same page independent

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>

jQuery custom plugin changes applied to all instances

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

Owl-carousel need scroll effect on navigation hover

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

Categories