I am currently making a website for an architecture firm, HLArchitects.
In the projects page I have created an HTML / Javascript image gallery.
When you hover over a smaller thumbnail the opacity changes from 0.5 to 1.
It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/
My problem is that after you click on one of the smaller thumbnails, which changes the bigger picture above it, and then try to hover over another smaller thumbnail, it no longer changes opacity. I used a simple CSS :hover to change the opacity along with transition: opacity 0.2s. Here is the Javascript / Jquery for the on click event of he thumbnail:
var imageFlow = document.getElementById("imageFlow");
var img = imageFlow.getElementsByTagName("img");
$("#imageFlow img").click(function(){
var src = $(this).attr("src");
if (src != $('#displayImg img').attr("src")){
$('#displayImg img').fadeOut(200);
setTimeout(function(){$("#displayImg img").attr("src",src);}, 200);
$('#displayImg img').fadeIn(200);
}
for (var i = 0; i < img.length; i++) {
$(img[i]).css("opacity","0.5");
}
$(this).css("opacity","1");
})
HTML:
<div id="displayImg">
<img src="images/095.jpg">
</div>
<div id="imageFlow">
<img src="images/095.jpg" alt="095" width="" height="" />
<img src="images/105.jpg" alt="105" width="" height="" />
<img src="images/106.jpg" alt="106" width="" height="" />
<img src="images/110.jpg" alt="110" width="" height="" />
<img src="images/133.jpg" alt="133" width="" height="" />
<img src="images/137.jpg" alt="137" width="" height="" />
<img src="images/138.jpg" alt="138" width="" height="" />
<img src="images/141.jpg" alt="141" width="" height="" />
<img src="images/145.jpg" alt="145" width="" height="" />
<img src="images/149.jpg" alt="149" width="" height="" />
<img src="images/160.jpg" alt="160" width="" height="" />
<img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" />
<img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" />
<img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" />
<img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" />
<img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" />
<img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" />
<img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" />
<img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" />
</div>
I would really appreciate a solution to this so that the hover effect works even after you click on one of the thumbnails.
Thank you in advance
var images = $("#imageFlow img");
images.on('click', function(){
var src = $(this).attr("src");
if (src != $('#displayImg img').attr("src")){
$('#displayImg img').fadeOut(200, function() {
$(this).attr("src", src).fadeIn(200);
});
}
images.removeAttr('style');
this.style.opacity = '1';
});
FIDDLE
Also, your site has two opening body tags and strange invalid markup.
CSS:
#imageFlow img:hover,
#imageFlow img.active {
opacity: 1;
}
JS:
var $img = $("#imageFlow").find("img");
$img.click(function(){
var src = this.src;
if (src != $('#displayImg img')[0].src){
$(this).addClass('active').siblings('img').removeClass('active');
$('#displayImg img').stop().fadeTo(200,0, function(){
this.src = src;
$(this).fadeTo(200, 1);
});
}
});
Take a good look at your HTML elements and fix unclosed tags, duplicate tags, duplicate ID elements etc... , and on other JS errors that pop out in console in your page. Otherwise you'll be running in loops ;)
Initially when I run this in the console I get this error:
TypeError: projs is null
var img = projs.getElementsByTagName('img');
It seems that your script is looking for something in the DOM that hasn't loaded yet.
Currently proj.js is looking for elements that haven't loaded yet.
Your script should run at the bottom of your page like the imageFlow.js.
Related
I have a bit of a problem with a gallery.
I'm trying to fit images & videos in a row and have them keep an equal height.
I could achieve that with the following code but only in the case of a row full of images. If I try to place a video, it doesn't work...
var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
var row = $(this),
rowItems = row.find(".gallery-item"),
totalMarginSpace = (4 * (rowItems.length - 1)),
itemsWidthSum = 0,
diff,
rowItem,
rowItemWidth;
videos.addEventListener('loadeddata', function() {
rowItems.height(1000);
for(var i = 0 ; i < rowItems.length ; i++) {
rowItem = rowItems[i];
rowItemWidth = $(rowItem).outerWidth();
itemsWidthSum += rowItemWidth;
}
if(rowItems.length >= 3) {
diff = (row.width() - totalMarginSpace) / itemsWidthSum;
rowItems.height(999 * diff);
} else {
rowItems.height(250);
}
}, false);
});
Here's my HTML :
<section class="gallery-section">
<div class="img-row">
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item margot" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
</div>
Any ideas on how to get my code to work ?
Thank you !
Code updated : I replaced item.width by item.offsetWidth (as width return nothing with videos).. It's a bit better but now the rows containing the videos are smaller than the one without.
Solution found ! Thanks for all your help but I really wanted to use JS to resolve my problem.
Ok so it did come from the videos because they were not completely loaded yet. So I added an eventlistener. I updated my code in case anyone wants to use it.
Try making a table
<table>
<tr>
<th>your imgs</th>
<th>your videos</th>
...
</tr>
</table>
then try to adjust the table with responsive CSS with this tutorial. I don't know if I understood your problem but I hope this helps.
Im curently creating a picture gallery for my project in school. I came across the problem that i don't know how to add a picture description that will only show under the big preview picture and not next to the small pictures at the top. Every small picture will have a different description. I tried some stuff myself but i failed miserably, Im still new to all of this :)
Any solutions to that problem?
<head>
<title>Gallery</title>
<link href="galery.css" rel="stylesheet" type="text/css">
</head>
<body background="cosmic.jpg">
<div class="gallery" align="center">
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png" />
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
</div>
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
or
<div class="smallpics">
<img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
function showInBig(element){
document.getElementById('bigpic').setAttribute('src',element.getAttribute('src'));
document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}
Given that alt of the small images are the descriptions.
The first thing is to clean up your HTML and separate out the JavaScript. This has a number of benefits. It keeps your HTML and JS separate without muddying one with the other.
All of your onclick code can be handled thus:
var big_pic = document.querySelector('#bigpic');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
}, false);
Now, let's consider adding a description. The first question is, how are you going to store these, and in relation to the images?
An obvious solution is to store them in a data attribute on the pictures elements. So just as we read the src from the clicked pic's element, we'll read its description from the same source.
So our elements become:
<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />
Then you're going to need a description placeholder in the big picture area, so add a paragraph.
Finally, change the above JS code to factor in the description also:
var
big_pic = document.querySelector('#bigpic'),
big_pic_descr = document.querySelector('.bigpic p');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
big_pic_descr.innerHTML = evt.target.getAttribute('data-descr');
}, false);
Could be done in 2 ways, first by making use of data- attribute (1)
jsFiddle 1
var pics = document.querySelectorAll('.smallpics img'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src and data-desc attributes to the function.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), $this.getAttribute('data-desc'));
}
function theClickFunction($th, $src, $desc) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
descP.innerHTML = $desc;
});
}
body { margin: 0; padding: 0; }
.smallpics img { width: 19%; cursor: pointer; }
#bigpic { display:none}
<div class="gallery" align="center">
<div class="smallpics">
<img id="pic1" src="//dummyimage.com/300x100?text=pic1" data-desc="description of picture 1" />
<img id="pic2" src="//dummyimage.com/300x100?text=pic2" data-desc="description of picture 2" />
<img id="pic3" src="//dummyimage.com/300x100?text=pic3" data-desc="description of picture 3" />
<img id="pic4" src="//dummyimage.com/300x100?text=pic4" data-desc="description of picture 4" />
<img id="pic5" src="//dummyimage.com/300x100?text=pic5" data-desc="description of picture 5" />
<img id="pic6" src="//dummyimage.com/300x100?text=pic6" data-desc="description of picture 6" />
<img id="pic7" src="//dummyimage.com/300x100?text=pic7" data-desc="description of picture 7" />
<img id="pic8" src="//dummyimage.com/300x100?text=pic8" data-desc="description of picture 8" />
<img id="pic9" src="//dummyimage.com/300x100?text=pic9" data-desc="description of picture 9" />
<img id="pic10" src="//dummyimage.com/300x100?text=pic10" data-desc="description of picture 10" />
</div>
<hr>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<p id="description"></p>
</div>
The other way is by using some hidden element, I used <ul> with its lis here but it could be divs or p etc.., while this way adds extra markup to the page it suits better when you have HTML, styled and/or long descriptions rather than just normal text.
jsFiddle 2
var pics = document.querySelectorAll('.smallpics img'),
DescLis = document.querySelectorAll('#hiddenDescs li'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src attribute.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), i);
}
function theClickFunction($th, $src, i) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
// get the inner html of the corresponding li and inject it as innerHTML
// of the descreption p
descP.innerHTML = DescLis[i].innerHTML;
});
}
(1) Using alt attribute, as in #Thuin's answer, rather than data-* is better because: This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
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/
I have 5 small images and 1 image that is twice the size as the small ones. What I'm trying to do is whenever you hover on the small images the big image changes to the image you are hovering. I am having a hard time searching for methods and functions but luck as of yet. this is what I have
<div class="bigImg">
<img id="image0" src="images/image1.png">
</div>
<img id="image1" src="images/image1.png">
<img id="image2" src="images/image2.png">
<img id="image3" src="images/image3.png">
<img id="image4" src="images/image4.png">
<img id="image5" src="images/image5.png">
I was trying to add this function that I saw somewhere else here
function mouseOver() {
document.getElementById("image0").innerHTML = '<"image2.png"/>';
}
function mouseOut() {
document.getElementById("image0").innerHTML = '<img src="image1.png" />';
}
I wrote the img tag as
<img id="image1" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/image1.png">
for all of the images but wasn't working. Can someone steer me in the right direction, please?
This is how I did it:
function mouseOut() {
document.getElementById("image0").src = 'http://lorempixel.com/g/600/600/';
}
function changePic(elem) {
document.getElementById("image0").src = elem.src;
}
Here is the JSFiddle demo
If you want to do it using Jquery you can try this.
<div class="bigImg"></div>
<img class="imgLink" src="http://dummyimage.com/100x100/eb00eb/fff" target="http://dummyimage.com/100x100/eb00eb/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/000/fff" target="http://dummyimage.com/100x100/000/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/999/fff" target="http://dummyimage.com/100x100/999/fff">
JS
$('.imgLink').hover(function(){
$('.bigImg').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('.bigImg').css({'background':''});
});
Demo here
Basic concept behind this is we have to catch mouseover and mouseout events. Now, on mouse over we have to change the src attribute of that particular Image and vice versa for getting back the original image.
Try this one :
function mouseOver(element) {
document.getElementById(element).src = 'https://www.google.co.in/images/google_favicon_128.png';
}
function mouseOut(element) {
document.getElementById(element).src = 'https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png';
}
<div class="bigImg"><img id="image0" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"></div>
<img id="image1" onmouseover="mouseOver('image1')" onmouseout="mouseOut('image1')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image2" onmouseover="mouseOver('image2')" onmouseout="mouseOut('image2')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image3" onmouseover="mouseOver('image3')" onmouseout="mouseOut('image3')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image4" onmouseover="mouseOver('image4')" onmouseout="mouseOut('image4')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image5" onmouseover="mouseOver('image5')" onmouseout="mouseOut('image5')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
I have 10 or so images coming in from flickr. At the moment they just come in as images with no individual ID or Class names.
So I have:
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
<img src="images/01.jpg" width="300" height="273" />
...and so on. What I want to do is have:
<img id="image1" src="images/01.jpg" width="300" height="273" />
<img id="image2" src="images/01.jpg" width="300" height="273" />
<img id="image3" src="images/01.jpg" width="300" height="273" />
<img id="image4" src="images/01.jpg" width="300" height="273" />
But because they are being brought in via jQuery, and not manually, I'm unsure how to add these ID's, in order, to the images. Each needs to be styled differently.
Any ideas?
use the callback function of your ajax...
if you have something like this,
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function (data) {
$.each(data.items, function (i, item) {
$("<img/>").attr({"src":item.media.m, 'id': 'images' + i}).appendTo("#images");
});
});
You can use:
jqueryEl.attr("id", "someId");
or:
jqueryEl.addClass("newClass")
where jQueryEl is a wrapped element. Or, if you have a set of images, you might find attr's function option helpful:
jquerySet.attr("id", function(index)
{
return "image" + (index + 1);
});
This is actually similar to an example in the attr docs.
If you want to post the code that fetches the images, it probably could be better integrated there. However, you could also just add this code after the images have been added. Lets pretend the images are added to a div with the id of flickr:
$("#flickr img").each(function (i, image){
image.id = "image" + (i + 1);
});
Thats it! Now each image will have image1, image2, etc as the id, in order.