I want to use onclick more images with javascript - javascript

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

Related

Update existing pages with URL on click image

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>

javascript: image change for certain times

I found this script :
<html>
<head>
<script type="text/javascript">
var paths = ['assets/img/head.png','assets/img/tail.png'];
var curPic = 1;
var imgO = new Array();
for(i=0; i < paths.length; i++) {
imgO[i] = new Image();
imgO[i].src = paths[i];
}
function swapImage() {
curPic = (++curPic > paths.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage,200);
}
window.onload=function() {
imgCont = document.getElementById('img');
swapImage();
}
</script>
</head>
<body>
<div>
<img id="img"/>
</div>
</body>
</html>
this repeate changing the pictures for unlimited time, but how do I change this that it repeats for e.g. 5 times only ?
Just use a tracker variable.
var to, times = 0; //<-- init the tracker, and a var for the timeout
function swapImage() {
if (times == 5) {
clearTimeout(to); //<-- if already 5 times, cancel timeout and...
return; //<-- ...quit
}
curPic = (++curPic > paths.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
to = setTimeout(swapImage,200); //<-- make the TO accessible via our var
times++;
}

need a push in the right direction with js/php gallery

I'm trying to create an image gallery. Most of it is working as intended, however, the thing I want to change on this gallery is so that when I click on the next picture or previous picture, I want the thumbnails to show the next 8 pictures. At the moment it's showing the next picture
PHP code:
<?php
$pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE);
if(count($pics)) {
rsort($pics);
foreach($pics as $pictures) {
echo "<a href='$pictures' target='_blank'><img class='Gallery' src='$pictures'></a>";
}
echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">❮</div></a>';
echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">❯</div></a>';
echo '</div>';
echo '<div class="thumbs_container">';
foreach(array_slice($pics, 1) as $thumbs)
if ($thumb++ < 8){
echo "<a href='$thumbs' target='_blank'><img class='thumbs' src='$thumbs'></a>";
}
} else {
echo "Sorry, no images to display!";
}
?>
The code is showing 1 thumbnail which updates correctly, but I want 8 thumbnails at least..
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("Gallery");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
var thumbIndex = slideIndex +1;
showThumbs(thumbIndex);
function plusThumbs(t){
showThumbs(thumbIndex += t);
}
function showThumbs(t){
var g;
var getThumb = document.getElementsByClassName("thumbs");
if (t > getThumb.length) {thumbIndex = 1}
if (t < 1) {thumbIndex = getThumb.length};
for (g = 0; g < getThumb.length; g++){
getThumb[g].style.display = "none";
}
getThumb[thumbIndex-1].style.display = "block";
}
}
Any ideas on how I achieve this?
I hope, I understood your idea and what you want to do. Anyway here is my advises. At first I would like to say, that building html tags using php is not even a good idea. It's always a better way to separate code, instead of making some kind of mix. So, I'll advice you to use your php script only to find all images and send an array of src to client side (in JSON format). When you get an array of src, you could make a gallery only using javascript or jQuery. With jQuery you could make a simple GET Ajax Request, in order to get an array of img's src. Then you could init your gallery.
The gallery you can make in this way:
So you have an id an change it by clicking prev or next buttons. After clicking you regenerate the current image and thumbs container.
Here is the working example (jQuery):
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="galery">
<div class="image_wrapper">
<button class="prev">Prev</button>
<img src="" alt="curr_image" class="curr_image" />
<button class="next">Next</button>
</div>
<div class="thumbs_wrapper"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var fakeSrc =
['src1', 'src2', 'src3', 'src4', 'src5', 'src6','src7', 'src8', 'src9', 'src10', 'src11'];
var cId = 0;
var thumbs_wrapper = $('.thumbs_wrapper');
var curr_image = $('.curr_image');
var prev = $('.prev');
var next = $('.next');
var updateThumbs = function() {
var max = ( (cId + 9) > fakeSrc.length) ? fakeSrc.length : cId + 9;
thumbs_wrapper.html('');
for (var i = cId+1; i < max; ++i) {
var img = document.createElement('img');
img.className = 'thumb_image';
var src = fakeSrc[i];
img.alt = src;
img.src = src;
thumbs_wrapper.append(img);
}
}
var setCurrImg = function() {
curr_image.src = fakeSrc[cId];
curr_image.prop('src', fakeSrc[cId]);
curr_image.prop('alt', fakeSrc[cId]);
}
var updateGalery = function() {
setCurrImg();
updateThumbs();
}
prev.click(function() {
--cId;
if (cId < 0) cId = 0;
updateGalery();
});
next.click(function() {
++cId;
if (cId > fakeSrc.length - 1) cId = fakeSrc.length - 1;
updateGalery();
});
updateGalery();
});
</script>
</body>
</html>
Hope, that I've helped you to find the solution.

for(){} and setInterval() doesn't work

I want to picture 5s change next picture, but I can't make this work.
<div class="g-carousel" id="m-carousel">
<img src="imag/banner1.jpg" >
<img src="imag/banner2.jpg" >
<img src="imag/banner3.jpg" >
<div class="button">
<i class="checked"></i><i></i><i></i>
</div>
</div>
<script type="text/javascript">
function showpic() {
var carousel = document.getElementById("m-carousel")
var pciture = carousel.getElementsByClassName("pciture");
for (var i=0 ; i < pciture.length; i++)
if (i>2) i=0;
pciture[i].style.display="none";
pciture[i+1].style.display="block";
}
window.onload=function function_name(argument) {
setInterval("showpic()",5000);
}
</script>
Working jsfiddle
function showpic() {
var carousel = document.getElementById("m-carousel");
var carouselLength = carousel.getElementsByTagName("a").length;
var pciture = carousel.getElementsByClassName("pciture");
if (i>=carouselLength-1){
pciture[i].style.display="none";
i=0;
pciture[i].style.display="block";
i--;
}else{
pciture[i].style.display="none";
pciture[i+1].style.display="block";
}
i++;
}
var i = 0;
setInterval(showpic,2000);
You need to have a global counter:
var counter = 0;
function showpic() {
var carousel = document.getElementById("m-carousel")
var pciture = carousel.getElementsByClassName("pciture");
// Hide all the pictures.
for (var i=0 ; i < pciture.length; i++)
{
pciture[i].style.display="none";
}
// Show the picture based on the counter.
pciture[counter].style.display="block";
// Increment the counter ready for next time.
counter++;
// Check if the counter needs to loop back.
if(counter >= pciture.length)
counter = 0;
}
window.onload = function() {
setInterval(showpic, 5000);
}
Here is a working example
Maybe it would help if you change
window.onload=function function_name(argument) {
to
window.onload=function(argument) {
Hope that helps.
Regards
P.S. Live long and prosper :-)

find all images on page with specific url and delete it using java script

im trying to find all images on page with a specifc url /images/icons/bollWhiteDown.gif
and delete or change them can it be done?
and how?
thank you
To remove the IMG tags you can do something like this:
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute("src") == "/images/icons/bollWhiteDown.gif") {
imgs[i].parentNode.removeChild(imgs[i]);
}
}
Based on OP's comment:
<script type="text/javascript">
window.onload = function() {
var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; i++) {;
if (imgs[i].getAttribute("src") == "/images/icons/bollWhiteDown.gif") {
imgs[i].parentNode.removeChild(imgs[i]);
}
}
}​
</script>
try this
var images = document.getElementsByTagName('img');
for (var img in images){
if(images[img].src == '/images/icons/bollWhiteDown.gif'){
images[img].parentNode.removeChild(images[img])
}
}
You can do something like this:
var imgs = document.getElementesByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src == "/images/icons/bollWhiteDown.gif") {
imgs[i].src = "somethingelse";
}
}

Categories

Resources