JS slider error - javascript

JS slider error - javascript

jQuery(document).ready(function($) {
var sliderContentCount = $(".slider-container").length;
$(".slider-wrap").css("width", sliderContentCount + "00%");
var sliderContentWidth = 100 / sliderContentCount;
$(".slider-container").css("width", sliderContentWidth + "%");
var marginLimit = -(sliderContentCount - 1) * 100;
var marginRight = 0;
var marginLeft = 0;
$(".right-nav").click(function() {
if (marginRight != marginLimit) {
marginRight += -100;
}
var slideLeft = marginRight + "%";
$(".slider-wrap").css("margin-left", slideLeft);
if (marginRight == marginLimit) {
$(".right-nav").click(function() {
$(".slider-wrap").animate({
"margin-left": "0%"
}, 1000);
marginRight = 0;
})
}
})
$(".left-nav").click(function() {
if (marginRight <= 0) {
marginRight += 100;
if (marginRight <= 0) {
marginLeft = marginRight;
}
}
var slideRight = marginLeft + "%";
$(".slider-wrap").css("margin-left", slideRight);
})
});
.left-nav {
z-index: 1;
position: absolute;
top: 50%;
background-color: black;
float: left;
text-align: center;
color: white;
padding: 2%;
cursor: pointer;
}
.right-nav {
z-index: 1;
padding: 2%;
position: absolute;
top: 50%;
background-color: black;
right: 0.5%;
text-align: center;
color: white;
cursor: pointer;
}
.slider-outer-wrap {
height: 100%;
overflow: hidden;
border: 2px solid black;
}
.slider-wrap {
float: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.slider-container {
width: 25%;
float: left;
text-align: center;
}
.slider-container img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-outer-wrap">
<div class="left-nav">
<</div>
<div class="slider-wrap">
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg">
</div>
</div>
<div class="right-nav">></div>
The problem is when user clicks on the right-nav at last slide, it's margin-left becomes 0 and after this my right-nav js stops working (it doesn't slide anymore).
Please let me know where I'm doing wrong or how i can improve this. And please give suggestions to make it autoplay on load with these codes only.
thank you in advance.

Related

CSS transition works only with one element [duplicate]

This question already has answers here:
Why does querySelector only select the first element and how can I fix this?
(4 answers)
Closed 1 year ago.
I have been trying to make a working phone for a school project. In HTML. Now, I added a class with JS with the following:
document.querySelector(".app-content").classList.add("app-on");
Now, the class .app-on changes the width, height and font-size of my div. It has a transition built in. However, the width and height instantly pop up, while the font-size transitions just like i wanted.
.app-content is the class I am focusing on. The one I have added the animation to is the first one of that class to appear in the code
The full code for reference:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body onload="startTime()">
<!-- phone -->
<div id="phone-border">
<!-- screen -->
<div id="phone-screen">
<p id="time" style="font-weight: 600; font-size: 30px; float: left; color: white; padding: 10px;"></p>
<div id="app-container">
<div class="app-wrapper" style="z-index: 10000;">
<img src="https://img.icons8.com/ios/452/coronavirus--v1.png" class="app-icon" style="left: 10%; top 60%" onclick="openMA()">
<div class="app top-app left" href="#">Malware-Arten</div>
<div class="app-content" style="position: absolute; left: 0; color: black;">asdasdfasdfasdfasdf</div>
</div>
<div class="app-wrapper">
<img src="https://www.freeiconspng.com/thumbs/shield-png/shield-png-1.png" class="app-icon" style="right: 15%; top 60%" onclick="openS()">
<div class="app top-app right" href="#">Schutz</div>
<div class="app-content"></div>
</div>
<div class="app-wrapper">
<img src="https://www.freeiconspng.com/thumbs/youtube-logo-png/hd-youtube-logo-png-transparent-background-20.png" class="app-icon" style="left: 10%; bottom: 17%" onclick="openYT()">
<div class="app bottom-app left" href="#">Youtube-Info</div>
<div class="app-content"></div>
</div>
<div class="app-wrapper">
<img src="https://www.designbust.com/download/1024/png/email_icon_transparent512.png" class="app-icon" style="right: 15%; bottom: 17%" onclick="openM()">
<div class="app bottom-app right" href="#">E-Mail</div>
<div class="app-content"></div>
</div>
</div>
<div class="blackscreen">
</div>
</div>
<!-- /screen -->
<!-- homebutton -->
<div style="position: fixed;">
<button class="pushable homebutton" id="hb">
<div class="front home-front">
</div>
</button>
</div>
<!-- /homebutton -->
</div>
<!-- /phone -->
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS here:
I have marked the class with a comment.
#import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
body {
background: #2c2b30;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-weight: 900;
color: #f58f7c;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
}
#phone-border{
width: 360px;
height: 630px;
background: #4f4f51;
margin: auto;
padding-top: 60px;
border-radius: 20px;
border-bottom: 13px solid #303030;
border-left: 13px solid #404040;
}
#phone-screen {
width: 92%;
height: 84%;
background: #f58f7c;
margin: auto;
position: relative;
}
#app-container {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
height: 63%;
}
.app-icon {
position: absolute;
width: 100px; height: 100px;
border-radius: 10px;
border: 3px solid #000;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
.app-icon:hover {
transform: translateY(-10px);
}
.app {
color: #414b41;
margin: auto;
}
.top-app {
position: absolute;
bottom: 60%;
}
.bottom-app {
position: absolute;
bottom: 10%;
}
.left {
left: 6%;
}
.right {
right: 21%;
}
.app-content {
background: #404040;
font-size: 0;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.app-on { /* -----------------------THIS-------------------------*/
font-size: 15px;
width: 100px;
height: 100px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.blackscreen {
width: 100%;
height: 100%;
background: #000;
margin: auto;
position: absolute;
z-index: 2;
transition: all 0.5s;
}
.fade {
background: transparent;
transition: 1s;
}
.phone-on {
box-shadow: 0px 0px 30px #f58f7c;
transition: 1.2s;
}
.homebutton {
width: 60px;
height: 60px;
background: #404040;
border-radius: 100px;
border: none;
padding: 0;
cursor: pointer;
outline-offset: 4px;
transition: all 0.5s;
position: fixed;
left: 48%;
top: 82%;
margin-top: 20px;
}
.home-front {
display: block;
padding-top: 60px;
border-radius: 100px;
font-size: 1.25rem;
background: #202020;
color: white;
transform: translateY(-6px);
position: relative;
left: 3px;
}
.homebutton:hover .front {
transform: translateY(-8px);
left: 4px;
transition: 0.08s;
}
.homebutton:active .front {
transform: translateY(-2px);
left: 1px;
transition: 0.08s;
}
JS here:
var on = false;
var homeButton = document.getElementById("hb");
homeButton.onclick = function(){
if (on==false) {
document.querySelector(".blackscreen").style.backgroundColor = "transparent";
document.getElementById("phone-screen").classList.add('phone-on');
on=true;
setTimeout(function(){document.querySelector(".blackscreen").style.zIndex = "-10";},500);
}
else if(on==true) {
console.log(123);
}
}
function openMA() {
console.log("Malware-Arten")
var malwareArten = true;
document.querySelector(".app-content").classList.add("app-on");
}
function openS() {
console.log("Schutz")
var schutz = true;
}
function openYT() {
console.log("YT")
var yt = true;
}
function openM() {
console.log("Mail")
var mail = true;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}

document.querySelector only returns one element. You want to use document.querySelectorAll for multiple elements, along with a loop to do this.
document.querySelector(".app-content").forEach((ele) => ele.classList.add("app-on"));

The default width and height of a div is auto and you cannot transition from an auto property to a pixel value. Try adding width: 0; height: 0; to the .app-content class.

How to make percentage filling up with jquery + js

I am working on project to make percentage number increase and at the same time inside of the percentage number there is background color it needs to fill up according to percentage itself.
So far it is working but only background animation of itself. I mean if its 50 percent it needs to come half of the 50% number. if its 100 it needs to make color all the background of 100% number. Here are the relative code of the html and css.
var i = 0;
var perc = 0;
function buttonClick6() {
perc += 5;
document.getElementById('here').innerHTML = percentage(perc) + "%";
}
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = "€" + i;
}
function percentage(per) {
return (100 / 100) * per;
}
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
});
body {
position: absolute;
width: 1670px;
height: 1030px;
font-family: arial;
background-color: black;
}
.outer {
width: 100%;
height: 386px;
overflow: hidden;
position: relative;
margin-top: 300px;
text-align: center;
}
.inner {
background: url(color3.jpg);
bottom: 0;
height: 0%;
width: 100%;
overflow: hidden;
animation: animateMid 15s linear infinite;
-webkit-background-clip: text;
position: absolute;
}
.inner h2 {
font-size: 500px;
margin-top: -95px;
color: rgba(225, 225, 225, .1);
}
#keyframes animateMid {
0% {
background-position: left 800px top 500px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">0</h2>
<div></div>
</div>
</div>
</div>
<div class="perc">
<h3 id="here">0%</h3>
</div>
<button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

The way you have added CSS or HTML is by adding the scrollbar. Remove the scrollbar and the whole animation will be in one frame.
var i = 0;
var perc = 0;
function buttonClick6() {
perc += 5;
document.getElementById('here').innerHTML = percentage(perc) + "%";
document.getElementById('demo2').style.height = (125 - percentage(perc)) + "%";
}
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = "€" + i;
document.getElementById('demo2').innerHTML = "€" + i
}
function percentage(per) {
return (100 / 100) * per;
}
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
});
body {
position: absolute;
width: 1670px;
height: 1030px;
font-family: arial;
background-color: black;
}
.outer {
width: 100%;
height: 386px;
overflow: hidden;
position: relative;
margin-top: 300px;
text-align: center;
}
h3{
color: white;
}
.inner {
background: url(color3.jpg);
bottom: 0;
height: 0%;
width: 100%;
overflow: hidden;
animation: animateMid 15s linear infinite;
-webkit-background-clip: text;
position: absolute;
}
.inner h2 {
font-size: 500px;
margin-top: -95px;
color: #fff;
}
#keyframes animateMid {
0% {
background-position: left 800px top 500px;
}
}
p {
color: transparent;
font-size: 500px;
top: -95px;
left: 0;
z-index: 1;
width: 100%;
height: 130%;
margin: 0;
position: absolute;
font-weight: bold;
background: #2c2c2c;
background-clip: text;
-webkit-background-clip: text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%" data-value="0">
<p id="demo2">0</p>
<h2 id="demo">0</h2>
<div></div>
</div>
</div>
</div>
<div class="perc">
<h3 id="here">0%</h3>
</div>
<button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

Image gallery hover overlay height problem

I'm trying to recreate a google image search layout with an image hover overlay effect.
The problem I'm facing is setting the correct height of the overlay, I managed to set the correct width via jQuery but I can't seem to get the height right. I'd like the overlay to fill the entire image and not only the top.
An example of the image hover overlay effect can be found here: Image hover overlay effect
Here is my jsFiddle, hover on top of the images to see the effect.
function picRow(selector) {
masterArray = [];
// create each lineArray and push it to masterArray
$(selector).each(function () {
// get "selector" css px value for margin-bottom
// - parse out a floating point number
// - and divide by the outer width to get a decimal percentage
margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
marginRight = margin * 100 + "%";
// subtract subtract the total child margin from the total width to find the usable width
usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));
// for each child img of "selector" - add a width/height as value in the ratios array
ratios = [];
$(this).find("img").each(function () {
ratios.push(($(this).attr('width')) / ($(this).attr('height')));
});
// sum all the ratios for later divison
ratioSum = 0;
$.each(ratios, function () {
ratioSum += parseFloat(this) || 0;
});
lineArray = [];
$.each(ratios, function (i) {
obj = {
// divide each item in the ratios array by the total array
// as set that as the css width in percentage
width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
// set the margin-right equal to the parent margin-bottom
marginRight: marginRight
};
lineArray.push(obj);
});
lineArray[lineArray.length - 1].marginRight = "0%";
// alert(lineArray[lineArray.length - 1].marginRight);
masterArray.push(lineArray);
});
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
/*"height": masterArray[i][x].height,*/
"margin-right": masterArray[i][x].marginRight
});
});
});
}
$(document).ready(function () {
picRow(".image-row");
});
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
/*width:100px;*/
display:block;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-row">
<a href="#1" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
</a>
<a href="#2" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
</a>
</div>

The simplest way to achieve this with CSS(refer other's answers) but if you want to do with Jquery You can do something like this. get the height of each image and apply it to their corresponding .text class.
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
var imgHeight = $(this).parent().find("img").height();
$(this).css({
"width": masterArray[i][x].width,
"height": imgHeight,
"margin-right": masterArray[i][x].marginRight
});
});
});
Here is the working fiddle

You can try this CSS. I give the a tag .wrapper a width and height so that it can contain the span tag. Then the span stag `.text', I displayed block it then 100% the width and height so that it will occupy the space of the a tag. And lastly, I positioned absolute the image.
Please check my css code below:
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
display:block;
height: 200px;
width: 500px;
overflow: hidden;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
/* width: 100px; */
/*height: 50px;*/
text-align: center;
/* padding: 1%; */
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
height: 100%;
width:100%;
left: 0;
border: 1px solid;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
position: absolute;
top: 0;
left: 0;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

I'm pretty sure this effect can be achieved in just CSS.
Here's my solution:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
.imgWrapper { position: absolute; }
.imgWrapper::before {
transition: all ease-in-out .2s;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.imgWrapper:hover::before {
background: red;
}
.imgWrapper:hover .middle {
opacity: 1;
}
.middle {
transition: all ease-in-out .2s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: .5em;
}
.middle span {
white-space: nowrap;
}
<div class="imgRow">
<div class="imgWrapper">
<img src="https://via.placeholder.com/300x300" />
<div class="middle">
<span>Hello I am some text!</span>
</div>
</div>
</div>

add this.. i just changed text position values.
css
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
width:auto;
display:inline-block;
}
.text {
position: absolute;
top: 0;
left:0;
bottom:0;
right:0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display:flex;
justify-content:center;
align-items:center;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

Closing a Lightbox Window by Clicking on the Background Area?

I have developed a lightbox feature which I am trying to figure out how to close the lightbox preview window by clicking on the background area behind the image displayed, (while keeping the image unaffected).
Here's a demo snippet. There's a button toggle control at the upper, right-hand corner to close the lightbox window, but I would like to be able to close the window by clicking on the background area surrounding the image as well. Any input?
UPDATE: The Solution
Finally got this working, thanks to Marouen Mhiri. Updated my original snippet here:
var $scrollTop = 0;
$('.pic > img').click(function() {
var $body = $('body');
$scrollTop = $(window).scrollTop();
$body.css('position', 'fixed');
$body.css('top', '-' + $scrollTop + 'px');
$body.css('background-position', '0 -' + $scrollTop + 'px');
var srcToCopy = $(this).attr('src');
$body.find('.imgsrc').attr('src', srcToCopy);
$body.addClass('no-scroll');
$('#view').addClass("target");
});
$('#customlightbox-controls').on('click', function() {
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
});
$('.customlightbox-imgwrap').on('click', function(e) {
if(!$(e.target).hasClass('imgsrc')){
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
}
});
body {
background-color: #58d68d;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
height: auto;
width: 100%;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 150px
}
a {
display: inline-block;
line-height: 0;
}
.container {
text-align: center;
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
cursor: pointer;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox.target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#customlightbox-controls {
top: -3px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Instance 4 -->
<div class="container">
<div class="pic">
<img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
</div>
</div>
<!-- Lightbox Instance 5 -->
<div class="container">
<div class="pic">
<img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
</div>
</div>
<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate"></a>
</div>
This question stems from a previous question, answered here.

just use the click event of the div containing the lightbox and fire the event only if the clicked area doesn't contain the image:
$('.customlightbox-imgwrap').on('click', function(e) {
if(!$(e.target).hasClass('imgsrc')){ // check if target is not the image displayed
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
}
});

Hiding the lightbox by clicking on the background
It is possible by adding #view to the following code.
Before
$('#customlightbox-controls').on('click', function()
After
$('#customlightbox-controls, #view').on('click', function()
var $scrollTop = 0;
$('.pic > img').click(function() {
var $body = $('body');
$scrollTop = $(window).scrollTop();
$body.css('position', 'fixed');
$body.css('top', '-' + $scrollTop + 'px');
$body.css('background-position', '0 -' + $scrollTop + 'px');
var srcToCopy = $(this).attr('src');
$body.find('.imgsrc').attr('src', srcToCopy);
$body.addClass('no-scroll');
$('#view').addClass("target");
});
$('#customlightbox-controls, #view').on('click', function() {
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
});
body {
background-color: #58d68d;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
height: auto;
width: 100%;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 150px
}
a {
display: inline-block;
line-height: 0;
}
.container {
text-align: center;
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
cursor: pointer;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox.target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#customlightbox-controls {
top: -3px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Instance 4 -->
<div class="container">
<div class="pic">
<img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
</div>
</div>
<!-- Lightbox Instance 5 -->
<div class="container">
<div class="pic">
<img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
</div>
</div>
<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate"></a>
</div>

Can anyone explain me why this slider keeps resizing when I insert it on website?

I've picked a slider from codepen.io and made some changes in the code and when I paste it in the embed code of Weebly (the software where I'm working) it doesn't work, because it doesn't stop resizing and getting bigger and bigger. How can I stop it? P.S. I noticed it starts doing that when I insert the JavaScript code...
$(document).ready(function() {
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width(viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function() {
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight() {
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function() {
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function() {
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width(viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function() {
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) {
--indexPos;
} else {
indexPos = childrenNo - 1;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo - 1) {
indexPos = 0;
} else {
++indexPos;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function() {
$(".slider").fadeIn(500);
}, 500);
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav>div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav>div:hover {
opacity: 1;
}
.slider-nav>div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
Thanks,
Tom

You forgot a </script> in your code and that is probably the issue here. I tried this myself and it worked great.
Try the following:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
$(document).ready(function(){
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width( viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function(){
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight(){
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function(){
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function(){
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width( viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function(){
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) { --indexPos;
} else { indexPos = childrenNo-1; }
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo-1) { indexPos = 0;
} else { ++indexPos; }
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function(){
$(".slider").fadeIn(500);
}, 500);
});
</script>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
</style>
</body></html>

We Keep Coding

JavaScript is the programming language of the Web.

JS slider error - javascript

Related

CSS transition works only with one element [duplicate]

How to make percentage filling up with jquery + js

Image gallery hover overlay height problem

Closing a Lightbox Window by Clicking on the Background Area?

Can anyone explain me why this slider keeps resizing when I insert it on website?

Categories

Resources