I am very new to JavaScript and I am creating a simple slideshow and I got it work ok. The only thing is I can't seem to create a web link to each of the images in my slideshow. I would like for it to link to a different web page to the 4 different images I have for the slideshow as it scrolls though.
Here is what I have:
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><img src="Images/slideshow_1_home_2013.jpg"
name="slide" width="974" height="305" align="left"/></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
}
</script>
</body>
</html>
One way is to use a link to wrap up your images:
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><a name="mylink" href=""><img src="Images/slideshow_1_home_2013.jpg"
name="slide" width="974" height="305" align="left"/></a></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit();
if (whichimage==1)
document.links.mylink.src="link1.htm"
else if (whichimage==2)
document.links.mylink.src="link2.htm"
</script>
</body>
</html>
There is an easier ways to do that:
first:create an HTML document and we are going to call it images.html
in that file just add all the images you want to load
like:
<img src="img1.jpg" onload="parent.loadedimg()" />
<img src="img2.jpg" onload="parent.loadedimg()" />
<img src="img3.jpg" onload="parent.loadedimg()" />
we use parent to call a function from our iframe to our index.html file
then just add to your page index.html this anywhere you want it wont affect your page
<div style="display:none>
<iframe src="images.html">
</iframe>
</div>
so now the images will start loading automatically.
now add this HTML anywhere you want your image to be displayed
<img src="img1.jpg" width="400" height="300" id="slider" />
finally the Javascript:
<script type="text/javascript">
startslide();
var imgnum=parseInt;
imgnum=0;
maximg=parseInt;
maximg=0;
function loadedimg(){
maximg++;
}
function startslide(){
if(imgnum<=maximg && maximg>0){
imgnum++;
document.getElementById('slider').src='img'+imgnum+'.jpg';
if(imgnum==maximg){
imgnum=0;
}
}
window.setTimeout(function(){startslide()},2000);
}
</script>
now explanation:
if you remember in the iframe every time that an image load sends a function to the javascript in this javascript when the function is called the var maximg change by 1 so every time an image load this var sum up 1 in this example when all the images finish to load the final number for maximg is going to be 3 cause in the iframe you only loaded 3 images, and now you don't need to worry for the ammount of the images you want to load you just add so many images as you want in the iframe.
the var imgnum it is used to change the src of the image to be displayed, so be sure that al your images have the same name, and then the number of the order to be displayed.
and the line that used window.setTimeout will define how much time will wait to change to the next image in this case i use 2000 and it means 2 seconds, 500 means 0.5 seconds,5000 means 5 seconds, so change it to any number you want to wait.
that it's all so i hope been helpful for you!.
Related
I'm new to html and javascript. I am trying to add images to a canvas when clicked on by calling the image from the image gallery. I'm using the onclick method to my script and isn't working thus I am struggling. I've added my code below. Thank you for your help! The assignment ask...
Implement the imgOnClick(elmt) function so that it paints (to the canvas' drawImage() method) the image given by elmt. elmt will be an tag object. The canvas has the id imgresult.
In the document ready function, have each of the thumbnail images set their click event to the imgOnClick() function. I recommend you test this for one image before implementing it for the remaining images. Make sure you scale the image to a usable size.
<pre> <code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet type="text/css" href="memeory.css">
<title>Meme-ory :: Javascript Meme Generator</title>
<script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
$('.thumbnail').click(imgOnClick('img'){
});
});
function imgOnClick('img') {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 10, 10);
};
};
function buttonOnClick() {
};
</script>
</head>
<body>
<header>
<h1>Meme-ory: Raging on in the Moonlight!</h1>
</header>
<main>
<div id="controls">
<form>
<label for="toptext">Top Text:</label>
<input id="toptext" type="text">
<label for="bottomtext">Bottom Text:</label>
<input id="bottomtext" type="text">
<input id="createMemeButton" type="button" value="Give me Meme!">
</form>
</div>
<div id="imagegallery">
<img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
<img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
<img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
<img class="thumbnail" id="lol" src="lol.png" alt="LOL">
<img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
</div>
<div id="memeresult">
<canvas id="imgresult">
</canvas>
</div>
</main>
</body>
</html>
If you try to select an element in a page, you can only do so when it has been created. You cannot select it BEFORE its existence. In this case you try to select a canvas and an image in the HEAD of you page, but these elements are only defined later on in your body.
There are two simple fixes:
Either you move your script code to the end of the page (just before </body>), or you include the code in the $( document ).ready(function() { block, like this:
$(document).ready(function() {
window.onclick = function imgOnClick(e) {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 0, 0);
};
});
Both ways ensure that you try to select the elements when they have been created.
I am trying to create a random gif generator. Very simple in design, just have the gif/img load in and once the user clicks/taps it randomizes and pulls another random image from the array.
For now I would just like to have the image randomize when it is clicked.
Currently it only randomizes when the page is refreshed.
HTML
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<title>Gif Generator - Prototype</title>
</head>
<body>
<h1>Gif Generator - Prototype</h1>
<section>
<p>This image is random</p>
<a href="#" class="click">
<script>
getRandomImage()
</script>
</a>
</section>
</body>
JS
var randomImage = new Array();
randomImage[0] = "images/100.jpg";
randomImage[1] = "images/200.jpg";
randomImage[2] = "images/300.jpg";
randomImage[3] = "images/400.jpg";
function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}
As per your jQuery reference at the top, below is the proposed solution:
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomImage.length);
$(this).html('<img src="'+randomImage[number]+'" />');
});
});
on click method serves the purpose.
in an <img> tag you can add an onclick method
<img src="" alt="Random image" onclick="getRandomImage()">
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
I want to call a function that opens a new link. I want to do this after all my images have been clicked on. How can i achieve this?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1252">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<title>Date med mig - version b
</title>
<script type="text/javascript">
function newWindow()
{
window.location = window.location = "http://www.tv3.se/datemedmig"
}
</script>
</head>
<body>
<h1>Del 2: Date med mig</h1>
<img src="1_c.jpg" id="image1" onclick="this.src='1_o.jpg';" alt="image" />
<img src="2_c.jpg" id="image1" onclick="this.src='2_o.jpg';" alt="image" />
<img src="3_c.jpg" id="image1" onclick="this.src='3_o.jpg';" alt="image" />
<img src="4_c.jpg" id="image1" onclick="this.src='4_o.jpg';" alt="image" />
</body>
</html>
If you are trying to just load a new window as soon as any image is clicked, I think the way that #runfaj said to do it is probably the best, It is my understanding that you want to do it only after ALL images have been clicked on?
If this is the case, here's one option (which is probably not the most efficient)
//Assuming there are 4 images
var hasBeenClicked = [false,false,false,false]
//To be called when each image is clicked
function imageClicked(whichImage){
this.src = "'"+whichImage+"_o.jpg'"
//set this position in the array equal to true
hasBeenClicked[whichImage] = true
// if the array is completely true (every image has been clicked)
// call the newWindow function
if(hasBeenClicked == [true,true,true,true]){
newWindow();
}
}
Then when you create an image:
<img src="1_c.jpg" id="image1" onclick="imageClicked(1);" alt="image" />
you could do it three ways:
jquery:
$('img').click(newWindow);
inline:
<img src=..... onclick="newWindow()" />
regular javascript:
get all the tags with:
var imgs = document.getElementByTagName('img');
then add an event listener to each one (google it for lots of different examples)
Have an onclick function that triggers for each image which sets a new attribute on the image tag. Then run a loop over all images to check that they all have the tag. If so, open new windows. For example:
$('img').click(function() {
$(this).data('was-clicked', true);
var all_clicked = true;
$('img').each(function() {
if($(this).data('was-clicked') != true) {
all_clicked = false;
break;
}
});
if(all_clicked == true) newWindow();
});
Note, this code is not tested and may have syntax/semantic errors. Also, you may not really want the user to click ALL image tags (e.g. banners, backgrounds, etc), so you should modify the jquery selectors to filter only the 'img' tags you're interested in, e.g. $('#my-gallery img')...
I have the following code used for displaying several images changed on hover, but i also would like to add a feature that changes the image automatically if i dont do it manually.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"
/>
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height="79" width="78"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100"
onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
What i want to do is automatically change the images displayed using javascript preferrably. How can i do that?
Use setInterval to run a function that changes the image src.
var x = 0;
var images = new Array("../Pictures/lightcircle2.png","../Pictures/lightcircle.png");
var i = setInterval(auto, 3000);
function auto()
{
x++;
if (x == images.length)
x=0;
document.getElementById('bigImage').src=images[x];
}
This should help you:
http://www.switchonthecode.com/tutorials/javascript-tutorial-using-setinterval-and-settimeout
Sounds like you want a carousel. If so, try this.
Add this to your JavaScript
// The list of images you want to cycle through
var imageRotation = [
'../Pictures/lightcircle.png',
'../Pictures/lightcircle2.png'
];
// The current image being displayed
var currentImage = 0;
// A variable to hold the timer
var t;
// Call this to automatically start rotation. Currently set for a 5 sec rotation
function startCarousel(){
t=setInterval(changeCarousel,5000);
}
// Moves to the next picture
function changeCarousel(){
// Change to the next image
currentImage++;
// If there isn't a next image, go back to the start
if (currentImage == imageRotation.length) currentImage = 0;
// Change the image
document.getElementById('bigImage').src=imageRotation[currentImage];
}
Then modify your function to
function changeImage(img){
// Stops the rotation
clearInterval(t);
// Assigns currentImage to the image they selected
currentImage = imageRotation.indexOf(img);
// Swap the image
document.getElementById('bigImage').src=imageRotation[currentImage];
// Start the rotation again in 10 sec
setTimeout(startCarousel, 10000);
}