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();
});
});
Related
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>
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;
});
});
I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?
Can you help me solve a little problem?
I have some set of figures. After click, selected figure copied to another div (basket).
In the basket should appear new button. But in my solution this buttom appeared again after each click.
How I can fix this?
Thanks and sorry for my English
This code
<div class="products__list__items">
<div class="products__list__item row">
<figure class="product first" data-class="first">
<img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
<figcaption class="product__title">One</figcaption>
</figure>
</div>
<div class="products__list__item row">
<figure class="product first" data-class="first">
<img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
<figcaption class="product__title">Two</figcaption>
</figure>
</div>
<div class="products__list__item row">
<figure class="product first" data-class="first">
<img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
<figcaption class="product__title">Three</figcaption>
</figure>
</div>
</div>
<div class="basket">
</div>
Jquery code
$(document).ready(function() {
var addToBasket = function() {
var that = $(this);
if(!that.hasClass('added')) {
that.clone().appendTo($('.basket'));
that.addClass('added');
};
$('.basket .product').append('<button>x</button>');
};
$(document).on("click",".products__list__item .product",addToBasket);
});
Here fiddle
https://jsfiddle.net/fhxx9hm3/
You should add the button only once per product.
var addToBasket = function() {
var that = $(this);
if(!that.hasClass('added')) {
//Append the button here
that.clone().add('<button>x</button>').appendTo($('.basket'));
//Or
//that.clone().append('<button>x</button>').appendTo($('.basket'));
that.addClass('added');
};
//Following statement is not required
//$('.basket .product').append('<button>x</button>');
};
DEMO
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>