My goal is to have an image preload while it is loading the actualy image, but I can't quite figure it out. The whole goal for this is that I have a slideshow that displays an image, but sometimes it is slow to load.. lol. Here's my HTML:
<div id="slideshow">
<img src="../images/slideshow/spacer.gif" width="100" height="100" id="myPicture" alt="some image">
</div>
Here's my javascript I have already:
window.onload = choosePic;
function choosePic() {
var myPix = new Array("../images/slideshow/sempiternal.png", "../images/slideshow/cross.png", "../images/slideshow/pentagram.png");
var randomNum = Math.floor((Math.random() * myPix.length));
document.getElementById("myPicture").src = myPix[randomNum];
}
And the CSS:
#slideshow {
height: 100px;
width: 100px;
position: fixed;
bottom: 20px;
right: 20px;
}
Doesn't seem like your function will preload anything. Apart from the random image selected which loads normally, the other images in the array will not be called at all.
You might want to check out JavaScript Preloading Images and Function to preload images? instead.
Related
I'm trying to learn how to create slideshows for a project at work. I'm using Jquery to store the active image in a variable and then using the next() method to append the active class to that image and remove the active class from the previous image.
Now that all works fine when I just have the function running on it's own. The moment I use a document.ready() function however, it doesn't work. I was able to log some messages to the console within it, but for some reason I couldn't run this function. Each time the console tells me that the slideSwitch function hasn't been defined.
Can anyone help me understand this?
Cheers.
$(document).ready(() => {
function slideSwitch() {
var $active = $('.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
setInterval( "slideSwitch()", 5000 );
});
#slideshow {
position: relative;
height: 400px;
width: 600px;
margin: 15% auto;
}
.slide {
position: absolute;
top: 0;
left: 0;
z-index: 8;
height: 100%;
width: 100%;
}
.active {
z-index: 10;
}
.lastActive {
z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<img class="slide active" src="https://picsum.photos/200/300?image=0" alt="image of toscana, slideshow image 1" />
<img class="slide" src="https://picsum.photos/200/300?image=1" alt="image of toscana, slideshow image 1" />
<img class="slide" src="https://picsum.photos/200/300?image=2" alt="image of toscana, slideshow image 1" />
<img class="slide" src="https://picsum.photos/200/300?image=3" alt="image of toscana, slideshow image 1" />
</div>
When the slideshow works it basically just times out the images to create the impression of a slideshow, swapping the z-index values a bit like a deck of cards.
You are passing a string to setInterval, so it is evaluated in the global scope and your function is scoped to the anonymous function you pass to ready (so it isn't found).
Never pass a string to setInterval, always pass a function.
setInterval(slideSwitch, 5000 );
Here is the effect I want to achieve:
This is i.e. one image, and the other images should slide diagonally in the way that arrow goes. The effect should not be fade effect. The slide effect has to be achieved.
Here is the html:
<div id="slider_page">
<div style="display: block;">
<img src="img1.jpg">
<img src="img2.jpg">
</div>
</div>
Please for help guys.
Sorry for the mess in the html code.
Thanks in advance
Here is a rough sketch on how to do it on your own, without a library. The code might need some adaption for your particular circumstances. For instance, if you want to slide not only images but elements containing text as well, change from using <img> to <div>. You'll find explanation in the comments.
HTML
<div id="carousel">
<img class="carousel-img" src="img1.jpg" />
<img class="carousel-img" src="img2.jpg" />
<img class="carousel-img" src="img3.jpg" />
</div>
CSS
#carousel {
position: relative; /* So images are positioned relative to it. */
width: 400px;
height: 300px;
overflow: hidden; /* So we clip the other images. */
}
.carousel-img {
width: 100%;
position: absolute; /* Position relative to parent div. */
left: 400px; /* Hide just beyond bottom right corner. */
top: 300px;
}
.carousel-img:first-child {
/* Do not hide the first image. */
left: 0px;
top: 0px;
}
JavaScript
//Some settings.
var animation_time = 500; //Millisecs the animation takes.
var waiting_time = 2000; //Millisecs between animations.
//Some variables.
var images; //A list of the images.
var i = 0; //Index of the current image.
var w; //Width of carousel.
var h; //Height of carousel.
$(function() {
//Runs when the DOM is ready.
//Set the variables.
images = $("#carousel .carousel-img");
w = $("#carousel").css("width");
h = $("#carousel").css("height");
//Start the carousel.
setTimeout(slideToNext, waiting_time)
});
function slideToNext() {
//Get the index of the next image.
var next = (i + 1) % images.length;
//Make sure the new image is on top.
images.css("z-index", 0);
images.eq(next).css("z-index", 1);
//Animate the next image.
images.eq(next).animate({left: "0px", top: "0px"}, animation_time, function() {
//Runs when the animation is compleated.
//Move the old image out.
images.eq(i).css({left: w, top: h});
//Now this is the current image.
i = next;
//Do it again.
setTimeout(slideToNext, waiting_time);
});
}
Here is a working JSFiddle, including some beautiful artwork by Caspar David Friedrich.
It might also be possible to configure an existing carousel library (like Slick or Jssor) to do this.
Hi I am new to JavaScript and have to make a game.
My game involves finding animals that are hiding behind objects in the space of 60 seconds. All my objects are images and I have created them with divs.
I need to hide the image of the animal behind the object so when the player clicks on the object the animal appears. I was going to use an alert but not sure if that's the best approach.
Example of code:
Html:
<div id ="clown">
<img src="clown.png" width="300" height="250">
</div>
Javascript: clown = document.getElementById('clown')
So as I understand, you want two types of images displayed: object and animal, where animal is hidden by default and is revealed when the object is clicked.
This can be done using css and javascript as shown in example below.
<style>
#object .animal {
position: absolute;
left:0;
top:0;
visibility:hidden;
}
</style>
<div id="object">
<img class="animal" src="animalimgsrc">
<img src="objimgsrc">
</div>
<script>
document.getElementById("object").onclick = function(){
document.getElementById("object").getElementsByClassName("animal")[0].style.visibility = "visible";
};
</script>
I guess, you need to make "object" class instead of id, if you want multiple objects.
You can achieve this by changing the selected image display from none to block. see HTMLElement.style and display property for further info, Check this:
CSS
.image-wrapper {
width: 300px;
height: 250px;
background-color:#00ff21;
float:left;
margin:2%;
}
.image-wrapper img {
display: none;
width: 300px;
height: 250px;
}
HTML
<div id="clown" class="image-wrapper">
<img src="clown.png" width="300" height="250" />
</div>
<div id="bird" class="image-wrapper">
<img src="bird.png" width="300" height="250" />
</div>
JavaScript
var divs = document.querySelectorAll(".image-wrapper");
for (i = 0; i < divs.length; i++) {
var div = divs[i];
div.onclick = function () {
var img = this.getElementsByTagName('img')[0];
if (img != undefined) {
img.style.display = "block";
console.log(img)
}
}
}
Here is the demo
I'm working with Microsoft Web Expression to create a website and I want a smaller image on mouseover/hover to be replaced with a larger one; similar to thumbnail idea, however looking at my code I just can't find how to implement any of the advises I've looked at here.
HTML part:
<div id="layer11" style="position: absolute; width: 150px; height: 20px; z-index: 1; left: 0px; top: 0px; " class="auto-style17">
<img id="img1" alt="" height="20" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'s2.png')" src="s1.png" width="150" /></div>
And here are the javascript functions:
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
And I just can't figure out what I should change so that the swapped image is larger rather than compressed on the existing one.
you have to remove the width and height attributes
see http://jsbin.com/nifuvitoqa/1/edit
HTML:
<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
</head>
<body>
<div class="slider_b">
<img src="img/frame_wood_back_460_380.jpg">
<img src="img/01_french_train_480_360.jpg">
<img src="img/05_cherries_480_360.jpg">
<img src="img/06_wheat_480_360.jpg">
<img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>
<script>
setInterval("switchit()", 3000);
$('.slider_b img:gt(0)').hide();
function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
}
</script>
</body>
</html>
CSS:
.slider_box img{
position:relative;
top:0px;
left: 0px; }
.slider_box {
position:absolute;
width: 480px;
height: 360px; }
#button {
position: relative;
top: 10px;
left: 500px;}
The slideshow works - I just could not figure out how to switch the slideshow to one of the images by clicking a thumbnail button (id=button) - the slideshow should continue then in the regular circle order.
You could add a data attribute to your <img> elements, and append the button with the first child <img>element to carry over that data attribute. e.g:
<img src="" data-slide="1">
And for the append
var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);
Once this is done, make it so that
("#button").on(click, function() {
var moveTo = $(this).find("img").data(slide);
var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
$("div.slider_b).prepend(item);
}
I'm not 100% right with the jQuery, but I believe I'm on the right lines. A bit more exploration down this route will get you to where you need to be.
Try making a relation between the slide and its thumbnail to fetch the respective slide, e.g. by using attibutes pairs, like data-slide="slide1" for the thumbnail and id="slide1" for the actual slide
on thumbnail click, adjust the current slide to the respective one and continue auto animation from this point
Point one is just one solution, it's the creativity part ;) You could come up with something else, like e.g. using thumbnails and slides indexes, etc. Good luck.