The following images are advertisement banners and I want to add a clickable out link on each image as it displays.
var list = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg",
"image6.jpg",
"image7.jpg",
"image8.jpg",
"image9.jpg",
"image10.jpg",
"image12.jpg",
"image13.jpg"
];
var index = 0;
function changeImgs() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('image1');
image.src = list[index];
}
setInterval(function() {
changeImgs()
}, 2000);
window.onload = changeimgs;
<center>
<img id="image1" src="image1.jpg">
</center>
You can put the image inside an a (link) tag and update its href each time you change the image.
<center>
<a id="imgLink" href="image1.jpg"><img id="image1" src="image1.jpg"></a>
</center>
<script>
function changeImgs() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('image1');
image.src = list[index];
document.getElementById("imgLink").href = list[index];
}
</script>
Related
The image is not get loaded by this code any improvement needed?
image url is stored into array for accessing that we required something?
<script>
var images = ["lap2.png", "lap1.png", "tv1.png", "tv2.png"];
var i;
function slides() {
for (i = 0; i < 4; i++) {
setInterval(function() {
document.getElementById('slider').src = "" + images[i];
}, 8000);
}
}
</script>
<!--HTML CODE-->
<p id="slide"><img src="lap1.png" id="slider" onload="this.onload=null;
this.src=slides();" multiple>
</p>
var images = ["1.png", "2.png", "3.png", "4.png"];
let i=0;
setInterval(function() {
i = i < images.length -1 ? i + 1 : 0;
document.getElementById('slide').src = `http://placehold.it/300x150?text=${images[i]}`;
}, 1000);
<img id="slide" src="http://placehold.it/300x150?text=1.png"></img>
I'm trying to shuffle images from array to a specific div.
<body>
<div id="set"></div>
</body>
<script>
var ArrayOfImages = ['bar.jpg',
'foo.jpg',
'koo.jpg',
'too.jpg'
];
var set = document.getElementById("set");
set.addEventListener("click", randomize, false);
ArrayOfImages.forEach(function(image) {
var elem = document.createElement('img');
elem.src = image;
set.appendChild(elem);
});
function shuffle(array) {
let counter = array.length;
// While there are elements in the array`enter code here`
while (counter > 0) {
// Pick a random index
let index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
let temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
}
function randomize() {
set.innerHTML = shuffle(ArrayOfImages);
}
</script>
Now the problem is, that innerHTML only changes the text of the image but cannot set an src to it. Though it does the shuffle.
Any help would be appreciated!
.innerHTML will change the actual HTML, not the images src which is what you want to change.
At the moment you are getting your image elements from your HTML using
document.getElementById('set)
however, you HTML can only have one element with the id set. Thus, you can use the class attribute instead to give multiple elements the identifier of 'set' and get all your image elements using:
document.getElementsByClassName('set')
which will return a collection of your HTML image tags. Now, to change each image's source you can loop over this collection or loop over your shuffled images and set each image's source.
See an example below for further clarification:
var img_elems = document.getElementsByClassName('set'); // Get all elements to set the image to
// To go into your randomize() function:
// Shuffled images returned via your shuffle() function
var shuffled_images = ['https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350', 'https://www.pandotrip.com/wp-content/uploads/2018/09/Seigantoji-Pagoda-and-Nachi-Falls-in-Nacho-Japan.jpg', 'https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg'];
for (var i = 0; i < shuffled_images.length; i++) {
img_elems[i].src = shuffled_images[i]; // Set the image to the src value.
}
/* Ignore this */
img {
height: 200px;
width: 200px;
}
<img src="" class="set" /><br />
<img src="" class="set" /><br />
<img src="" class="set" />
More clean and better way of doing it in vanilla javascript.
The issue was in your shuffle function.
var image_swap_tool = function(options){
var self = this;
self.ArrayOfImages = options.ArrayOfImages;
self.image_container_elem = document.getElementById("set");
self.image_container_elem.addEventListener("click", function(){
self.randomize();
});
}
image_swap_tool.prototype.create_image = function(){
var self = this;
var images = self.ArrayOfImages;
var image_container = self.image_container_elem;
image_container.innerHTML = '';
for(var i=0; i < images.length;i++){
var img = document.createElement('img');
img.setAttribute('src',images[i]);
image_container.appendChild(img);
}
};
image_swap_tool.prototype.shuffle = function(){
var self = this;
var images = self.ArrayOfImages;
let counter = images.length;
while (counter > 0) {
// Pick a random index
let index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
let temp = images[counter];
images[counter] = images[index];
images[index] = temp;
}
//Set new order back to images for next time
self.ArrayOfImages = images;
//Images are shuffled then append them again
self.create_image();
}
image_swap_tool.prototype.randomize = function(){
var self = this;
var image_container = self.image_container_elem;
self.shuffle();
}
var options = {};
options.ArrayOfImages = ['bar.jpg', 'foo.jpg', 'koo.jpg', 'too.jpg'];
var tool = new image_swap_tool(options);
tool.create_image();
Thanks
I've seen this very simple jquery styled carousel on another thread and think it would be ideal for a project I'm doing but wondering how it could be adapted to include captions on the images?
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "image_1.png";
path[1] = "image_2.png";
path[2] = "image_3.png";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",2000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />
Any help or suggestions without having to overhaul the carousel would be greatly appreciated!
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = {img: "image_1.png", sub: "subtitle 1"};
path[1] = {img: "image_2.png", sub: "subtitle 2"};
path[2] = {img: "image_3.png", sub: "subtitle 3"};
function swapImage() {
document.slide.src = path[i].img;
document.subtitle.innerHTML = path[i].sub;
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",2000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />
<p name="subtitle"></p>
It's very simple, sample below, also notice, that demo uses setInterval instead of setTimeout
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/400/200/sports/1";
path[1] = "http://lorempixel.com/400/200/sports/2";
path[2] = "http://lorempixel.com/400/200/sports/3";
function swapImage() {
document.slide.src = path[i];
// for the sake of example, we show urls of pictures
document.querySelector('#slide_caption').textContent = path[i];
if (i < path.length - 1) {
i++;
} else {
i = 0;
}
}
setInterval(swapImage, 2000);
window.onload = swapImage;
<h3 id="slide_caption"></h3>
<img height="200" name="slide" width="400" />
There is one html page and I have a lot of same images. I want to add alot of same images and when I click one I want it to change. If I have one picture these codes OK! but if I have a lot of same pictures How can I do this? Please can you show me a solution way ?
<html>
<head>
</head>
<style>
#im{
margin-left:250px;
margin-right: 0px;
}
</style>
<body>
<script>
function changeImage()
{
element=document.getElementById('im')
if (element.src.match("image"))
{
element.src="picture1.png";
}
else
{
element.src="image1.png";
}
}
</script>
<img id="im" onclick="changeImage()"
src="picture1.png">
</body>
</html>
// store image names here
var images = [
"picture1.png",
"picture2.png",
"picture3.png",
"picture4.png",
"picture5.png",
];
// preload images to reduce lag time
var imageArray = [];
for (var i = 0, len = images.length; i < len; i++) {
imageArray[i] = new Image();
imageArray[i].src = images[i];
}
// the change function
var index = 0;
function changeImage()
{
var element = document.getElementById('im');
element.src = images[index];
index++;
if (index === images.length) index = 0;
}
I would like to sort a div by DESCENDING order based on their image name.
Change From this:
<div id="sort-this-div">
<p><img src="image/1.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/4.jpg"/></p>
<p><img src="image/2.jpg"/></p>
</div>
To This
<div id="sort-this-div">
<p><img src="image/4.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/2.jpg"/></p>
<p><img src="image/1.jpg"/></p>
</div>
Here is a way using pure JavaScript. Check it out here.
var sort = document.getElementById('sort-this-div');
var imgs = sort.getElementsByTagName('img');
var i, img, sorted = [];
for(i = 0; (img = imgs[i]); i++){
sorted.push(img.getAttribute('src'));
}
sorted = sorted.sort(function(a, b){
return +b.match(/\/(\d+?)\.jpg/)[1] - +a.match(/\/(\d+?)\.jpg/)[1];
});
for(i = 0; (img = imgs[i]); i++){
img.src = sorted[i];
}
What this does, it copies all of the src paths for your images into the sorted variable, sorts them, and then updates all of the image's src paths with the new sorted order.
UPDATE
Added the custom sort function to address the problem brought up by #EugeneXa
HTML:
<div id="sort-this-div">
<p><img src="image/1.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/4.jpg"/></p>
<p><img src="image/2.jpg"/></p>
</div>
JavaScript:
/* as option:
function sort(container) {
var images = [],
paragraphs = container.getElementsByTagName('p');
while(!!paragraphs.length) {
var p = paragraphs[0];
images.push(p.getElementsByTagName('img')[0].getAttribute('src'));
container.removeChild(p);
}
images = images.sort();
console.log(images);
for(var i = images.length; i-- > 0;) {
var p = document.createElement('p'),
img = document.createElement('img');
img.src = images[i];
p.appendChild(img);
container.appendChild(p);
}
}*/
function sort(container) {
var images = [],
imageSources = [],
paragraphs = container.getElementsByTagName('p');
for(var i = paragraphs.length; i-- > 0;) {
var img = paragraphs[i].getElementsByTagName('img')[0],
src = img.getAttribute('src');
images.push(img);
imageSources.push(src);
}
imageSources = imageSources.sort();
console.log(imageSources);
for(var i = imageSources.length; i-- > 0;) {
images[i].src = imageSources[i];
}
}
var container = document.getElementById('sort-this-div');
sort(container);
Fiddle
You can use the sort plugin for jquery http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html
Fiddle - http://jsfiddle.net/tariqulazam/PuUn5/
$(document).ready(function(){
$("p img").sort(function(a, b){
return $(a).attr('src') > $(b).attr('src') ? -1 : 1;
});
});