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>
Related
JavaScript file name selector application, only selecting first element.
There are twelve images with a class of foto, each labelled step1.png, step2.png etc. When one of the images is clicked, the name of the image file should be displayed, less the png file extension. For example, step1.png become step1. It all works as expected but only ever displays the first file name no matter which image is clicked on. I would be very grateful for any clues to my error with this code.
<title>Photo Files</title>
<style>
.box {
margin: auto;
width: 200px;
background-color: lightgray;
}
.box p {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Selects image file name</h1>
<div class="box">
<img class="foto" src="images/step1.png" alt="" />
<img class="foto" src="images/step2.png" alt="" />
<img class="foto" src="images/step3.png" alt="" />
<img class="foto" src="images/step4.png" alt="" />
<img class="foto" src="images/step5.png" alt="" />
<img class="foto" src="images/step6.png" alt="" />
<img class="foto" src="images/step7.png" alt="" />
<img class="foto" src="images/step8.png" alt="" />
<img class="foto" src="images/step9.png" alt="" />
<img class="foto" src="images/step10.png" alt="" />
<img class="foto" src="images/step11.png" alt="" />
<img class="foto" src="images/step12.png" alt="" />
<p class="picName">Name of file:</p>
<br />
<hr />
</div>
<script>
var pic = document.querySelectorAll(".foto");
for (var i = 0; i < pic.length; i++) {
pic[i].addEventListener(
"click",
function () {
var fullPath = document.querySelector(".foto").src;
var filename = fullPath.replace(/^.*[\\\/]/, "");
document.querySelector(".picName").textContent =
"File name:" + filename.substring(0, filename.lastIndexOf(".")) ||
filename;
},
false
);
}
</script>
</body>
</html>
your issue come from the line
var fullPath = document.querySelector(".foto").src
that return only the first element that match selector .foto
to solve your issue recover image clicked by :
pass an event parameter to your function
recover target clicked with var target = e.target || e.srcElement;
but instead have 12 eventListeners it's better to have only one on parent element of all your clicked image (in your sample .box but you can create a parent one box-pic in my below sample)
var box = document.querySelector(".box-pic");
box.addEventListener('click', function(e) {
var target = e.target || e.srcElement;
if (target.src) {
var filename = target.src.replace(/^.*[\\\/]/, "");
document.querySelector(".picName").textContent = "File name:" + filename.substring(0, filename.lastIndexOf(".")) ||
filename;
}
});
.box {
margin: auto;
width: 200px;
background-color: lightgray;
}
.box p {
color: green;
font-weight: bold;
}
<h1>Selects image file name</h1>
<div class="box">
<div class="box-pic">
<img class="foto" src="images/step1.png" alt="img1" />
<img class="foto" src="images/step2.png" alt="img2" />
<img class="foto" src="images/step3.png" alt="img3" />
<img class="foto" src="images/step4.png" alt="img4" />
<img class="foto" src="images/step5.png" alt="img5" />
<img class="foto" src="images/step6.png" alt="img6" />
<img class="foto" src="images/step7.png" alt="img7" />
<img class="foto" src="images/step8.png" alt="img8" />
<img class="foto" src="images/step9.png" alt="img9" />
<img class="foto" src="images/step10.png" alt="img10" />
<img class="foto" src="images/step11.png" alt="img11" />
<img class="foto" src="images/step12.png" alt="img12" />
</div>
<p class="picName">Name of file:</p>
<br />
<hr />
</div>
I have 4 image slideshows, and I am having trouble with the Javascript. I have given the div both an id and a class name. The class imageContainer is used in the CSS. Therefore I am using id for the Javascript, but it won't work. I can do this with one image slideshow, but I need to have multiple slideshows on the same page.
The HTML code below is not my actual code, it is just placeholder code I wrote to show what I want to achieve. The Javascript code, however, is my actual code.
I appreciate the help.
function openWin(url) {
aWindow = window.open(url, "Window 1", "width=400, height=400");
}
var numslides = 0,
currentslide = 0;
var slides = new Array();
function MakeSlideShow() {
container = document.getElementsById("Gallery");
for (i = 0; i < imgs.length; i++) {
if (imgs[i].className != "imga") continue;
slides[numslides] = imgs[i];
if (numslides == 0) {
imgs[i].style.display = "block";
} else {
imgs[i].style.display = "none";
}
imgs[i].onclick = NextSlide;
numslides++;
}
}
function NextSlide() {
slides[currentslide].style.display = "none";
currentslide++;
if (currentslide >= numslides) currentslide = 0;
slides[currentslide].style.display = "block";
}
window.onload = MakeSlideShow;
<h2>Gallery 1</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/100" />
<img class="img" src="https://via.placeholder.com/101" />
<img class="img" src="https://via.placeholder.com/102" />
<img class="img" src="https://via.placeholder.com/103" />
</div>
<h2>Gallery 2</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/106" />
<img class="img" src="https://via.placeholder.com/107" />
<img class="img" src="https://via.placeholder.com/108" />
<img class="img" src="https://via.placeholder.com/109" />
</div>
<h2>Gallery 3</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/110" />
<img class="img" src="https://via.placeholder.com/111" />
<img class="img" src="https://via.placeholder.com/112" />
<img class="img" src="https://via.placeholder.com/113" />
</div>
<h2>Gallery 4</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/114" />
<img class="img" src="https://via.placeholder.com/115" />
<img class="img" src="https://via.placeholder.com/116" />
<img class="img" src="https://via.placeholder.com/117" />
</div>
ID's must be unique, so, the best way to do this is get all galleries by their class name and start getting images from there. Note that slides is now a bidimensional array to hold gallery and images, something like:
slides[0] = [image100, image101, image102, image103];
I've added indexes for gallery and image to each picture using dataset propperty, so, you only need to know wich image was clicked instead of trying to get from currentslide. Also, numslides is provided from gallery length.
var slides = new Array();
function MakeSlideShow()
{
var containers = document.getElementsByClassName("imageContainer");
for(var x = 0; x < containers.length; x++) {
// Create gallery
slides[x] = new Array();
var imgs = containers[x].children;
for(var i = 0; i < imgs.length; i++) {
// Add image to current gallery
slides[x][i] = imgs[i];
// Set it's display, note that at least 1 images was added
if(slides[x].length == 1) {
imgs[i].style.display = 'block';
} else {
imgs[i].style.display = 'none';
}
// Add gallery and image info
imgs[i].dataset.gallery = x;
imgs[i].dataset.img = i;
// Add onclick event, but we need to send current image
imgs[i].onclick = function() {
nextSlide(this);
}
}
}
}
// This function needs to know wich img was clicked
function nextSlide(pic)
{
// Get gallery and image from dataset to know what to do
var gallery = pic.dataset.gallery;
var img = pic.dataset.img;
// Hide current image
slides[gallery][img].style.display = 'none';
// Search for next
img ++;
// No more images availabel, go to first
if(img == slides[gallery].length) {
img = 0;
}
// Show next image
slides[gallery][img].style.display = 'block';
}
window.onload = MakeSlideShow;
<h2>Gallery 1</h2>
<div id="Gallery1" class="imageContainer">
<img class="img" src="https://via.placeholder.com/100" />
<img class="img" src="https://via.placeholder.com/101" />
<img class="img" src="https://via.placeholder.com/102" />
<img class="img" src="https://via.placeholder.com/103" />
</div>
<h2>Gallery 2</h2>
<div id="Gallery2" class="imageContainer">
<img class="img" src="https://via.placeholder.com/106" />
<img class="img" src="https://via.placeholder.com/107" />
<img class="img" src="https://via.placeholder.com/108" />
<img class="img" src="https://via.placeholder.com/109" />
</div>
<h2>Gallery 3</h2>
<div id="Gallery3" class="imageContainer">
<img class="img" src="https://via.placeholder.com/110" />
<img class="img" src="https://via.placeholder.com/111" />
<img class="img" src="https://via.placeholder.com/112" />
<img class="img" src="https://via.placeholder.com/113" />
</div>
<h2>Gallery 4</h2>
<div id="Gallery4" class="imageContainer">
<img class="img" src="https://via.placeholder.com/114" />
<img class="img" src="https://via.placeholder.com/115" />
<img class="img" src="https://via.placeholder.com/116" />
<img class="img" src="https://via.placeholder.com/117" />
</div>
I have the following JavaScript function where I am counting the total divs with a classname, but not all must be changed, that is specified with the amount param. So there are 4 classes, so the each counts the classes and then the for loop changes them according to the amount param.
Yet this doesn't seem to work, see commented out version too -
function changeImages(change, amount) {
var $projImg = $('.proj-img');
$.each($projImg, function(i) {
$(this).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
});
// $.each($projImg, function (j) {
// for(var i = 0; i < amount; i++){
// $(this).attr('src', 'src/img/' + change + 'Slide' + (i) + '.png');
// }
// });
}
You could use an array and then slice it so that it contains no more than the amount number of elements, no jQuery required:
function changeImages(change, amount) {
const projImgs = [...document.querySelectorAll('.proj-img')]
.slice(0, amount);
projImgs.forEach((img, i) => {
img.src = 'src/img/' + change + 'Slide' + (i + 1) + '.png';
});
}
Use the :lt() selector
var amount = 5,change = '';
$('.proj-img:lt('+amount+')').map(function(i,el){
$(el).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
});
console.log($('.proj-img'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
Just use jQuery's .slice():
function changeImages(amount) {
const $matches = $('.foo').slice(0, amount);
$matches.addClass('bar');
}
changeImages(10);
.foo {
border-bottom: 8px solid red;
}
.bar {
border-color: cyan;
}
.foo:hover {
border-color: black;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your JS code would then look like this:
function changeImages(change, amount) {
$('img').slice(0, amount).each((i, el) => {
el.setAttribute('src', `https://place-hold.it/200x200&text=${ change }-${ i + 1 }`);
});
}
changeImages('UPDATED', 3);
body {
margin: 0;
}
img {
float: left;
max-width: 20vw;
}
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also, regarding :lt(), keep in mind that's not part of the CSS specification, as stated in the docs:
Because :lt() is a jQuery extension and not part of the CSS specification, queries using :lt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(0, index) instead.
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
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/