How can I make the mainImage picture change places with the thumbnail and become the imgStyle picture?
I managed to move the thumbnail to the mainImage picture but I do not know what to do to move the main picture to the miniatures.
I'm happy for any advice.
var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
var imgUrl = this.src;
var mainUrl = document.getElementById('mainImage');
mainUrl.src = imgUrl;
});
.add_gallery{
width: 25%;
}
#mainImage{
width: 100%;
}
.miniatures{
width: 100%;
display: flex;
}
.imgStyle{
height: 100px;
}
<div class="add_gallery">
<div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>
</div><!--add_gallery-->
You almost have it, just set the mini image that was clicked src to the main images src before you set it.
var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
var imgUrl = this.src;
var mainUrl = document.getElementById('mainImage');
this.src = mainUrl.src;
mainUrl.src = imgUrl;
});
.add_gallery{
width: 25%;
}
#mainImage{
width: 100%;
}
.miniatures{
width: 100%;
display: flex;
}
.imgStyle{
height: 100px;
}
<div class="add_gallery">
<div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>
</div>
Related
I have HTML like this:
<div class="h5p-image">
<img src="localhost/images/file-5fa55a3d758c4.jpg" alt="New image" title="" style="width: 100%; height: 100%;">
</div>
and I want to select that image via src, so my JS looks like this:
var list= document.querySelectorAll('.h5p-image > img').src = "file-5fa55a3d758c4.jpg";
var i;
for (i = 0; i < list.length; i++) {
list[i].style.width = "300px";
}
Error from the console:
Uncaught TypeError: Cannot read property 'length'
Can anybody try to help me with this?
Your list is either
var list= document.querySelectorAll('.h5p-image > img')
OR
var list= document.querySelectorAll('.h5p-image > img[src$="5fa55a3d758c4.jpg"]') (using ends-with)
assuming you have more than one div with that image.
So the code is likely this to style the div
[...document.querySelectorAll('.h5p-image > img[src$="5fa55a3d758c4.jpg"]')]
.forEach(img => img.closest("div").style.width = "300px");
or this to just style the image
[...document.querySelectorAll('.h5p-image > img[src$="5fa55a3d758c4.jpg"]')]
.forEach(img => img.style.width = "300px");
Or if there is only ONE image
document.querySelector('.h5p-image > img').style.width = "300px"
[...document.querySelectorAll('.h5p-image > img[src$="758c4.jpg"]')]
.forEach(img => img.style.width = "300px");
<div class="h5p-image">
<img src="https://www.nice-premium.com/local/cache-vignettes/L600xH800/2012-03-19_08.53.13-758c4.jpg" alt="New image" title="" style="width: 100%; height: 100%;">
</div>
<div class="h5p-image">
<img src="https://www.nice-premium.com/local/cache-vignettes/L600xH800/2012-03-19_08.53.30-f371c.jpg" alt="New image" title="" style="width: 100%; height: 100%;">
</div>
<div class="h5p-image">
<img src="https://www.nice-premium.com/local/cache-vignettes/L600xH800/2012-03-19_08.53.13-758c4.jpg" alt="New image" title="" style="width: 100%; height: 100%;">
</div>
This image sequence plays automatically but I want the first 7 images are played automatically and the remaining images (8 to 15) are played after one scroll.
How would I do this?
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0,
j = 0;
var interval = setInterval(function() {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
j++;
if (j === 14) {
clearInterval(interval);
document.getElementsByClassName("d-none")[0].classList.add('d-block');
}
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
.d-none {
display: none
}
.d-block {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-none">
this div is aappear
</div>
I figured out how to change image on mouseover through javascript. But unable to figure how to add description below the image on mouseover/mouseclick on respective image. I'm not good at jQuery. Please help me in solving the problem in javascript only.
<html>
<head>
<style>
.imgStyle {
height: 100px;
width: 100px;
border: 3px solid grey;
}
</style>
</head>
<body>
<img src="img/img_01.jpg" id="mainImage" />
<div id="describ01" style="display:none">Description 01</div>
<div id="describ02" style="display:none">Description 02</div>
<div id="describ03" style="display:none">Description 03</div>
<div id="describ04" style="display:none">Description 04</div>
<br />
<div id="myDiv" onmouseover="changeImage(event)">
<img src="img/img_02.jpg" class="imgStyle" />
<img src="img/img_03.jpg" class="imgStyle" />
<img src="img/img_04.jpg" class="imgStyle" />
<img src="img/img_05.jpg" class="imgStyle" />
</div>
<script type="text/javascript">
function changeImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if(targetElement.tagName == "IMG") {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>
If you want to use javascript then the answer will be
document.getElementById("description").innerHTML = 'Hello World';
and if you want to use JQuery then
$("#description").html("Hello World");
Hopefully it will help you
Give each of your images a data attribute:
<img src="img/img_02.jpg" class="imgStyle" data-text='text goes here' />
Then use this on hover:
if(targetElement.tagName == "IMG") {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
document.getElementById("description").innerHTML = this.getAttribute("data-text");
};
Now you only need one description div as before.
I am creating a simple gallery with an overlay to display enlarged image when clicked.
In my gallery, every 3 images are grouped into a container as
<div class='overlay'>
<a class='next control'>Next</a>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
JQuery
$(document).ready(function () {
var src;
var currentElement;
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
});
$(".next").click(function () {
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}
else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
I am able to get the next image on clicking next. But my problem is How to disable the next button when last image reaches ?.
I am unable to find a logic to get the last image.
Note: the images in last container may vary from 1 to 3
Here is the demo : https://jsfiddle.net/y5fwgz25/1/
here is my solution but i do not like this code, but works fine
<div class='overlay'>
<a class='next'></a>
</div>
<div id="gallery">
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var src;
var currentElement;
var last_img = $("#gallery .container:last-child .image:last-child");
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
if ( $(currentElement)[0] == $(last_img)[0] ) {
$(".overlay .next").hide();
}
});
$(".next").click(function () {
if ( $(currentElement).next()[0] == $(last_img)[0] ) {
$(".overlay .next").hide();
}
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
</script>
why don't you use jquery last method to get the last sibling and compare any of its attributes with the same attributes of the current element.
If they are the same, hide or disable the next button.
You can add one if condition. If the length of currentElement is zero then hide .next.
Updated Fiddle-
$(document).ready(function () {
var src;
var currentElement;
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
});
$(".next").click(function () {
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}
else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
if($(currentElement).length==0) {
$(".next").hide();
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
.overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9) no-repeat;
background-position: center;
}
.next {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
background-image: url("http://dummyimage.com/50&text=Next");
right: 8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay'>
<a class='next'></a>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
I m having images of same height but of varied width.
I was wondering if i can do something with css or js to fill the width of the container(parent div) with the images.
For an example I have made this page(link)
Now as one can see the last image in the second row if its placed in the first then easily the blank spaces can be saved.
Regards
I don't think there will be any library available as per your requirement.
But look at this, I have created a function such as gridWidth() for you. Maybe this can help you.
$.fn.gridWidth = function() {
var container = this,
c_width = container.width(),
imgs = $('img', container),
obj = {},
new_obj = [],
tmp_tw = 0;
$.each(imgs, (i, v) => obj[i] = {"e": v, "w": $(v).outerWidth(true) });
while (Object.keys(obj).length) {
f = 0;
var tmp_obj = Object.assign({}, obj);
$.each(tmp_obj, function(i, v) {
if ((tmp_tw + v.w) <= c_width) {
tmp_tw += v.w;
new_obj.push(v.e);
delete obj[i];
delete tmp_obj[i];
f = 1;
}
if (tmp_tw >= c_width) return tmp_tw = 0;
});
if (!f) tmp_tw = 0;
}
$.each(new_obj, (i, v) => { $(v).css('order', i) });
};
$(window).on('load', function(){
$('.img_container').gridWidth();
});
$(window).resize(function(){
$('.img_container').gridWidth();
});
.img_container {
border: 2px black solid;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
}
.img_container img {
margin-bottom: 5px;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1">
<img src="https://dummyimage.com/150x150/0000FF/ffffff&text=2">
<img src="https://dummyimage.com/200x150/EA00FF/ffffff&text=3">
<img src="https://dummyimage.com/250x150/FF0000/ffffff&text=4">
<img src="https://dummyimage.com/300x150/00D5FF/ffffff&text=5">
<img src="https://dummyimage.com/350x150/26FF00/ffffff&text=6">
<img src="https://dummyimage.com/300x150/FF8400/ffffff&text=7">
<img src="https://dummyimage.com/250x150/000000/ffffff&text=8">
<img src="https://dummyimage.com/200x150/0000FF/ffffff&text=9">
<img src="https://dummyimage.com/150x150/EA00FF/ffffff&text=10">
<img src="https://dummyimage.com/100x150/FF0000/ffffff&text=11">
<img src="https://dummyimage.com/100x150/00D5FF/ffffff&text=12">
<img src="https://dummyimage.com/150x150/26FF00/ffffff&text=13">
<img src="https://dummyimage.com/200x150/FF8400/ffffff&text=14">
<img src="https://dummyimage.com/250x150/000000/ffffff&text=15">
<img src="https://dummyimage.com/300x150/0000FF/ffffff&text=16">
<img src="https://dummyimage.com/350x150/EA00FF/ffffff&text=17">
<img src="https://dummyimage.com/300x150/FF0000/ffffff&text=18">
<img src="https://dummyimage.com/250x150/00D5FF/ffffff&text=19">
<img src="https://dummyimage.com/200x150/26FF00/ffffff&text=20">
<img src="https://dummyimage.com/150x150/FF8400/ffffff&text=21">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=22">
<img src="https://dummyimage.com/100x150/0000FF/ffffff&text=23">
<img src="https://dummyimage.com/150x150/EA00FF/ffffff&text=24">
<img src="https://dummyimage.com/200x150/FF0000/ffffff&text=25">
<img src="https://dummyimage.com/250x150/00D5FF/ffffff&text=26">
<img src="https://dummyimage.com/300x150/26FF00/ffffff&text=27">
<img src="https://dummyimage.com/350x150/FF8400/ffffff&text=28">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=29">
<img src="https://dummyimage.com/250x150/0000FF/ffffff&text=30">
<img src="https://dummyimage.com/200x150/EA00FF/ffffff&text=31">
<img src="https://dummyimage.com/150x150/FF0000/ffffff&text=32">
<img src="https://dummyimage.com/100x150/00D5FF/ffffff&text=33">
<img src="https://dummyimage.com/100x150/26FF00/ffffff&text=34">
<img src="https://dummyimage.com/100x150/FF8400/ffffff&text=35">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=36">
</div>