restart animation jquery and javascript - javascript

Hi i'm creating a jquery slider and i'm having problems to restar the slider when the time(in the setInterval) is over. When the 3 images slide and the last one is showing the animation stays there, but i want to restart to the first image and start the loop again. Could someone help me?
Thanks!
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slider Jquery Test</title>
<link href="slider.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div id="container">
<ul id="buttons" class="buttons">
<li><img id="left_b" class="left_b" src="imagens/flechae.png" alt="Anterior" onMouseOver="this.src='imagens/flechaehover.png'" onMouseOut="this.src='imagens/flechae.png'"></li>
<li><img id="right_b" class="right_b" src="imagens/flechad.png" alt="Proximo" onMouseOver="this.src='imagens/flechadhover.png'" onMouseOut="this.src='imagens/flechad.png'"></li>
</ul>
<ul id="gallery" class="gallery">
<li><img id="1" class="images" src="imagens/imagem1.jpg" alt="Imagem 1"></li>
<li><img id="2" class="images" src="imagens/imagem2.jpg" alt="Imagem 2"></li>
<li><img id="3" class="images" src="imagens/imagem3.jpg" alt="Imagem 3"></li>
</ul>
</div>
</body>
</html>
CSS
#charset "utf-8";
body{
width: 100%;
height: auto;
}
#container {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/*overflow: hidden;*/
}
.buttons {
width: 100%;
height: auto;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
display: none;
}
.buttons li {
width: 100%;
height: auto;
position: relative;
margin: 0;
padding: 0;
}
.left_b {
width: 20px;
height: 80px;
position: relative;
float: left;
margin-left: 30px;
margin-top: 250px;
}
.right_b {
width: 20px;
height: 80px;
position: relative;
float: right;
margin-right: 30px;
margin-top: 250px;
}
.gallery {
width: 100%;
height: auto;
list-style: none;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.gallery li {
width: auto;
height: auto;
position: relative;
float: left;
}
.images {
width: 1200px;
height: 720px;
position: relative;
float: left;
}
JavaScript
$(function(){
slide();
// Slider
function slide()
{
// Variables
var interval = 0;
var time = 3000;
var seconds = 1000;
var current_image = 1;
var num_images = 0;
var total_width = 0;
var slide_left = "+=1200px";
var slide_right = "-=1200px";
var right_b = $(".right_b");
var left_b = $(".left_b");
var left = "margin-left";
var width = "width";
var gallery = $(".gallery");
var galleryLi = $(".gallery li");
var images = $(".images");
var buttons_class = $(".buttons");
var container = $("#container");
// Calling functions
imagesSize();
hideButtons();
animation();
// Functions
function animation()
{
if(current_image < num_images)
{
loop();
clickRight();
clickLeft();
}
}
function hideButtons()
{
container.hover(function(){
buttons_class.fadeIn();
}, function(){
buttons_class.fadeOut();
});
}
function imagesSize()
{
galleryLi.each(function(){
num_images++;
total_width += 1200;
});
gallery.css(width, total_width + "px");
}
function loop()
{
if(current_image >= 1){
interval = setInterval(moveLeft, time);
}
else if(current_image === num_images){
clearLoop();
moveLeft();
}
}
function clearLoop()
{
clearInterval(interval);
}
function moveLeft()
{
if(current_image < num_images){
gallery.animate({left: slide_right}, seconds);
current_image++;
}
}
function clickRight()
{
right_b.click(function(){
moveLeft();
clearLoop();
loop();
});
}
function moveRight()
{
if(current_image > 1){
gallery.animate({"margin-left": slide_left}, seconds);
current_image--;
}
}
function clickLeft()
{
left_b.click(function(){
moveRight();
clearLoop();
loop();
});
}
} // end of function slide
}); // End of main function


function loop()
{
if(current_image >= 1){
interval = setInterval(moveLeft, time);
}
else if(current_image === num_images){
clearLoop(); // Clear the previous interval
moveLeft();
// Add these two lines after setTimeout to finish the animation.
setTimeout(function(){
current_image = 1;
loop();
}, seconds);
}
}

Related

How can I fix my slideshow transition error?

I made images and a video slideshow. 3 images and at the end 1 video. It is fine when I made it on a full-screen web page.
But when I made it to half of the screen the transition error showed up, the next image flashed at the bottom of the earlier image.
How can I fix my slideshow transition error?
Can anyone help me?
// Some variables
var timer;
var sWidth = '100%',
sHeight = '80%',
border = 10;
var slideshowSet = false;
var video;
var videoSet = false;
var slidePause = false;
var $el;
var $currentEl = $('.slideshow').find('li').eq(0);
// On document ready
$(function() {
// Set slideshow dimensions + border
setSlideDimensions(sWidth, sHeight, border);
// Show pause button
$('.slideshow').hover(
function() {
if (slideshowSet) {
$('.pause').stop().fadeIn(200);
}
},
function() {
if (slideshowSet) {
$('.pause').fadeOut(200);
}
}
);
// Pause button
$('.pause').click(function() {
if ($(this).text() == '| |') {
// Pause slideshow
slidePause = true;
$(this).text('►');
clearTimeout(timer);
if ($currentEl.find('video').size() == 1) {
video.pause();
}
} else {
// Play slideshow
$(this).text('| |');
if ($currentEl.find('video').size() == 1) {
video.play();
} else {
timer = setTimeout(slide, 2000);
}
}
});
});
// Window ready (all images loaded, but not videos!!)
$(window).ready(function() {
// Hide loader GIF
$('.loader').fadeOut(200);
// Show slideshow
$('.slideshow ul').fadeIn(200);
// Start slideshow
$el = $('.slideshow').find('li');
timer = setTimeout(slide, 2000);
slideshowSet = true;
});
// Function to slide
function slide() {
videoSet = false;
$el = $('.slideshow').find('li');
$el.eq(1).add($el.eq(0)).animate({
'left': '-=' + sWidth
}, {
queue: false,
duration: 300,
complete: function() {
$el.eq(0).animate({
'left': '100%'
}, 0);
$currentEl = $el.eq(1);
if ($(this).index() == 1) {
$('.slideshow ul').append($el.eq(0));
// We chek if it's a video
if ($(this).find('video').size() == 1) {
//If yes we set the variable
video = $(this).find('video')[0];
videoSets();
// If video can play
if (video.canPlayType) {
// Play video
video.play();
} else {
// Error message
alert('No html5');
}
} else {
// If not a video we set timeout to next slide
timer = setTimeout(slide, 2000);
}
}
}
});
}
// Function to set all video events
function videoSets() {
if (!videoSet) {
videoSet = true;
// Video ended
video.addEventListener("ended", function() {
timer = setTimeout(slide, 2000);
});
// Video Playing
video.addEventListener("playing", function() {
clearTimeout(timer);
if (slidePause) {
$('.pause').text('| |');
video.play();
slidePause = false;
}
});
}
}
// Function to set slideshow dimensions
function setSlideDimensions(w, h, b) {
$('.slideshow').css({
width: w,
'height': h,
'padding': b
});
$('.slideshow ul li img, .slideshow ul li video').css({
width: w,
'height': h
});
}
.slideshow {
position: relative;
margin: auto;
}
.slideshow ul {
width: 100%;
height: 100%;
position: relative;
list-style: none;
overflow: hidden;
display: none;
}
.slideshow ul li {
position: relative;
left: 100%;
}
.slideshow ul li:first-child {
left: 0%;
}
video {
background: #434343;
}
.loader {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
.pause {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
background: rgba(0,0,0,.6);
z-index: 100;
line-height: 50px;
text-align: center;
font-size: 1.0em;
font-weight: bold;
color: white;
cursor: pointer;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="row">
<div class="column">
<section class="slideshow">
<div class="pause">| |</div>
<img src="https://c.tenor.com/5o2p0tH5LFQAAAAi/hug.gif" width="50" class="loader" />
<ul>
<li><img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0%2C176%2C3008%2C1654&wid=2000&hei=1100&scl=1.504" /></li>
<li><img src="https://mymodernmet.com/wp/wp-content/uploads/2021/04/Nature-Sounds-For-Well-Being-03.jpg" /></li>
<li><img src="https://img.freepik.com/free-photo/sunrise-jungle_1385-1689.jpg?w=1380&t=st=1664437209~exp=1664437809~hmac=2f34f36a7ab7d602cc4927fce5ad3063c5d945a169145d997b27e9f78f76f5ad" /></li>
<li><img src="https://img.freepik.com/free-photo/madakaripura-waterfall-is-tallest-waterfall-java_335224-388.jpg?w=1380&t=st=1664437263~exp=1664437863~hmac=5dfd42c39de69c5eebc5a8976d6ffc1ca733db1720a2b984a2d19b0cf5166c50" /></li>
<li><img src="https://img.freepik.com/premium-photo/natural-portraits-rice-fields-mountains-indonesian-rural-areas-with-sunrise-green-morning-dew-asia_80375-80.jpg?w=1380" /></li>
<li>
<video controls id="video1" preload>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
</li>
</ul>
</section>
</div>
<div class="column">
</div> </div>
</body>
</html>

How do I stop a function? ( jQuery, .hover() )

When you hover over the squares of the picture change one after another using the interval function. Can't solve 2 problems.
1. The function should be started only at the square on which the point.
2. The function should stop if the cursor has left the square.
Help me think.
$('.block').hover(function(){
setInterval(myFuncSuper2, 3000);
});
// Change pic on hover
function changePic(i) {
setTimeout(function () {
jQuery(".hero-cat_" + i).addClass("active");
jQuery(".hero-cat_" + i).siblings().removeClass("active")
}, i * 1000)
}
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
changePic(i);
}
}
.block {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
cursor: pointer;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
display: none;
}
.block img.active {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>

What you are trying to achieve needs two things:
mouseenter and mouseleave
1.2. because mousehover will keep on adding events when you keep hovering. you need to stop that.
And this for context of current element
2.1 because you need to enable only selected element for hover, not entire .block set
$('.block').mouseenter(startMyFunc);
$('.block').mouseleave(stopMyFunc);
var myInterval;
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
setTimeout(function() {
jQuery(this).find(".hero-cat_" + i).addClass("active");
jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
}.bind(this), i * 300)
}
}
function startMyFunc() {
myInterval = window.setInterval(myFuncSuper2.bind(this), 1000)
}
function stopMyFunc() {
if (myInterval) {
clearInterval(myInterval);
}
}
.block {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
cursor: pointer;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
display: none;
}
.block img.active {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>

-- Edit: added clearing the timeouts created in myFuncSuper2 ---
Set the function for hover off, and clear the interval
var interval = null;
var timeouts = [0,0,0];
$('.hero-category').hover(function () {
interval = setInterval(myFuncSuper2, 3000)
}, function() {
if (interval) clearInterval(interval);
for (var i = 0; i < timeouts.length; i++) {
if (timeouts[i] !== 0) {
clearTimeout(timeouts[i]);
}
}
});
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
timeouts[i] = setTimeout(function() {
jQuery(this).find(".hero-cat_" + i).addClass("active");
jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
}.bind(this), i * 300)
}
}

Carousel Images Same Height

I have an image/video carousel and I'm having trouble keeping all the content in the carousel the same height.
When you click on the thumbnails, the main image heights don't match up.
How do I keep everything the same height, yet responsive at the same time?
(I added some pictures to show what I mean)
Here's the codepen.
Edit: I want to keep the main images shown in the carousel the same height, not the thumbnails.
$(document).ready(function() {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function() {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function(event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair,
.chair-class {
position: absolute;
width: 100%;
height: auto;
max-width: 600px;
max-height: 400px;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 40vw;
}
.sketchfab-iframe {
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
</script>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</html>

It's fixed by setting all the image height to 70vh.
Guess something is not working with StackOverflow Fiddle.
Check my codepen and let me know if that's what you are looking for.
$(document).ready(function() {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function() {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function(event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair,
.chair-class {
position: absolute;
width: auto;
height: 100%;
/* max-width: 600px;
max-height: 400px; */
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
height: 70vh;
overflow: hidden;
}
#imgDetail img {
height: 70vh;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* top:10vh; */
height: 70vh;
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<body>
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</div>
</body>

$(document).ready(function () {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function () {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function (event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function (index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair, .chair-class {
position: absolute;
width: 80%;
height: auto;
max-width: 600px;
max-height: 400px;
margin: 0 auto;
display: block;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p, #next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: 120px;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 40vw;
}
.sketchfab-iframe {
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
</script>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</html>

Javascript fullscreen image on load, vanish after 2 seconds (screensaver after idle-time)

I wanted to combine this function of showing a picture (our logo) on my Shopify frontage website fullscreen and make it fade away or vanish after seconds automatically so people can access to the website after the Image or our logo is gone (2 Sec).
Now I have these two parts of HTML, but they don't work together somehow.
Can someone help?
Thank you
<div id="makethisvanish"><img src="image"></div>
<div class="fixed-background">
<img src="image" class="myimg">
</div>
<script type="text/javascript">
window.onload = function () {
window.setTimeout( vanishText, 2000 ); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById( 'makethisvanish' ).style.visibility = 'hidden';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>

Try the code below:
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
.fixed-background {
position: relative;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
.grid__item {
height: 50px;
}
.myimg {
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
<div class="grid__item">
<div class="fixed-background">
<img src="http://i65.tinypic.com/5nn1va.jpg" class="myimg">
</div>
</div>
</body>
I believe this should do?
Report back if you have a problem. I'll try to help you solve it ;)
EDIT
For only the full-screen picture you'll need even less:
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
</body>
Maybe you'll need another line in vanishText():
document.getElementById('makethisvanish').style.zIndex = "0";
But try with the code above first.
EDIT_2
replace the script in the head with the following:
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
screensaver();
}
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
document.getElementById('makethisvanish').style.zIndex = '-1';
}
function screensaver() {
document.getElementById('makethisvanish').style.zIndex = "1000";
document.getElementById('makethisvanish').style.opacity = "1";
}
function resetTimer() {
if(_idleSecondsCounter >= IDLE_TIMEOUT) {
vanishText();
}
_idleSecondsCounter = 0;
}
document.onclick = function() {
resetTimer();
};
document.onmousemove = function() {
resetTimer();
};
document.onkeypress = function() {
resetTimer();
};
You'll probably have to adapt the IDLE_TIMEOUT. It's set to 5 seconds for testing. I would probably set it to one minute, maybe a bit more. The "screensaver" should dissappear if the mouse is moved, a mouseclick is done or a key on the keyboard is pressed.

How to make a slider with jquery using bullets

Hello I want to know how to make a slider with jquery, I'm quite new with this I will try my best to be specific, I want to do this:
I have an slider with 3 images "they are on the same space" and 3 bullets below the images, first I can't see the images because they have opacity: 0 but if I click the first bullet I will see the first image, bullet# 2 img# 2, bullet# 3 img# 3, I want to put an <a> tag for example avanzar that for advance to next image "it will be on the right side" and the left side will be to back to the last image that you saw, my question is how can I do that? I will need to keep the transition of them and how to join that to the bullets? because I need to use the tag <a> <-- the button "for me" or the bullets, it's difficult and I'm trying to do it, any help is welcome
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div class="sliders">
back
next
<ul >
<li><img src="image_1.jpg"></li>
<li><img src="image_2.jpg"></li>
<li><img src="image_3.jpg"></li>
</ul>
<!-- <ul class="controles">
<li class="activa">&nbsp</li>
<li>&nbsp</li>
<li>&nbsp</li>
</ul> -->
</div>
<div class="sliders">
back
next
<ul>
<li><img src="image_1.jpg"></li>
<li><img src="image_2.jpg"></li>
<li><img src="image_3.jpg"></li>
</ul>
</div>
</body>
</html>
Here is the js:
$.fn.slider = function(config){
var nodos = this;
var delay = (typeof config.delay == "number")?parseInt(config.delay):4000;
for (var i = 0; i < nodos.length; i++) {
Slider(nodos[i]);
}
function Slider(nodo){
var galeria = $(nodo).find('ul');
if(!$(nodo).hasClass('slider'))
$(nodo).addClass('slider');
if(!galeria.hasClass('galeria'))
galeria.addClass("galeria");
//Encontrar cuantas imagenes hay en la galeria
var imagenes = $(galeria).find('li');
//Controles
var html_bullets="<ul class='controles'>";
for (var it = 0; it < imagenes.length; it++) {
html_bullets+="<li data-index='"+it+"'> </li>";
}
html_bullets+="</ul>";
$(nodo).append(html_bullets);
var bullets = $(nodo).find("ul.controles li");
bullets.click(function(){
var index= $(this).data("index");
bullets.removeClass('activa');
$(imagenes[index]).addClass("activa");
$(bullets[index]).addClass("activa");
});
}
};
$(document).ready(function() {
$(".sliders").slider({delay:5000});
});
Here is the css:
.slider{
width: 320px;
overflow: hidden;
}
.slider ul{
list-style: none;
padding: 0;
}
.slider ul.galeria{
height: 200px;
position: relative;
}
.slider ul.galeria li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s;
}
.slider ul.galeria li.activa{
opacity: 1;
}
.slider ul.galeria img{
max-height: 200px;
}
/*Controles*/
.slider ul.controles {
text-align: center;
}
.slider ul.controles li{
background-color: black ;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}

Here is what I wanted I already finished it, I'm glad if it helps someone
html:
<!DOCTYPE html>
<html>
<head>
<title>Practica2Jquery</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="slider.js"></script>
</head>
<body>
<div class="sliders">
Atras
<ul >
<li class="activa"><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
Siguiente
</div>
<div class="sliders">
Atras
<ul>
<li class="activa"><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
<li><img src="image6.jpg"></li>
</ul>
Siguiente
</div>
</body>
</html>
js:
$.fn.slider = function(config){
var nodos = this;
var delay = (typeof config.delay === "number")?parseInt(config.delay):3000;
for (var i = 0; i < nodos.length; i++) {
Slider(nodos[i]);
}
function Slider(nodo){
var galeria = $(nodo).find('ul');
var tag = "<a class='atras'></a>";
if(!$(nodo).hasClass('slider'))
$(nodo).addClass('slider');
if(!galeria.hasClass('galeria'))
galeria.addClass("galeria");
//Encontrar cuantas imagenes hay en la galeria
var imagenes = $(galeria).find('li');
//Controles
var html_bullets="<ul class='controles'>";
for (var it = 0; it < imagenes.length; it++) {
if(it==0)
html_bullets+="<li data-index='"+it+"' class='activa'> </li>";
else
html_bullets+="<li data-index='"+it+"'> </li>";
}
html_bullets+="</ul><a class='siguiente'></a>";
$(nodo).append(html_bullets);
$(nodo).prepend(tag);
var bullets = $(nodo).find("ul.controles li");
bullets.click(function(){
var index= $(this).data("index");
$(imagenes).add(bullets).removeClass('activa');
$(imagenes[index]).add(bullets[index]).addClass('activa');
});
}
$(".slider").on("click","a.atras",function(){
direcciones({div: this.parentElement});
});
$(".slider").on("click","a.siguiente",function(){
direcciones({div: this.parentElement,direccion:1});
});
function direcciones(lado){
var div = lado.div;
var imagen = $(div).find("ul.galeria li.activa");
var imagenes = $(div).find("ul.galeria li");
var bullet = $(div).find("ul.controles li.activa");
var bullets = $(div).find("ul.controles li");
var index = bullet.data("index");
var max = bullets.length-1;
$(bullets).add(imagenes).removeClass('activa');
if(lado.direccion){
// === ?
if(index == max){
$(imagenes[0]).add(bullets[0]).addClass('activa');
}else {
$(imagenes[index+1]).add(bullets[index+1]).addClass('activa');
}
}
else{
if(index == 0){
$(imagenes[max]).add(bullets[max]).addClass('activa');
}else {
$(imagenes[index-1]).add(bullets[index-1]).addClass('activa');
} } } };
$(document).ready(function() {
$(".sliders").slider({delay:3000});
});
css:
.slider{
width: 420px;
overflow: hidden;
}
.slider ul{
list-style: none;
padding: 0;
}
.slider ul.galeria{
height: 200px;
position: relative;
margin-left: 30px;
}
.slider ul.galeria li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s;
}
.slider ul.galeria li.activa{
opacity: 1;
}
.slider ul.galeria img{
max-height: 400px;
max-width: 300px;
margin-left: 5px;
}
/*Controles*/
.slider ul.controles {
position: relative;
left: 38%;
bottom: 45px;
}
.slider ul.controles li{
background-color: black ;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}
.slider ul.controles li.activa{
background-color: red ;
}
.slider a.atras{
position: relative;
left: 0;
top: 128px;
}
.slider a.siguiente{
position: relative;
left: 80%;
bottom: 120px;
}

Categories