call on function when all images are clicken on - javascript

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')...

Related

Chrome: Changing img src repeatedly causes chrome to request image again?

Same title. I'm not sure if this is a browser bug or behavior, see below example:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var srcs = [
'https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1',
'https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG',
//
// 'data:image/png;base64,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',
// 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+rrt20+0mnml8qCJC7ux4VQMkmvz3+Iv7Zfie68ZzPpsrrokNwwhgibYzx543H19+3vX6T694cTVdGvrJ1ylxC8RHsVIr4E+FHgH4beIPDOnw63YR2+s7nZ5N7GSXJLYx6gdvQV+hYnMY4aj7W19eh+QcO5W8wrypytoup13wr/bf8Ma5Da6X4ggudN1M/L50nzwv9W4IOPbHvX0pYzW+t6fb31owkt7iMSRyDupGRXxb8Xfht4Tg+H0mpeCLt9QitL9ZDDKAWjWT92wX5Q3LBDg9lyK+rv2cb/S9Y+FejW1hqVrqFxZwKl1Fbyb2tpGG7y35yGGcc+lXgM0jjIOVrNP5k8RZEsslFw2fzX3n0l9jUjpXwV+0Nc2PwF+MM81v4bS6jvp01O3nQlSivkSKMA8eZv7cAgcZr7mXW4yPviviL9tzQbfXPF+ma0/iK7uJbSNo1tIXwtovy78L9xgcZOQSGPJxgL8RnmKhgcI6mI2bS83+Kv8vU93hiv9Wx6lHVNHAeOPjXcQeD97aZY6fMZ0+wwKAEuGbBBYccDDEk44UnAr0T/gn7qFzqU/iuC306ZdHifc1+7ptknJHRVJHKjPykgc5PIrJ+FXwr0DxPr0Oo3mj6r4znlgWMPrEUJso3H8Q/u9Tk4bHGOnP2V4O8CaH4St0i0jR7DSnEWx106AQx4zuICjjGSeTz61+NYbxJwOV4yOGdOXLJ+9LTRar4d/PXofc8QUJ5tTfJpZaJ+p/9k=',
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFVUlEQVRYw8WXa2yTVRjHf+/etm/b9bJbt25zF8pgdzYdBUaQASIYJYjEaFSiRgPEAEYSEo1+0vjdkGhCTIjIB2+JkMAEZH7gNsIcsCsblwJzF7aua7e263p5u75+GGIWxujojOfr83/O+Z1znss5ws7P31P4H4dqLuJgIEj35Rv03OjF6/aBomBIMWDNz6K0ppiM7PT/BkCJKVw+00JbYweT0clpNo9zFI9zlK7m6xRV2nh200o0Ws38AUxOTnLuWCM3Wx2PnczRcQf3kIcX396IwZScOICiKJw/fnHa4oIAJr0WbyBEviWFN9bWsMSWwz23l6ON7Vzs6qH+0Ele2bEZKY6TmBVguN/FjZZbqEWRbetrWFVuozgvE4vZgNsXwJysQyUm3Vfnsbm2gms9g2z/6meunm2lduOyxABuX7uLIMC3e19jZdmCabb0RxxxeWE2H22t44sf/+CZ1VVIOmlWgKTZjO5BN0sX5T20+OPG8pIC5IjMXzf7HqudFcDr8WHSa+ecWtnpZtSiOJWqiQDEYgreQGjOABqVSHmBlWAgmFgMqDVq0s1Td+2bCHG23cHQqJ+cNDMv2EsQk6b4224P8NufXQiCwLrqRSwvKWBtdRHHb/UlBqA3aKmrXIg3EORA/UVCEZnhsXHOBBwkazWsqSpCURS+PnaBHqcHa6qRysJsFEVhy8pKTvc5EwMwpZkozc/CnKzDnKzlu9+b+KdxSGoVa6qKAFiyIJtQROZmv4svfziNvTgfa5qJ3VtW0xqNPjnAwowUMu5fgb04n/27tqKXNBRkppKbYb5fmAT2bFk9o39LYweq5aVMPnEMqEQ0qilJzaK8OQfj6+uX8os/8ORZsKGuGqNeeuJWK+ikxGJgUFEQBGFGW2fPIIcbmqkozKbPNcZnbz7/kGZEjiZWB0bkKI5geEabfyJMZoqR0fEgi5+yzKgRhXlox2OPiOLaskJqywpn9W0fDyYO0OQLUG3Qo7lfdNy+AAdPNZGZYiAUkQlFooRkGYvJwKYV5WSlGgEIx2IMReTEAWRF4fpEiCUGPQCpRj1rq4vQqERy0s1IahWSWsXdITcpBt0DP1ckGlegJsUj6g4EcY76pxwEAfvifKpsuVzovMP+o+cAKMnLQlL/u59hWY4vU+J9FQebuinLTufllZUkCbNHV3evk16dhmuh8PycAEBeaQGfHKznw2+OEAzPvrtUow6jJr42HvezPJyaiyUrk4arN9j46QFWVdhISdYyHgwzPDaOWiXS4hhg50u1vPWcnU6vFvDOD8C9u4MoPjfvbH+fHw4d5l7/AL+eb3tIZ9RJrKqw0RKQGImq8Q9PYLDoHlnM4roCOSJzqaGZrvZOjCYT23d9wOZXt2I0GafpcjPMfP/xNjyGHG6F1ACc+qmBzqbu+E9AURQ8Tg8913tx9rsI+AL4x8aRwzKjqjEi4TAaSaJmmZ2KqiV0tXfg7e8hVy/w7qY6rsVSGQuJD+bT6XVcPHmJ4QEXZUuLycrLJClp+p5VTQ3NuIdGCYfC+Dx+QhMzP8Gi0SjtrW0sXT711JYkieLyMq74fGRZM2h0+AjqFZJMJiRpqgllWq0M9PXjaL+No/022mQttrJCip9ehCUnA0EQEIC4P6dGk4nd+/YiSRIdrW2crj+B3+9HJYqULijAF5jA5fVRt34d9toVtDRf4fiRozPOlW5No8xeMjcAgELbArQ6HW7XCO6REWKxGJVFNrzjAXqHnIiiSF5BPhkWC6npaTScODV/v2OAnjt3Ka0oZ/e+vbiGhzl74iQSChtW2DlUf4ode3aRlW0lFosxOHDvsfP9DZRm+jqPr69OAAAAAElFTkSuQmCC',
// 'data:image/jpeg;base64,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',
];
var $x = $('#x');
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$x.attr('src', srcs[i]);
}, 100);
});
</script>
</head>
<body>
<img id="x" width="50" height="50">
</body>
</html>
Every few random seconds, the images are requested again, although fetched from disk cache, but request is happening. If you resize window, the requests may happen even more frequently.
Check JS Fiddle
I tried using base64 images instead of URLs, still same thing. This is an issue because the visible image may glitch/flicker when request occurs.
EDIT
How to prevent chrome from requesting the same image again?
This is the right behavior as "Memory Cache" stores and loads resources to and from Memory (RAM). So this is much faster but it is non-persistent. Content is available until you close the Browser.
"Disk Cache" is persistent. Cached resources are stored and loaded to and from disk.
For more info on how Chrome caches works (memory and disk), please refer to this link.
Placing multiple imgs, hide all and show only 1 at a time, prevents Chrome from requesting same images. With this approach, each image is requested only once.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$('.img').hide();
$('#img' + i).show();
}, 100);
});
</script>
</head>
<body>
<!-- using multiple images with display: none, src is fixed in HTML (not changed by JS) -->
<img id="img0" class="img" width="50" height="50" style="display: none;" src="https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1">
<img id="img1" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG">
<img id="img2" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG">
<img id="img3" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG">
</body>
</html>
JS Fiddle

How can I prevent jQuery prepend() removing the HTML?

When I click on the anchor tag, the image shifts from div#left to div#right. I want the image to be copied. Is this the default behaviour of prepend()? How can I avoid this problem?
The image is just a placeholder for a big div with many children.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Scripts/JavaScript.js"></script>
</head>
<body>
<div id="left" style="float:left">
<img src="Images/Rooms/K1.jpg" alt="Alternate Text" height="200" width="200"/>
</div>
<div id="right" style="float:right"></div>
<a id="addImageToRight" href="#">Add Image toRight</a>
</body>
</html>
The jQuery is:
$(document).ready(function () {
$("#addImageToRight").click(function () {
var $image = $("#left img");
var imgCopy = $image;
$("div#right").prepend(imgCopy);
});
});
Is this the default behaviour of prepend()?
Yes. Putting a DOM node somewhere in the document requires removing it from wherever in the document it is already. It can't exist in two places at the same time.
var imgCopy = $image;
That copies the value of $image to imgCopy. The value is a reference to the object. (In JavaScript, variables can only every hold references to objects).
How to avoid this problem?
Create a copy of the DOM node. Call .clone() on the jQuery object and prepend the return value.
var imgCopy = $image.clone();
You need to update your code from
var $image = $("#left img");
var imgCopy = $image;
to
var imgCopy = $("#left img").clone();
For reference - http://plnkr.co/edit/R5yjTY06dKkqccwmxS62?p=preview
Perhaps take a look at jQuery's clone() to create a copy of the img element.

Javascript - Changing an image with variables

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>

change to next image automatically

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);
}

On site load, how do you wrap all images in a link dynamically using Javascript?

I have barely any experience working with DOM and using Javascript, and I have a very specific task that I'm trying to accomplish.
Let's say I have an image in my HTML:
<img src="foo.jpg" />
When the site loads, I want to take that image (all images in the document, actually), and wrap them in a link:
<img src="foo.jpg" />
What could I use to accomplish this? Google hasn't turned up much for me with regards to this specific task. On load, I can access and iterate all the images in the document... but I'm not sure where to go from there in order to wrap the image in a link.
You could try something among the lines:
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0, image = images[i]; i < images.length; i++) {
var wrapper = document.createElement('a');
wrapper.setAttribute('href', 'http://www.foobar.com');
wrapper.appendChild(image.cloneNode(true));
image.parentNode.replaceChild(wrapper, image);
}
};
I would recommend you using the excellent jQuery library to manipulate the DOM:
$(function() {
$('img').wrap('<a href="http://foo.com">');
});
In the following example, all images become wrapped in a link to their source. So if an image has the src of //example.com, it will be wrapped with an anchor(link) to //example.com.
Of course you don't want some of the images linked so you can add the data attribute nolink, like so:
<img src="//lorempixel.com/400/200 data-nolink />
<!DOCTYPE html>
<html lang="en-GB">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->
<script>
$(function() { //Run once DOM is ready
$('img:not([data-nolink])').each(function() { //Iterate through each img element
$(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
});
});
</script>
<style>
h3 {
text-align: justify;
}
img {
width: 200px;
margin: 24px;
}
</style>
</head>
<body>
<h3>These images are generated randomly by loremPixel; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
<hr />
<br />
<img src="//lorempixel.com/400/200?samp1" />
<img src="//lorempixel.com/400/200?samp2" />
<img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
<img src="//lorempixel.com/400/200?samp4" />
<img src="//lorempixel.com/400/200?samp5" />
<img src="//lorempixel.com/400/200?samp6" />
</body>
</html>

Categories

Resources