Please check my code. It is almost working but whenever i click one of the thumbnails it doesnt show image.
<script>
function thumbChange(num){
var thumb = "gata" + num + ".jpg";
document.getElementById("mainImg").src = thumb;
}
</script>
<div class="main">
<img id="mainImg" src="biokovo.jpg" />
</div>
<ul class="thumbs">
<li onclick="thumbChange(0)"><img src="biokovo.jpg"></li>
<li onclick="thumbChange(1)"><img src="grac.jpg"></li>
<li onclick="thumbChange(2)"><img src="lokvica.jpg"></li>
<li onclick="thumbChange(3)"><img src="hike.jpg"></li>
<li onclick="thumbChange(4)"><img src="gradac.jpg"></li>
</ul>
Here is a working example,
what i did, i passed the thumb as the img src.
and i pass the original size img url, as the argument of the function.
then inside the function im just passing the img url to the img tag.
<img id="mainImg" src="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1">
</div>
<ul class="thumbs">
<li onclick='thumbChange("https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
<li onclick='thumbChange("https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
<li onclick='thumbChange("https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
</ul>
<script>
function thumbChange(img){
document.getElementById("mainImg").src = img;
}
</script>
im sorry for the long img urls. you can replace them with shorter ones ofcourse.
Related
I have a list of image in index file as below:
<div id="image-list"
<ul>
<li data-id='1'>
<img src='image/001.jpg' alt=''>
</li>
<li data-id='2'>
<img src='image/002.jpg' alt=''>
</li>
<li data-id='3'>
<img src='image/003.jpg' alt=''>
</li>
</ul>
</div>
And I made an click event for image list:
document.getElementById("image-list").addEventListener('click', function(){
if(document.getElementById("background").style.backgroundImage == 'url("image/001.jpg")'){
console.log("I clicked in the image 001");
}
if(document.getElementById("background").style.backgroundImage == 'url("image/002.jpg")'){
console.log("I clicked in the image 002");
}
if(document.getElementById("background").style.backgroundImage == 'url("image/003.jpg")'){
console.log("I clicked in the image 003");
}
});
But I have issue load wrong url. When I am in image 001 and click on image 002, the function above show log "I clicked in the image 001" instead of "I clicked in the image 002" as I expect.
Anyone can help me give a right function that when I click on image 002, the console log print "I clicked in the image 002" as I expect.
Thanks.
You should target all the images then loop through them and attach the event. Inside the event handler function get the src attribute and match that.
Demo:
document.querySelectorAll("#image-list ul > li > img").forEach(function(el){
el.addEventListener('click', function(){
var src = this.getAttribute('src');
if(src == "image/001.jpg"){
console.log("I clicked in the image 001");
}
else if(src == "image/002.jpg"){
console.log("I clicked in the image 002");
}
else if(src == "image/003.jpg"){
console.log("I clicked in the image 003");
}
});
});
<div id="image-list">
<ul>
<li data-id='1'>
<img src='image/001.jpg' alt='11'>
</li>
<li data-id='2'>
<img src='image/002.jpg' alt='22'>
</li>
<li data-id='3'>
<img src='image/003.jpg' alt='33'>
</li>
</ul>
</div>
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I'm build a digital poster editor and so i need help setting an image as a background look of a div. I have no clue where to start
I created a div with a couple of images to select from and a empty div with just a div id.
Here is my images div:
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
here is my Empty Div:
<div id="designPoster">
</div>
Basic i need help writing the js code or a bit of direction on how to implement this functionality of setting a background image of the empty div[id="designPoster"] by just selecting the an image from div[id="imgopt"].
If you want to do that with Javascript without jQuery, here is how you could achieve it.
Note that I changed the image to have a working example.
var imageElts = document.querySelectorAll("#imgopt img");
var posterElt = document.querySelector("#designPoster");
for (var i = 0; i < imageElts.length; i++) {
imageElts[i].addEventListener("click", changeBgImage);
}
function changeBgImage(e) {
posterElt.style.backgroundImage = "url(" + e.target.src + ")";
posterElt.style.backgroundSize = "contain";
posterElt.style.backgroundRepeat = "no-repeat";
}
#imgopt img {
cursor: pointer;
width: 100px;
height: auto;
}
#designPoster {
width: 400px;
height: 157px;
background: #ccc;
}
<div id="imgopt">
<ol>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
</ol>
</div>
<div id="designPoster"></div>
Good luck !
This will do what you are asking...
$(function() {
$('#imgopt img').on('click', function() {
var imageSource = $(this).prop('src');
$('#designPoster').css('background-image', 'url('+imageSource+')');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
<div id="designPoster">
</div>
Assuming that the img src is the background you would like to set:
$('#imgpot img').onClick(function(){
$('#designPoster').css('background-image', `url(${this.attr('src')})`);
});
What this will do is add an event handler to each image tag within #imgpot, when clicked, it will assign the background-image property of #designPoster to the clicked images src attribute.
My site setup is roughly like this:
<div class="sidebar">
<div class="menu">
<ul>
<li>Image title 1</li>
<li>Image title 2</li>
<li>Image title 3</li>
</ul>
</div>
</div>
<div class="content">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
What I need is a way to change color of both image title and image border of the coresponding image on hover over either title or image. So if you hover over the link in the menu for image1 both title and image are affected and the same if you would hover over the image.
I got the change color on hover done with css - no problem there.
But no matter what I try I can get both title and image to change at the same time. How do I link them together so they will know they both have to change color?
Thank you
Withoud classes sounds a bit weard: https://fiddle.jshell.net/g0wsywaj/
$(function(){
$('.menu a, .content a').hover(
function(){
$('a[href="'+$(this).attr('href')+'"]').addClass("hover");
},
function(){
$('a[href="'+$(this).attr('href')+'"]').removeClass("hover")
})
})
The simplest thing is to bind together all anchor tags (a), so when you hover, all the others anchors with the same href will be given the same class (hover).
$("a").mouseenter(function(){
var href = $(this).attr("href");
$('a[href="' + href + '"]').addClass('hover');
}).mouseleave(function() {
var href = $(this).attr("href");
$('a[href="' + href + '"]').removeClass('hover');
});
Fiddle
My sample html section with several items like this:
<ul class="catalog">
<li class="catalog_item catalog_item--default-view">
<div class="catalog_item_image">
<img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
</div>
<ul class="catalog_item_icons">
<li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li>
</ul>
I want to
change src of img.catalog_item_icons__big-foto
with
src of img.catalog_item_icons__preview--foto-small
after clicking on li element only in it's parent ul.catalog.
That was my try:
$(".catalog_item_icons__preview").each(function () {
$(this).on("click", function() {
console.log('Clicked preview!');
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");
// print in console src of nearest big image
console.log($bigPreview);
});
});
I can get the src of small image, but can't even read the src of the img above in tree.
Output in console: undefined. Don't understand why :(
Use this script:
$(document).ready(function() {
//It is executing a function when it is clicked on an item
$('.catalog_item_icons li').click(function() {
//Taking the source of the image of the clicked element.
//with $('img', this) you are choosing the the image in the clicked element
_src = $('img', this).attr('src');
//In the next line I am assigning to the _obj variable - the parent .catalog_item--default-view of the clicked element
_obj = $(this).parents('.catalog_item--default-view');
//In the next line i am changing the source attribute of the .catalog_item_icons__big-foto located in the _obj object
$('.catalog_item_icons__big-foto', _obj).attr('src', _src);
});
});
catalog_item_icons__big-foto is not a direct ancestor so closest will not find it. The closest metod looks at itself and than looks at parents. The element you are looking for is not a parent, it is a child of one of those parents.
Easiest thing is to look for the top li and find the image from there.
$(this).closest(".catalog_item catalog_item--default-view")
.find('img.catalog_item_icons__big-foto')
or option is to find the parent ul and find the previous sibling and than find the image.
problem is here The closest() method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.
var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");
you just use class that will work for you
var $bigPreview = $('img.catalog_item_icons__big-foto').attr("src");
This may help you, check console following code is working for me
$("li.catalog_item_icons__preview").on("click", function(){
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src");
// print in console src of nearest big image
console.log(bigPreview);
});
$("li.catalog_item_icons__preview").on("click", function(){
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src");
// print in console src of nearest big image
console.log(bigPreview);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="catalog">
<li class="catalog_item catalog_item--default-view">
<div class="catalog_item_image">
<img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
</div>
<ul class="catalog_item_icons">
<li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li>
</ul>
</li>
</ul>
Try this
$(".catalog_item_icons__preview").click(function() {
$(".catalog_item_icons__big-foto").attr("src", $(this).children("img").attr("src"));
console.log($(".catalog_item_icons__big-foto").attr("src"));
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catalog_item_image">
<img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
</div>
<ul class="catalog_item_icons">
<li class="catalog_item_icons__preview">
<img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small">
</li>
<li class="catalog_item_icons__preview">
<img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small">
</li>
<li class="catalog_item_icons__preview">
<img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small">
</li>
</ul>