Picture gallery zoom with java script

Picture gallery zoom with java script - javascript

So I have a picture gallery and when you click on the picture it zooms in on the picture the problem is this only works well for the pictures at the top... when you scroll down and click on the pictures at the bottom of the page the zoomed in version pops up at the top so I have to scroll up every time.
How can I make it either display the zoomed in version where the page is (so we don't have to scroll up to view it) or make it so it scrolls to the top when it is clicked to be zoomed in then scrolls back down when you click on the picture which will close the zoom view?
here is the html:
<center>
<div class="gallery">
<div class="img-w">
<img src="gallery/m1.jpg" />
</div>
<div class="img-w">
<img src="gallery/m2.jpg" />
</div>
<div class="img-w">
<img src="gallery/m3.jpg" />
</div>
<div class="img-w">
<img src="gallery/m4.jpg" />
</div>
<div class="img-w">
<img src="gallery/m5.jpg" />
</div>
<div class="img-w">
<img src="gallery/m6.jpg" />
</div>
<div class="img-w">
<img src="gallery/m7.jpg" />
</div>
<div class="img-w">
<img src="gallery/m8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p1.jpg" />
</div>
<div class="img-w">
<img src="gallery/p2.jpg" />
</div>
<div class="img-w">
<img src="gallery/p3.jpg" />
</div>
<div class="img-w">
<img src="gallery/p4.jpg" />
</div>
<div class="img-w">
<img src="gallery/p5.jpg" />
</div>
<div class="img-w">
<img src="gallery/p6.jpg" />
</div>
<div class="img-w">
<img src="gallery/p7.jpg" />
</div>
<div class="img-w">
<img src="gallery/p8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p9.jpg" />
</div>
<div class="img-w">
<img src="gallery/u1.jpg" />
</div>
<div class="img-w">
<img src="gallery/u2.jpg" />
</div>
<div class="img-w">
<img src="gallery/u3.jpg" />
</div>
<div class="img-w">
<img src="gallery/u4.jpg" />
</div>
<div class="img-w">
<img src="gallery/u5.jpg" />
</div>
<div class="img-w">
<img src="gallery/u6.jpg" />
</div>
<div class="img-w">
<img src="gallery/u7.jpg" />
</div>
<div class="img-w">
<img src="gallery/u8.jpg" />
</div>
</div>
<br>
<div class="center">
<p class="bold ">Page 1 | Page 2
</p>
</div>
Here is the css:
/****Gallery****/
.gallery {
width: 100%;
margin-right: 20px;
margin-left: 20px;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 250px;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
margin: 5px 5px;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
and here is the script:
<script>
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
</script>
I know it has to do with the img-c.active.positioned top: 0 !important line.. if I remove it, it does work better however with some pictures I have to scroll down for or they look cut from the top at first when displayed... maybe there's a way to just go full page zoom no matter where on the page I am?sorry a bit of a newb here lol
Thank you!

The requirement is to get the image filling the screen when clicked, and then 'returning' to the same place when clicked again - without the user having to scroll up or down to see it.
If you change the positioning of your selected image div from absolute to fixed but maintain all your other settings it will position at the top of the viewport, covering the underlying gallery and when clicked will reveal the underlying gallery in the same place the user had it - which is probably what they are expecting.
.img-c.active {
width: 100% !important;
height: 100% !important;
position:fixed; /* changed from absolute */
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position:fixed; /* changed from absolute */
z-index: 2;
pointer-events: none;
}
(You can probably get rid of the two !important too since setting width/height 100% will be sufficient.)
Try it in this snippet, selecting full screen and scroll down and click the yellow square as an example. (Colors are used instead of images just for this demo.)
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
/****Gallery****/
.gallery {
width: 100%;
margin-right: 20px;
margin-left: 20px;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 250px;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
margin: 5px 5px;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
position:fixed;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
position:fixed;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
/* bit of styling added just to use background color instead of imgs for demo only */
.img-w {
background-color:cyan;
}
.img-c {
background-color:magenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div class="gallery">
<div class="img-w">
<img src="gallery/m1.jpg" />
</div>
<div class="img-w">
<img src="gallery/m2.jpg" />
</div>
<div class="img-w">
<img src="gallery/m3.jpg" />
</div>
<div class="img-w">
<img src="gallery/m4.jpg" />
</div>
<div class="img-w">
<img src="gallery/m5.jpg" />
</div>
<div class="img-w">
<img src="gallery/m6.jpg" />
</div>
<div class="img-w">
<img src="gallery/m7.jpg" />
</div>
<div class="img-w">
<img src="gallery/m8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p1.jpg" />
</div>
<div class="img-w">
<img src="gallery/p2.jpg" />
</div>
<div class="img-w">
<img src="gallery/p3.jpg" />
</div>
<div class="img-w">
<img src="gallery/p4.jpg" />
</div>
<div class="img-w">
<img src="gallery/p5.jpg" />
</div>
<div class="img-w">
<img src="gallery/p6.jpg" />
</div>
<div class="img-w">
<img src="gallery/p7.jpg" />
</div>
<div class="img-w">
<img src="gallery/p8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p9.jpg" />
</div>
<div class="img-w">
<img src="gallery/u1.jpg" />
</div>
<div class="img-w">
<img src="gallery/u2.jpg" />
</div>
<div class="img-w">
<img src="gallery/u3.jpg" />
</div>
<div class="img-w">
<img src="gallery/u4.jpg" />
</div>
<div class="img-w">
<img src="gallery/u5.jpg" />
</div>
<div class="img-w">
<img src="gallery/u6.jpg" />
</div>
<div class="img-w" style="background-color:yellow;"><!-- background color added just for test -->
<img src="gallery/u7.jpg" />
</div>
<div class="img-w">
<img src="gallery/u8.jpg" />
</div>
</div>
<br>
<div class="center">
<p class="bold ">Page 1 | Page 2
</p>
</div>

Related

How to run the same Javascript code on a single page, with different directions ( owl carousel)?

I'm very new to Javascript so appreciate your help! I created this Owl slider (there are 2 sliders in this code), but want the second carousel to slide in the opposite direction. So the first carousel should slide left to right, and the second from right to left. However, when I add the direction:rtl to the code, it affects both carousels instead of just the bottom one. How can I amend the code so that both carousels slide in opposite directions?
You can view the codepen here --> https://codepen.io/ellie-oop/pen/KKmWLOQ or the code is copied below (HTML, JS, CSS)
Thanks!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Javascript
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
center: true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:false
}
}
})
})
</script>
CSS
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.main-title{
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.ewmcontainer{
padding: 1em 0;
float: left;
width: 100%;
}
#media screen and (max-width: 640px){
.ewmcontainer{
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px){
.ewmcontainer{
width: 100%;
}
}
.ewmcontainer .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.ewmcontent {
position: relative;
width: 95%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.ewmcontent .ewmcontent-overlay {
background: #0070bb;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.ewmcontent:hover .ewmcontent-overlay{
opacity: 0.9!important;
z-index: 1;
}
.content-image{
width: 100%;
}
.content-details {
position: absolute;
z-index: 2;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.ewmcontent:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-top{
top: 20%;
}

You can create one $(document).ready(function() for each carousel, with a unique html element ID (<div id="example-carousel">) so each script call only one single carousel. You can also use unique class names (<div class="example-carousel">) Each carousel can now take in a different configuration object. For example:
$(document).ready(function(){
$("#carousel-top").owlCarousel({
config: etc
}
})
})
$(document).ready(function(){
$("#carousel-bottom").owlCarousel({
config: etc
}
})
})

Keeping the position of an element with transform property when resizing the browser

I am trying to create a slider and everything works well, but when i resize the browser the position of the elements is resizing too and that is because when i click on the arrows of the slider i apply to each element a transform: translateX().
If i don't resize the browser the slider works like it should.Is there a way to stop changing the position of the elements when the browser is resized and stop them moving?
When you run the code put it in full page and after clicking the arrows resize the window to see what I am talking about.
I couldn't find a solution so any help is really appreciated.You can find the code below.
const rightArrow = document.querySelector('.right');
const leftArrow = document.querySelector('.left');
const movieTitles = document.querySelectorAll('.movie-title');
const movieContainer = document.querySelector('.movie-container');
const arrowRight = document.querySelector('.fa-chevron-right');
let movieCounter = 0;
let rightStop = 0;
const carouselSlide = function() {
if(this.classList.contains('left') && allSlideWidth === 0) return;
let containerWidth;
let paddingLeft;
let paddingRight;
movieContainerChilds = [...movieContainer.children];
containerWidth = +window
.getComputedStyle(movieContainer)
.getPropertyValue('width')
.slice(0, -2);
paddingLeft = +window.
getComputedStyle(movieContainer)
.getPropertyValue('padding-left')
.slice(0, -2);
paddingRight = +window
.getComputedStyle(movieContainer)
.getPropertyValue('padding-right')
.slice(0, -2);
let movieTitleWidth = Number(movieContainerChilds[0].getBoundingClientRect().width) + 4;
rightStop = Math.round((+containerWidth - (+paddingLeft + +paddingRight)) / movieTitleWidth);
if(this.classList.contains('right')) {
allSlideWidth += Math.round(+containerWidth - (+paddingLeft + +paddingRight));
movieCounter += rightStop;
}
if(this.classList.contains('left')) {
allSlideWidth -= Math.round(+containerWidth - (+paddingLeft + +paddingRight));
movieCounter -= rightStop;
};
movieContainerChilds.forEach((movie) => {
if(movieContainerChilds.length - rightStop <= movieCounter + rightStop) {
movie.style.transform = `translateX(-${allSlideWidth + (Math.round(movieTitleWidth) * (movieContainerChilds.length - (movieCounter + rightStop)))}px`;
} else {movie.style.transform = `translateX(-${allSlideWidth}px)`;
}
})
movieContainer.addEventListener('transitionend', function() {
allSlideWidth > 0 ? leftArrow.style.display = 'flex' : leftArrow.style.display = 'none';
movieContainerChilds.length - rightStop <= movieCounter + rightStop ? rightArrow.style.display = 'none' : rightArrow.style.display = 'flex';
rightArrow.addEventListener('click', carouselSlide);
leftArrow.addEventListener('click', carouselSlide);
})
movieContainer.addEventListener('transitionstart', function() {
rightArrow.removeEventListener('click', carouselSlide);
leftArrow.removeEventListener('click', carouselSlide);
})
}
let allSlideWidth = 0;
rightArrow.addEventListener('click', carouselSlide);
leftArrow.addEventListener('click', carouselSlide);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
background: #161414;
overflow: hidden;
}
section {
overflow-x: visible;
width: 100%;
position: relative;
}
.movie-container {
padding: 0 60px;
margin-top: 20px;
white-space: nowrap;
transition: .7s ease all;
}
.movie-container::-webkit-scrollbar {
display: none;
}
.movie-title {
display: inline-block;
width: calc(16.66666% - 4px);
height: 250px;
padding: 0;
margin: 0;
transition: .7s ease all;
margin-bottom: -10px;
}
.movie-title:hover {
transform: scale(1.5);
}
.movie-title img {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.left, .right {
position: absolute;
background: rgb(0, 0, 0, .3);
height: 100%;
width: 60px;
top: 0;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
}
.left {
left: -4px;
border-radius: 0 5px 5px 0;
height: 100%;
display: none;
}
.right {
right: 0.1px;
border-radius: 5px 0 0 5px;
height: 100%;
}
.right:hover, .left:hover {
background: rgb(0, 0, 0, .65);
}
#media (max-width: 1400px) {
.movie-title {
width: calc(20% - 4px);
}
}
#media (max-width: 1000px) {
.movie-title {
width: calc(25% - 4px);
}
}
#media (max-width: 800px) {
.movie-container {
padding: 0 20px;
overflow-x: scroll;
}
.movie-title {
width: 32.88888666%;
margin-right: 4px;
}
.left, .right {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
</div>
<section>
<div class="movie-container">
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
</div>
<div class="left"><i class="fas fa-chevron-left"></i></div>
<div class="right"><i class="fas fa-chevron-right"></i></div>
</section>
</body>
</html>

You are using two transforms:
.movie-title: hover {
transform: scale (1.5);
}
When you add it, the previous one collapses
translateX (0px);
transform: translateX(0px) scale(1.5); <--- That's right
So wrong, because one deletes the other
transform: scale(1.5);
transform: translateX(0px);
You can simply add one div:
HTML
.test:hover {
transform: scale(1.5);
}
<div class="movie-title">
<div class="test">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
<div>
</div>
It works, good luck

Several questions regarding, image resizing (viewport)

I am having some Issues with how my images are aligned on my website.
1. I would the images to have equal spacing from the left and the right, meaning centered because currently as you make the browser smaller the right side is a lot bigger than the left.
2. Also as I make the browser smaller the page realigns nice, but when I view it on a mobile device it is very different.
You can find my code at https://codepen.io/anon/pen/mpKvMx
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
h1 {
color: red;
}
h2 {
color:red;
}
p {
font-family: Arial;
}
body {
background-color: grey;
}
div {
text-align: justify;
}
div img {
display: inline-block;
width: auto;
max-height: 200px;
height: auto;
}
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
<html>
<title>Title</title>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 align=center>Heading</h1>
<h2 align=center>Sub-Heading</h2>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;">
</head>
<br>
<br>
<body>
<div class="image123">
<div class="imgContainer">
<img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"><div class="overlay"><div class="text">OmiseGO</div></div>
</div>
</div><br>
</body>
</html>

1) All you need is to add the following css to the element you want to align horizontally: margin: 0 auto;
2) Use media queries, so for example you can have:
on mobile: all the images stacked (you may need width:100% on your image container)
for wider viewports: images inlined as in your code sample
If you are not confortable with media queries please see the following example: https://codepen.io/TrentWalton/pen/kqxDy.

How to create a grid of photos where you can hover them and they will change into other photos?

I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>

I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>

Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}

The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}

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

We Keep Coding

JavaScript is the programming language of the Web.

Picture gallery zoom with java script - javascript

Related

How to run the same Javascript code on a single page, with different directions ( owl carousel)?

Keeping the position of an element with transform property when resizing the browser

Several questions regarding, image resizing (viewport)

How to create a grid of photos where you can hover them and they will change into other photos?

jQuery custom plugin changes applied to all instances

Categories

Resources