So the window's ID is moreInfo and the display is set to none in the CSS. The showMore function works to show the window, but when I click the close icon, the window is not disappearing.
HTML:
<div id="moreInfo">
<div class="iconContainer">
<img onclick = "javascript:close()" id="closeicon" src="images/closeicon.png"/>
</div>
<div class="infoContent">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/stationary.png" alt="image">
</div>
</div>
<!-- Page content -->
<div class="imageSection" id="Charcoal">
<h2>Soth Charcoal</h2>
<div class="images">
<img onclick="javascript:showMore()" id = "thumbnailimg" src = "images/charcoal.png" alt="image">
</div>
</div>
javascript file:
function showMore(){
document.getElementById("moreInfo").style.display= "block";
}
function close(){
document.getElementById("moreInfo").style.display = "none";
}
close is a reserved word. change the function name to myClose
function showMore(){
console.log('show')
document.getElementById("moreInfo").style.display= "block";
}
function myClose(){
console.log('close');
document.getElementById("moreInfo").style.display = "none";
}
<div id="moreInfo">
<div class="iconContainer">
<img onclick = "javascript:myClose()" id="closeicon" src="images/closeicon.png"/>
</div>
<div class="infoContent">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/stationary.png" alt="image">
</div>
</div>
<!-- Page content -->
<div class="imageSection" id="Charcoal">
<h2>Soth Charcoal</h2>
<div class="images">
<img onclick="javascript:showMore()" id = "thumbnailimg" src = "images/charcoal.png" alt="image">
</div>
</div>
Related
So basically what I'm trying to do is that I'm making a component like WordPress uploading images. When I upload an image my tab section automatically changes to the second tab on uploading and it'll stack there in my images gallery 'div'.I have uploaded the image to another tab section but redirecting isn't performed I have to click other tab to see the uploaded image and the rest of the images aren't showing the style I added on the active image is also not getting.
HTML Reference
<div class="custom-row web-align-center web-gap-10 img-container">
<div class="item-img pos-relative">
<img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
<div class="tick">
<img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
</div>
</div>
<div class="item-img pos-relative">
<img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
<div class="tick">
<img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
</div>
</div>
<div class="item-img pos-relative">
<img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
<div class="tick">
<img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
</div>
</div>
<div class="item-img pos-relative">
<img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="">
<div class="tick">
<img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
</div>
</div>
<div class="item-img pos-relative">
<img src="{{ asset('imgs/admin/home-decor-2.webp') }}" alt="" >
<div class="tick">
<img src=" {{ asset('imgs/admin/icons/select.svg') }} " alt="">
</div>
</div>
</div>
JS for Reference
// gallery start
let files = [], // will be store images
form = document.querySelector(".browse-area"),
container = document.querySelector(".img-container"),
text = document.querySelector(".inner"),
browse = document.querySelector(".select"),
input = document.querySelector(".browse-area input");
browse.addEventListener("click", () => input.click());
// input change event
input.addEventListener("change", () => {
let file = input.files;
for (let i = 0; i < file.length; i++) {
if (files.every((e) => e.name !== file[i].name)) files.push(file[i]);
}
// form.reset();
showImages();
});
const showImages = () => {
let images = "";
files.forEach((e, i) => {
images += `<div class="item-img pos-relative">
<img src="${URL.createObjectURL(e)}" alt="image">
<div class="tick">
<img src="http://127.0.0.1:8000/imgs/admin/icons/select.svg" alt=""
onclick="delImage(${i})">
</div>
</div>`;
});
container.innerHTML = images;
};
const delImage = (index) => {
files.splice(index, 1);
showImages();
};
// drag and drop
form.addEventListener("dragover", (e) => {
e.preventDefault();
form.classList.add("dragover");
text.innerHTML = "Drop images here";
});
form.addEventListener("dragleave", (e) => {
e.preventDefault();
form.classList.remove("dragover");
text.innerHTML =
'Drag & drop image here or <span class="select">Browse</span>';
});
form.addEventListener("drop", (e) => {
e.preventDefault();
form.classList.remove("dragover");
text.innerHTML =
'Drag & drop image here or <span class="select">Browse</span>';
let file = e.dataTransfer.files;
for (let i = 0; i < file.length; i++) {
if (files.every((e) => e.name !== file[i].name)) files.push(file[i]);
}
showImages();
});
// gallery end
Result
Result
Result
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 multiple same structure div with images. And now I am trying to get src of the image which is clicked.
I have multiple divs with structure like this:
<div id="modal" class="model">
<img id="image" src= "<%= loop.url %>">
<div class="container">
<%- loop.title %>
</div>
</div>
I am trying to get src of the image of the div which is clicked. I am trying the following code for this:
document.querySelectorAll('.model').forEach(function(item) {
item.addEventListener('click', function() {
modal.style.display = "block";
captionText.innerHTML = document.getElementById("image").src;
});
});
But this only gives my src of the first image for all, and not for each image.
I am new to front end development, and I would appreciate any help.
document.querySelectorAll('.model').forEach(function(item) {
item.addEventListener('click', function() {
modal.style.display = "block";
captionText.innerHTML = document.getElementById("image").src;
});
});
<div id="modal" class="model">
<img id="image" src= "<%= loop.url %>">
<div class="container">
<%- loop.title %>
</div>
</div>
You can use querySelector to retrieve the first img element in the .modal div.
querySelector works like you might be used to from css. E.g.
element.querySelector("img") selects the first with tag <img>
element.querySelector(".someclass") selects the first with a class
element.querySelector("#someid") selects an element with an id
document
.querySelectorAll(".modal")
.forEach(
el => el.addEventListener(
"click",
event => {
const img = el.querySelector("img");
if (img) console.log(img.src);
}
)
);
<div class="modal">
<img src="src1.jpg">
<p>Image 1</p>
</div>
<div class="modal">
<img src="src2.jpg">
<p>Image 2</p>
</div>
<div class="modal">
<img src="src3.jpg">
<p>Image 3</p>
</div>
<div class="modal">
<img src="src4.jpg">
<p>Image 4</p>
</div>
Try this:
$("img").click(function(){
captionText.innerHTML = $(this).attr('src');
});
This will work if you have Jquery. If you don't, add this script to your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
You can retrieve the img src as below:
$(document).on('click', '.modal', function(event)
{
console.log($(this).find('img').attr("src"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">
<img src="src1.jpg" alt="im1">
<p>Image 1</p>
</div>
<div class="modal">
<img src="src2.jpg" alt="im2">
<p>Image 2</p>
</div>
<div class="modal">
<img src="src3.jpg" alt="im3">
<p>Image 3</p>
</div>
<div class="modal">
<img src="src4.jpg" alt="im4">
<p>Image 4</p>
</div>
I tried to see if I can run getElementById on item but it doesn't have such function. It does have getElementsByTagName so you can reference the img elements inside item
let captionText = document.getElementById('captionText')
document.querySelectorAll('.model').forEach(function(item) {
let currentSrc = item.getElementsByTagName('img').item(0).src
item.addEventListener('click', function(x) {
captionText.innerHTML = currentSrc;
});
});
The javascript code's function: when you click the pic, it bigger pic comes out. But it doesn't work in the ng-repeat. And it works fine out of the ng-repeat.
<div class="col-xs-12 col-sm-9">
<h2>Famous Actors</h2>
<ul class="media-list">
<!--works fine in here-->
<img class="movie-img media-object img-thumbnail" ng-src="{{actors[0].image}}" width="120px">
<li class="media" ng-repeat="actor in actors">
<div class="media-left">
<!--doesn't work in here-->
<img class="movie-img media-object img-thumbnail" ng-src="{{actor.image}}" width="120px">
</div>
<div class="media-body">
<h3 class="media-heading">{{actor.name}}</h3>
<p>{{actor.description}}</p>
</div>
</li>
</ul>
</div>
$(".movie-img").click(function() {
console.log("clicked!");
var span = document.createElement("span");
span.className = "close-x";
span.appendChild(document.createTextNode("X"));
var img = document.createElement("img");
img.className = "img-thumbnail";
img.src = $(".movie-img")[0].src;
var div = document.createElement("div");
div.className = "full-image";
div.appendChild(img);
div.appendChild(span);
$(this).parent().append(div);
$(".close-x").click(function() {
$(".full-image").remove();
});
});
I have the main image and a zoom icon for it and I have an image next to the first image. I wanna write a JavaScript code where when I click on the second image it changes the first image scr and the zoom icon's href link I found a code for it, but I can't make it work. This is the code I have so far:
<script type="text/javascript">
function change(menuId, image, newImage, newUrl)
{
var img = document.getElementById(image);
img.src = newImage;
document.getElementById('d3').href = newUrl;
}
</script>
and i tried to do make it work like that
<script type="text/javascript">
function change(menuId, image, newImage, newUrl)
{
var img = document.getElementById(image);
img.src = newImage;
document.getElementById('d3').href = newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt=""/>
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage("assets/example/latest/S8621A.png")' >
<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'>
</div></div>
I just don't know how it should work. I really don't understand that whole JavaScript. Can someone help me or show me how will it work? THX for the help.
As others have already said, change() should be changeImage() or vice versa.
There was no obvious target for the MenuId parameter so it's removed.
Made the zoomImage() function just for the hell of it.
Click any of the bottom images and the top one changes and the GO link's href changes as well.
The zoom icon will enlarge the top image by 50% without leaving the page.
Added 2 more functions…not sure what OP wants.
imageZoom() will use transform: scale() to zoom the image.
resetImage() will reset the image back to 128px
Snippet
img {
cursor: pointer;
}
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script type="text/javascript">
function changeImage(newImage, newUrl) {
var img = document.getElementById('img');
img.src = newImage;
document.getElementById('goto').href = newUrl;
return false;
}
function zoomImage() {
var img = document.getElementById('img');
if (img.style.width == "192px") {
img.style.width = "128px"
} else {
img.style.width = "192px";
}
return false;
}
function imageZoom() {
var img = document.getElementById('img');
if (img.style.width == "512px") {
img.style.transform = "scale(.25)";
} else {
img.style.transform = "scale(4)";
}
return false;;
}
function resetImage() {
var img = document.getElementById('img');
img.style.width = "0px";
img.style.transform = "scale(1)"
img.style.width = "128px";
return false;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width="128" />
<div class="caption">
<div class="ico-block">
<a id="goto" href="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">GO</a>
<a class="ico-big" href="#" id="d3" width="32" onclick="zoomImage();">
<img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/32/Zoom-In-icon.png" />
</a>
<a class="ico-zoom" href="#" id="3d" width="32" onclick="imageZoom();">
<img src="https://image.freepik.com/free-icon/zoom-in-pc_318-11477.jpg" width="32" />
</a>
</div>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='http://i44.tinypic.com/2uxz43b.jpg' onclick='changeImage("http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg", "http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg")' width="128">
<img src='http://www.log85.com/tmp/doc/img/perfectas/lenna/lenna1.jpg' onclick='changeImage("http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg", "http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg")'
width="128">
<button onclick="resetImage();">RESET</button>
</div>
</div>
First you need to make sure the js function works.
Second, <img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'> is not right, it should be
<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById("d3").href = "assets/example/latest/S8621B.png"'> if my understanding is right.
Small description would be: you just need to assign clicked image to zoom icon to give it toggle effect.[that we doing by getElementById("d3") part
<script type="text/javascript">
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById("d3").href= newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt=""/>
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
</div>
</div></div>
This should do it:
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById('d3').href = newUrl;
}
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt="" />
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
</a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")' onclick='document.getElementById' ( "d3").href='(assets/example/latest/S8621B.png)'>
</div>
</div>
Hey Robert Updated now
<!-- start: Portfolio -->
<section id="portfolio-grid" class="portfolio">
<article class="javascript html">
<script type="text/javascript">
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById('d3').href = newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt="" />
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
</a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
</div>
</div>