Develop Reference

Trying to make a simple slideshow with setinterval() in Js

No onClick, just automatic change of image and caption every second.
Here's the code I have so far:
HTML:
<div class="col-md-6">
<h2>Fishing Slide Show</h2>
<h4 id="caption">Casting on the Upper Kings</h4>
<img id="slide" src="images/casting1.jpg" alt="" height="200px">
<div id="slides">
<img src="images/casting1.jpg" alt="Casting on the Upper Kings" height="200px">
<img src="images/casting2.jpg" alt="Casting on the Lower Kings" height="200px">
<img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn" height="200px">
<img src="images/fish.jpg" alt="Catching on the South Fork" height="200px">
<img src="images/lures.jpg" alt="The Lures for Catching" height="200px">
</div>
</div>
And this is my Javascript:
var img_array = ["images/casting1.jpg", "images/casting2.jpg"
,"images/catchrelease.jpg", "images/fish.jpg"
,"images/lures.jpg"];
var alt_array = ["Casting on the Upper Kings", "Casting on the Lower Kings",
"Catch and Release on the Big Horn", "Catching on the South Fork",
"The Lures for Catching"];
var currImg = 0;
var currAlt = 0;
function slideShow();{
img.src = img_array[index++, img_array.length];
img.alt = alt_array[index++, alt_array.length];
//document.getElementById("slides").src = img_array[currImg];
//document.getElementById("slides").alt = alt_array[currAlt];
}
let stop = setInterval(slideShow, 1000);

Here's a simple slideshow I made.
You simply have the first slide have the active tab, then you use .nextElementSibling to get the next slide.
function runSlideshow() {
const current = document.querySelector(".slide.current");
current.classList.toggle("current");
current.nextElementSibling ?
current.nextElementSibling.classList.toggle("current") :
clearInterval(slideshow);
}
const slideshow = setInterval(runSlideshow, 2000);
.slide {
height: 200px;
display: none;
}
.slide.current {
display: block;
}
<div id="container">
<img class="slide current" src="https://cataas.com/cat/6136c137ebad510011b54b90" />
<img class="slide" src="https://cataas.com/cat/6136be59ebad510011b54b88" />
<img class="slide" src="https://cataas.com/cat/61307aa542fcca001bb841f5" />
<img class="slide" src="https://cataas.com/cat/6123cb0fe8503700118bdb62" />
<img class="slide" src="https://cataas.com/cat/6120c8103a342d0013920e23" />
</div>

Random logo in a grid

I would like to create in jQuery a "wall" of logo like on the https://www.squarespace.com/ website at the "TRUSTED BY THE WORLD’S BEST" section.
The same thing : 8 logos with fade-in fade-out.
Can I have some help please ?
<div class="client-logos-grid">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
I begin with this : https://jsfiddle.net/vc43mzxL/1/
$('document').ready(function() {
var curIndex = 0;
var src = ['http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;
$(document).ready(function() {
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2) {
if (fadeOut2) {
setTimeout(fadeOut, waitTimeInMilliseconds);
} else {
var index = Math.floor((Math.random() * src.length))
if (curIndex == index) {
index++;
if (index >= src.length) {
index -= 8;
}
}
curIndex = index;
$(".client-logo img").attr("src", src[index]);
fadeIn();
}
}
function fadeOut() {
$(".client-logo img").fadeTo(fadeTimeInMilliseconds, 0, function() {
switchImageAndWait(false);
});
}
function fadeIn() {
$(".client-logo img").fadeTo(fadeTimeInMilliseconds, 1, function() {
switchImageAndWait(true);
});
}
});

$(function() {
//calling every 20 millseconds
setInterval(function() {
changeLogo();
}, 200);
});
function changeLogo() {
//taking first active logo
var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)');
var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)');
shownLogo.fadeOut(200, function() {
shownLogo.addClass('hidden');
//check if its the last logo in the row
if (shownLogo.next('.client-logo').length > 0) { // not last
shownLogo.next('.client-logo').fadeIn(400, function() {
shownLogo.next('.client-logo').removeClass('hidden');
});
} else { // last
//move to first
$('.client-logo:first').fadeIn(400, function() {
$('.client-logo:first').removeClass('hidden');
});
}
});
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="client-logos-grid">
<img src="" alt="">A
<img src="" alt="">B
<img src="" alt="">C
<img src="" alt="">D
<img src="" alt="">E
<img src="" alt="">F
<img src="" alt="">G
<img src="" alt="">H
</div>
Are you looking for something like this?

i inspect their web and they use their custom js to animate the logo transition.
you can also do this by using simplefadeslideshow
<div id="slideshow">
<li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the last image in the slideshow -->
<li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
<li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
<li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow -->
</div>
and bind the plugin to the HTML structure you have created
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
the demo web can be seen here hope this helps

Changing the picture description in the preview

Im curently creating a picture gallery for my project in school. I came across the problem that i don't know how to add a picture description that will only show under the big preview picture and not next to the small pictures at the top. Every small picture will have a different description. I tried some stuff myself but i failed miserably, Im still new to all of this :)
Any solutions to that problem?
<head>
<title>Gallery</title>
<link href="galery.css" rel="stylesheet" type="text/css">
</head>
<body background="cosmic.jpg">
<div class="gallery" align="center">
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png" />
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
</div>

<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
or
<div class="smallpics">
<img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
function showInBig(element){
document.getElementById('bigpic').setAttribute('src',element.getAttribute('src'));
document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}
Given that alt of the small images are the descriptions.

The first thing is to clean up your HTML and separate out the JavaScript. This has a number of benefits. It keeps your HTML and JS separate without muddying one with the other.
All of your onclick code can be handled thus:
var big_pic = document.querySelector('#bigpic');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
}, false);
Now, let's consider adding a description. The first question is, how are you going to store these, and in relation to the images?
An obvious solution is to store them in a data attribute on the pictures elements. So just as we read the src from the clicked pic's element, we'll read its description from the same source.
So our elements become:
<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />
Then you're going to need a description placeholder in the big picture area, so add a paragraph.
Finally, change the above JS code to factor in the description also:
var
big_pic = document.querySelector('#bigpic'),
big_pic_descr = document.querySelector('.bigpic p');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
big_pic_descr.innerHTML = evt.target.getAttribute('data-descr');
}, false);

Could be done in 2 ways, first by making use of data- attribute (1)
jsFiddle 1
var pics = document.querySelectorAll('.smallpics img'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src and data-desc attributes to the function.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), $this.getAttribute('data-desc'));
}
function theClickFunction($th, $src, $desc) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
descP.innerHTML = $desc;
});
}
body { margin: 0; padding: 0; }
.smallpics img { width: 19%; cursor: pointer; }
#bigpic { display:none}
<div class="gallery" align="center">
<div class="smallpics">
<img id="pic1" src="//dummyimage.com/300x100?text=pic1" data-desc="description of picture 1" />
<img id="pic2" src="//dummyimage.com/300x100?text=pic2" data-desc="description of picture 2" />
<img id="pic3" src="//dummyimage.com/300x100?text=pic3" data-desc="description of picture 3" />
<img id="pic4" src="//dummyimage.com/300x100?text=pic4" data-desc="description of picture 4" />
<img id="pic5" src="//dummyimage.com/300x100?text=pic5" data-desc="description of picture 5" />
<img id="pic6" src="//dummyimage.com/300x100?text=pic6" data-desc="description of picture 6" />
<img id="pic7" src="//dummyimage.com/300x100?text=pic7" data-desc="description of picture 7" />
<img id="pic8" src="//dummyimage.com/300x100?text=pic8" data-desc="description of picture 8" />
<img id="pic9" src="//dummyimage.com/300x100?text=pic9" data-desc="description of picture 9" />
<img id="pic10" src="//dummyimage.com/300x100?text=pic10" data-desc="description of picture 10" />
</div>
<hr>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<p id="description"></p>
</div>
The other way is by using some hidden element, I used <ul> with its lis here but it could be divs or p etc.., while this way adds extra markup to the page it suits better when you have HTML, styled and/or long descriptions rather than just normal text.
jsFiddle 2
var pics = document.querySelectorAll('.smallpics img'),
DescLis = document.querySelectorAll('#hiddenDescs li'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src attribute.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), i);
}
function theClickFunction($th, $src, i) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
// get the inner html of the corresponding li and inject it as innerHTML
// of the descreption p
descP.innerHTML = DescLis[i].innerHTML;
});
}
(1) Using alt attribute, as in #Thuin's answer, rather than data-* is better because: This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.

Onclick function does nothing in image gallery

I'm learning to make image gallery and when i click on thumbnail, it does nothing. Bellow is my code, I'm trying for some tome to make it work, can I get some help ?
HTML :
<script src="galerijaSlika.js"></script>
<img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg">
<div id="sveSlike" onClick="promjeniSliku(event)">
<img src="Slike/infogamer_galerija/info1.jpg">
<img src="Slike/infogamer_galerija/info2.jpg">
<img src="Slike/infogamer_galerija/info3.jpg">
<img src="Slike/infogamer_galerija/info4.jpg">
<img src="Slike/infogamer_galerija/info5.jpg">
<img src="Slike/infogamer_galerija/info6.jpg">
<img src="Slike/infogamer_galerija/info7.jpg">
<img src="Slike/infogamer_galerija/info8.jpg">
<img src="Slike/infogamer_galerija/info9.jpg">
<img src="Slike/infogamer_galerija/info10.jpg">
<img src="Slike/infogamer_galerija/info11.jpg">
<img src="Slike/infogamer_galerija/info12.jpg">
</div>
Javascript :
function promjeniSliku(event){
event = event || window.event;
var trazeniElement = event.target || event.srcElement;
if(trazeniElement == "IMG"){
document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src");
}
}

Your typo is:
if(trazeniElement == "IMG"){
The correct test must be:
if (trazeniElement.tagName == "IMG") {
For details see MDN
function promjeniSliku(event){
event = event || window.event;
var trazeniElement = event.target || event.srcElement;
if (trazeniElement.tagName == "IMG") {
document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src");
}
}
<img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg">
<div id="sveSlike" onClick="promjeniSliku(event)">
<img src="Slike/infogamer_galerija/info1.jpg">
<img src="Slike/infogamer_galerija/info2.jpg">
<img src="Slike/infogamer_galerija/info3.jpg">
<img src="Slike/infogamer_galerija/info4.jpg">
<img src="Slike/infogamer_galerija/info5.jpg">
<img src="Slike/infogamer_galerija/info6.jpg">
<img src="Slike/infogamer_galerija/info7.jpg">
<img src="Slike/infogamer_galerija/info8.jpg">
<img src="Slike/infogamer_galerija/info9.jpg">
<img src="Slike/infogamer_galerija/info10.jpg">
<img src="Slike/infogamer_galerija/info11.jpg">
<img src="Slike/infogamer_galerija/info12.jpg">
</div>

I got this working. I had to change the images around, and to get a larger item in the galeria image I had to do a string replace, feel free to delete that part.
function promjeniSliku(event) {
var target = event.target;
if (target.tagName == 'IMG') {
var src = target.src.replace(/100/g, '500');
document.getElementById('glavnaSlika').src = src;
}
}
<img id="glavnaSlika" src="//lorempixel.com/500/500/cats/1">
<div id="sveSlike" onclick="promjeniSliku(event)">
<img src="//lorempixel.com/100/100/cats/1" alt="" />
<img src="//lorempixel.com/100/100/cats/2" alt="" />
<img src="//lorempixel.com/100/100/cats/3" alt="" />
<img src="//lorempixel.com/100/100/cats/4" alt="" />
<img src="//lorempixel.com/100/100/cats/5" alt="" />
<img src="//lorempixel.com/100/100/cats/6" alt="" />
<img src="//lorempixel.com/100/100/cats/7" alt="" />
<img src="//lorempixel.com/100/100/cats/8" alt="" />
<img src="//lorempixel.com/100/100/cats/9" alt="" />
<img src="//lorempixel.com/100/100/cats/10" alt="" />
<img src="//lorempixel.com/100/100/cats/11" alt="" />
<img src="//lorempixel.com/100/100/cats/12" alt="" />
</div>

How do I change image B's src to Image A's src when Image A is clicked with Javascript?

Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.

Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>

This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />

Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/