I'm trying to display images from a folder, But when the image does not exist. I want it to skip to the next one. I'm using 'display none' here.
Below is the code.
Thanks in Advance.
Sorry if there's any mistake.
<div class="w3-content w3-section" style="position:fixed; height: 100%; width:100%;">
<img class="mySlides" src="uploads/1.JPG" align="middle" >
<img class="mySlides" src="uploads/2.JPG" align="middle">
<img class="mySlides" src="uploads/3.JPG" align="middle">
<img class="mySlides" src="uploads/4.JPG" align="middle">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block"; //For Eg if 1.JPG is not found it displays black screen for 5secs.
setTimeout(carousel, 5000); // Change image every 5 seconds
}
</script>
Add attribute onerror in every img tag
<div class="w3-content w3-section" style="position:fixed; height: 100%; width:100%;">
<img class="mySlides" src="uploads/1.JPG" onerror="this.remove()" align="middle" >
<img class="mySlides" src="uploads/2.JPG" onerror="this.remove()" align="middle">
<img class="mySlides" src="uploads/3.JPG" onerror="this.remove()" align="middle">
<img class="mySlides" src="uploads/4.JPG" onerror="this.remove()" align="middle">
</div>
Hope it'll help you out.
Related
I put together this very simple jQuery code to animate a sequence of images. It works perfectly. you can view it here.
But now I am trying to update the code so it could work on multiple image sequences at once as long as it has its own class that is referenced in the jQuery code. So I updated it - view below. Unfortunately my updates are not working. Can you guys help me resolve this issue? Thank you in advance!
let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let currentImg = 0;
function changeImg(allImg){
$(allImg[currentImg]).fadeOut(0, function(){
if(currentImg == allImg.length -1){
currentImg = 0;
}else {
currentImg++;
}
$(allImg[currentImg]).fadeIn(0)});
}
setInterval(changeImg(aniOne), 0050);
setInterval(changeImg(aniTwo), 0050);
.animation {
width: 30%;
}
.animation img {
display: none;
}
.animation img:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation first">
<img src="http://s23.postimage.org/t57meexkb/horse_1.png">
<img src="http://s23.postimage.org/i86apnasr/horse_2.png">
<img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
<img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
<img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
<img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
<img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
<img src="http://s23.postimage.org/n1un88wob/horse_8.png">
<img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
<img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
<img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
<img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
<img src="http://s23.postimage.org/imc82zka3/horse_13.png">
<img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>
<div class="animation second">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/i1oLaES.png">
</div>
As Chris G stated above:
The working code uses setInterval(changeImg, 50) which will work fine. The problem with your current attempt is setInterval(changeImg(aniOne), 50) which evaluates to a call to changeImg(aniOne), then a call to setInterval(undefined, 50) (since changeImg doesn't return anything). If you want this to work, you need to make changeImg into a function that returns a function. – Chris G
After we add these problems, we then have the issue of both animations sharing the currentImg variable, so instead I made two different variables and passed them along with the images. You can handle this many different ways.
let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let num1 = 0;
let num2 = 0;
function changeImg(allImg, num){
function main(){
$(allImg[num]).fadeOut(0, function(){
if(num == allImg.length -1){
num = 0;
}else {
num++;
}
$(allImg[num]).fadeIn(0)});
}
return main;
}
setInterval(changeImg(aniOne, num1), 0050);
setInterval(changeImg(aniTwo, num2), 0050);
.animation {
width: 30%;
}
.animation img {
display: none;
}
.animation img:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation first">
<img src="http://s23.postimage.org/t57meexkb/horse_1.png">
<img src="http://s23.postimage.org/i86apnasr/horse_2.png">
<img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
<img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
<img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
<img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
<img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
<img src="http://s23.postimage.org/n1un88wob/horse_8.png">
<img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
<img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
<img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
<img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
<img src="http://s23.postimage.org/imc82zka3/horse_13.png">
<img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>
<div class="animation second">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/i1oLaES.png">
</div>
<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo">
Is there anymethod to rotate thumbnails on mouse hover every second with javascript like many video tube sites?
I have a video gallery and I have multiple thumbs option but I dont know if its possible to change every second the images listed above.
Here is a possible solution :
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img").map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)").remove();
$("img").hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
As an alternative, you could switch between a static GIF and an animated GIF :
var gif = "https://i.stack.imgur.com/1IpaB.gif";
var agif = "https://i.stack.imgur.com/yYrPT.gif";
$("img").hover(function () {
$(this).attr("src", agif);
}, function () {
$(this).attr("src", gif);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.stack.imgur.com/1IpaB.gif">
To make the GIF that you can see in the above code snippet, I have converted a WEBP image from Youtube thanks to this online tool : https://ezgif.com/webp-to-gif.
You can do it like following...
<style type="text/css">
.mvThumbs {
position: relative;
}
.mvThumbs .mvThumb {
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="mvThumbs">
<img src="http://lorempixel.com/400/200/sports/1/" class="mvThumb" alt="" title="" id="thumb_i84bdg">
<img src="http://lorempixel.com/400/200/sports/2/" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://lorempixel.com/400/200/sports/3/" class="mvThumb" alt="" title="" id="thumb_i84yrh">
</div>
<script type="text/javascript">
$('.mvThumbs img:gt(0)').hide();
$(".mvThumbs").hover(function() {
window.timer = setInterval(function() {
$('.mvThumbs :first-child').fadeOut().next('img').fadeIn().end().appendTo('.mvThumbs');
}, 1000);
}, function() {
clearInterval(window.timer);
});
</script>
Use a setInterval that gets added on mouseenter and cleared on mouseleave, something like this:
let hoverInterval;
let visibleIndex = 0;
const container = document.querySelector('#container');
container.addEventListener('mouseover', () => {
hoverInterval = setInterval(() => {
container.children[visibleIndex].style.display = 'none';
visibleIndex++;
container.children[visibleIndex].style.display = 'block';
}, 1000);
});
container.addEventListener('mouseleave', () => clearInterval(hoverInterval));
<div id="container">
<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo" style="display:none">
</div>
I have a script of image slider. All works but the slides switch too sharply and I can not add any smoothness that only I did not do, the result is zero. Also not working all effects on mobile/tablet devices. Please help upgrade the script. Thank you. Let the power be with you!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<style>
.wbsn-animate-slider-opacity {animation:opacity-slider 2s;-ms-animation:opacity-slider 2s;-webkit-animation:opacity-slider 2s;-moz-animation:opacity-slider 2s;-o-animation:opacity-slider 2s;}
.wbsn-display-container{position:relative;}
.wbsn-content{max-width:980px;margin:auto;}
.wbsn-animate-bottom{position:relative;animation:animatebottom 0.4s;}
#keyframes animatebottom{from{bottom:-300px;opacity:0;} to{bottom:0;opacity:1;}}
#keyframes opacity-slider{from{opacity:0;} to{opacity:1;}}
</style>
<p></p><div class="wbsn-display-container wbsn-content wbsn-animate-bottom" style="background-color:#C48B48!important;box-shadow:0 0 3px #7B2F04;">
<img class="Slides" src="img/sliding/00.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/01.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/02.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/03.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/04.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/05.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/06.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/07.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/08.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"></div>
<script type="text/javascript">
var myIndex = 0; carousel();
function carousel() { var i;
var x = document.getElementsByClassName("Slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
x[i].classList.remove("wbsn-animate-slider-opacity");
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
x[myIndex-1].classList.add("wbsn-animate-slider-opacity");
setTimeout(carousel, 5000); // Change every 5 sec
}</script>
My JSFiddle : https://jsfiddle.net/1mxz6nzw
I have an issue with my slider. The thing is that images don't appear after 1 image slide out. It is an old code from YouTube and it says there might be some problems with the setInterval, but I checked everything and still nothing. It is the same code as in the video and I can't understand what is the problem.
function Slider(){
$(".slider #1").show("fade",1500);
$(".slider #1").delay(5000).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider #" + count).show("slide",{direction:"right"},500);
$(".slider #" + count).delay(5000).hide("slide",{direction:"left"},500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
},6000);
}
.slider {
overflow:hidden;
width:800px;
height:350px;
margin:30px auto;
}
.slider img{
width:800px;
heigth:350px;
display:none;
}
<body onload="Slider();">
<div class="slider">
<img id="1" src="img/home/01.jpg" border="0" alt="omage" class="img-responsive">
<img id="2" src="img/home/02.jpg" border="0" alt="omage" class="img-responsive">
<img id="3" src="img/home/03.jpg" border="0" alt="omage" class="img-responsive">
<img od="4" src="img/home/04.jpg" border="0" alt="omage" class="img-responsive">
</div>
</body>
It seems like that the arguments of .show() is wrong.
Refer to http://api.jquery.com/show/
I'm doing a frame by frame animation with Javascript by animating a sequence of images.
The code for the animation is quite simple.
My problem is, there can be a lot of images, presently 200 but can be up to 1000. Loading the images simultanely can take some times. I'd like to play the animation with 30 images initially and preload the remain in the background. But sometimes, the images take a time to load thus breaking the animation.
How can I pause the animation with a "buffering" and continue the animation when the next image is available ? Also how to skip the preloading when the images are already cached ? Could use some suggestion to improve the code.
HTML
<div class="video-stream">
<img alt="" src="images/stream/Calque-120.jpg" />
<img alt="" src="images/stream/Calque-121.jpg" />
<img alt="" src="images/stream/Calque-122.jpg" />
<img alt="" src="images/stream/Calque-123.jpg" />
<img alt="" src="images/stream/Calque-124.jpg" />
<img alt="" src="images/stream/Calque-125.jpg" />
<img alt="" src="images/stream/Calque-126.jpg" />
<img alt="" src="images/stream/Calque-127.jpg" />
<img alt="" src="images/stream/Calque-128.jpg" />
<img alt="" src="images/stream/Calque-129.jpg" />
<img alt="" src="images/stream/Calque-130.jpg" />
<img alt="" src="images/stream/Calque-131.jpg" />
<img alt="" src="images/stream/Calque-132.jpg" />
<img alt="" src="images/stream/Calque-133.jpg" />
<img alt="" src="images/stream/Calque-134.jpg" />
<img alt="" src="images/stream/Calque-135.jpg" />
<img alt="" src="images/stream/Calque-136.jpg" />
<img alt="" src="images/stream/Calque-137.jpg" />
<img alt="" src="images/stream/Calque-138.jpg" />
<img alt="" src="images/stream/Calque-139.jpg" />
<img alt="" src="images/stream/Calque-140.jpg" />
<img alt="" src="images/stream/Calque-141.jpg" />
<img alt="" src="images/stream/Calque-142.jpg" />
<img alt="" src="images/stream/Calque-143.jpg" />
<img alt="" src="images/stream/Calque-144.jpg" />
<img alt="" src="images/stream/Calque-145.jpg" />
<img alt="" src="images/stream/Calque-146.jpg" />
<img alt="" src="images/stream/Calque-147.jpg" />
<img alt="" src="images/stream/Calque-148.jpg" />
<img alt="" src="images/stream/Calque-149.jpg" />
</div>
CSS
.video-stream
{
position: relative;
}
.video-stream img
{
display: none;
height: auto;
left: 0;
max-width: 100%;
position: absolute;
top: 0;
vertical-align: top;
}
Javascript
var current = 0, // current playing image index
next = 1, // next image index to play
interval = 60, // animation speed
hide_delay = 1, // Delay to hide the current image
img_num = 200, // Total number of image
pack = 10, // Images being preloaded simultanely
idx_start = 149, // The images are index-suffixed so this is the index of the first image to preload
idx_end = 300; // index of the last image in the sequence
var load_more = function()
{
if(idx_start < idx_end)
{
// Preloading images
var temp = [],
temp_html = '';
for(var i = 0; i < pack && idx_start < idx_end; i++)
{
temp[i] = 'images/stream/Calque-' + (++idx_start) + '.jpg';
}
preloadPictures(temp, function()
{
$.each(temp, function(i, v)
{
temp_html += '<img src=' + v + ' />';
});
// Inject into dom
$('.video-stream').append(temp_html);
});
}
}
var play_stream = function()
{
$('.video-stream').find('img').eq(current).delay(interval).fadeOut(hide_delay)
.end().eq(next).delay(interval).hide().fadeIn(hide_delay, play_stream);
if(next < img_num - 1)
{
next++;
}
else
{
next = 0;
}
if(current < img_num - 1)
{
current++;
}
else
{
current = 0;
}
// Background preload
if(idx_start < idx_end)
{
load_more();
}
};
$(window).load(function()
{
play_stream();
});
This is a tricky way of doing it but here it is. You just need an array of images to pass through instead of my count;
var count = 0;
var buffer = 1;
var Vbuffer = 2;
setInterval(function() {
$('#img .' + buffer).prop('src', 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + count + '&w=150&h=150');
buffer = buffer % 3 + 1;
$('#img img').not('.' + Vbuffer).hide();
$('#img .' + Vbuffer).show();
Vbuffer = Vbuffer % 3 + 1;
count++;
}, 1000);
var buffer2 = 1;
var Vbuffer2 = 2;
var arrayOfImg = ['https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=150&h=150'
]
var count2 = 0;
var arrayCount = arrayOfImg.length;
setInterval(function() {
$('#img2 .' + buffer2).prop('src', arrayOfImg[count2]);
buffer2 = buffer2 % 3 + 1;
$('#img2 img').not('.' + Vbuffer2).hide();
$('#img2 .' + Vbuffer2).show();
Vbuffer2 = Vbuffer2 % 3 + 1;
count2 = (count2 + 1) % arrayCount;
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
wait 3 seconds while the buffer loads
<div id='img'>
<img src='' class='1' />
<img src='' class='2' />
<img src='' class='3' />
</div>
<div id='img2'>
<img src='' class='1' />
<img src='' class='2' />
<img src='' class='3' />
</div>
EDIT
Added arrays to the results, so you can pass in an array of img sources to role through.