I made this image gallery a while ago and now had the idea, that it would be great if you could navigate in it with the arrow keys (left and right).
As I'm relatively new to programming, I cannot get it working with what I found in the forum.
I would be very happy if anyone could help :)
At the bottom there's a link to the gallery on jsfiddle.
And here is what the gallery looks like:
The javascript in the head of the document:
function reset()
{
var imgs = document.getElementsByTagName('img');
}
function init()
{document.getElementById('img1');}
window.onload = init;
the CSS:
#large {
width:820px;
height:619px;
background:url(image_I_820x619.jpg)
no-repeat center;}
.thumb66x50 {
width:66px;
height:50px;}
And the body of the image gallery:
<div id="large"></div>
<img id="img1" src="thumbnail_image_I.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_I_820x619.jpg)';">
<img id="img2" src="thumbnail_image_II.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_II_820x619.jpg)';">
Here's the the gallery on jsfiddle:
(Strangely, it only works there, if I put the javascript in the html panel...)
https://jsfiddle.net/cv6k9k0f/4/
An alternative to your solution is to keep the JS logic in one place. The following will work for any number of thumbnails.
(function () {
let lg = document.querySelector("#large"),
sm = document.querySelectorAll("[data-bg]"),
setBg = (el = sm[0]) => lg.style.backgroundImage = `url('${ el.dataset.bg }')`;
Array.from(sm).forEach((el) => el.addEventListener("click", setBg.bind(this, el)));
setBg();
}());
#large{
height: 130px;
background: #000 none 50% 50% / cover;
transition: 0.3s;
}
[data-bg] {
height: 50px;
cursor: pointer;
}
<div id="large" role="presentation"></div>
<img src="//placehold.it/60x50/bf0" data-bg="//placehold.it/800x600/bf0" alt="Green">
<img src="//placehold.it/60x50/0bf" data-bg="//placehold.it/800x600/0bf" alt="Azure">
<img src="//placehold.it/60x50/f0b" data-bg="//placehold.it/800x600/f0b" alt="Fuxxy">
Related
I have VERY recently started coding and been asked to code our company website from scratch.
I have coded a team page on the website with a PNG of each member of the team. At the moment when the user hovers over any of the PNGs they turn into a little animated GIF of them waving/doing something.
This is the javascript:
$(document).ready(function()
{
$("#imgAnimateBeth").hover(
function(){
this.src = "images/Team/Videos/Beth.gif";
},
function(){
this.src = "images/Team/Static-shots/Beth.png";
}
);
});
The issue I am having is that I also want to introduce a click state that would bring up a popup with a video of that person and their job description but I can't get it to work.
I have tried creating a CSS overlay but it refuses to work alongside the hover effect (JavaScript) so my assumption is that they don't play well together (??).
Below is the HTML for the section above. Can anyone enlighten me as to how this could be done? Simple language please!
<div class="teamsection">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
<img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
<img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
<img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
<img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
<img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
<img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
<img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
<img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
<img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
<img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
<img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
<img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
<img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
<img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
<img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>
Also, if you need me to upload anything else, just shout.
The CSS overlay was like this:
The CSS code overlay was like this:
.popup {
display: none;
position: fixed;
padding: 30px 70px;
width: 700px;
height: 100%;
z-index: 20;
left: 50px;
top: 20px;
background: rgba(0, 0, 0, 0.9);
overflow: scroll;
}
With a little bit of Javascript:
$ = function(id) {
return document.getElementById(id);
}
var show = function(id) {
$(id).style.display ='block';
}
var hide = function(id) {
$(id).style.display ='none';
}
And I basically did this to the HTML:
<div>
<a href="javascript:void(0)" onclick="show('beth')">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
</a>
</div>
<div class="popup" id="beth">
<div class="close-button">
<i class="fa fa-times" aria-hidden="true"></i> Close
</div>
<h4>CONTENT HERE</h4>
</div>
Maybe this will give you some ideas:
var members = document.querySelectorAll('.team-member');
members.forEach(function(member) {
member.addEventListener('mouseenter', memberShowGIF);
member.addEventListener('mouseleave', memberShowPNG);
member.addEventListener('click', memberVideo);
});
function memberShowGIF(event) {
this.src = this.dataset.gif;
}
function memberShowPNG(event) {
this.src = this.dataset.png;
}
function memberVideo(event) {
console.log('The video thing for: ' + this.id);
}
<div class="teamsection">
<img id="Beth" class="team-member"
src="https://via.placeholder.com/200?text=Beth.png"
data-png="https://via.placeholder.com/200?text=Beth.png"
data-gif="https://via.placeholder.com/200?text=Beth.gif">
<img id="Kiemia" class="team-member"
src="https://via.placeholder.com/200?text=Kiemia.png"
data-png="https://via.placeholder.com/200?text=Kiemia.png"
data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>
The most important learnings here are:
querySelectorAll (as a vanilla alternative to jQuery for selecting nodes)
addEventListener
Data attributes
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...
I'm trying to set up a simple gallery with thumbnails and a main content section. When a thumbnail is clicked, I would like a larger version of the image along with text to display in the main content section. I've got the code for the images down, but can't figure out how to add text on each click. I haven't started doing any styling yet, but the basic code is below. Any help would be much appreciated.
Thanks!
JavaScript:
var mainImg = document.getElementById('Main');
document.getElementById('One').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297';
mainImg.innerHTML = imagetitle;
//alert('one clicked');
};
document.getElementById('Two').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297';
mainImg.innerHTML = 'imagetitle';
//alert('two clicked');
};
document.getElementById('Three').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297';
//alert('two clicked');
};
CSS:
#One, #Two, #Three {
width:100px;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}
#One:hover, #Two:hover, #Three:hover {
width:100px;
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
HTML:
<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" />
http://jsfiddle.net/f9B8H/72/
Let's clean this up a bit.
HTML
<div id="container">
<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<p id="caption"></p>
</div>
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="I'm a soldier" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="My family" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="Dad" />
Notice how I've stored the caption in the alt attribute. A data attribute could also work.
JAVASCRIPT
function displayImage() {
var mainImg = document.getElementById('Main');
var caption = document.getElementById('caption');
mainImg.src = this.src;
caption.innerHTML = this.alt;
}
document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
document.getElementById('Three').onclick = displayImage;
Fiddle: http://jsfiddle.net/g2hY4/
The simplified function works so well because you are using the same image for thumbnail as main image. If you didn't do that, we could store the big image address in a data attribute also.
Here's one way to load the first caption when the page loads. Put it after the code I've already shown you:
displayImage.call(document.getElementById('One') );
You can read about call here. In a nutshell, it redefines the value of this in the displayImage function.
New fiddle
Something to think about is where you want the caption and how it's styled can be set in CSS. I've left that to you also. Absolute positioning will work if the positioning of #container is set to relative.
My implementation gets the text from the attribute alt(could be title) I think this way can be more elegant
document.getElementById('textSubtitle').innerHTML = this.alt;
http://jsfiddle.net/WKfc5/
If you are okay with using jQuery, here is something that I made up real quick. I hope it is useful. [Fiddle]
HTML
<div id="gallery">
<div class="preview">
<img class="previewImg" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="" />
<div class="previewText"></div>
</div>
<div class="thumbnails">
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="Image 1" />
</a>
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" title="Image 2" />
</a>
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" title="Image 3" />
</a>
</div>
</div>
CSS
#gallery {
overflow: hidden;
}
#gallery .preview {
float: left;
position: relative;
}
#gallery .previewImg {}
#gallery .previewText {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 100px;
background: rgba(0,0,0,0.7);
color: #fff;
font: normal 12px arial;
padding: 10px;
}
#gallery .thumbnails {
float: left;
width:100px;
}
#gallery .thumbnails a, #gallery .thumbnails img {
display: block;
}
#gallery .thumbnails a img {
width: 100%;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}
#gallery .thumbnails a:hover img {
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
JS
$(function(){
var gallery = $("#gallery"),
thumbnails = gallery.find(".thumbnails a"),
previewImg = gallery.find(".previewImg"),
previewText = gallery.find(".previewText");
thumbnails.on("click", function(e){
var thumbImg = $(this).find("img");
previewImg.attr("src", thumbImg[0].src);
previewText.html(thumbImg[0].title);
});
});
I'd call the onclick from the image itself instead of adding the onclick via JS to the image.
You're doubling your work.
Where do you want the text to be displayed?
If it has to be displayed on top of the image, you'll have to make the image a background-image of a div or so.
If the text has to be above/under the image, place a span above/under the image and give it an ID.
Working with a span
JS:
function showBig(srcBig, title) {
var mainImg = document.getElementById('MainImg');
var mainText = document.getElementById('MainText');
mainImg.src = srcBig;
mainImg.title = title;
mainText.innerHTML = title;
}
HTML:
<div id="main">
<span id="MainText">Title will come here</span>
<img src="Default Img" alt="Big img's will come here" />
</div>
<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />
Working with BG-image
JS:
function showBig(srcBig, title) {
var mainDiv = document.getElementById('MainDiv');
MainDiv.style.backgroundImage = srcBig;
MainDiv.innerHTML = title;
}
HTML:
<div id="MainDiv">
</div>
<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />
By the way, you can ofc still add the onClicks via JS:
document.getElementById("yourImg").onclick = showBig('URL of Big', 'Title');
By the way, Don't use the same img for the thumbnails.
You'll probably use some big images which takes longer to load and then display it much smaller via CSS.
Make a smaller version (e.g. 100x100px or whatever size the thumbs should be) and only load the bigger version when the onClick is called.
Also, you better use a CSS-class like .thumbs to style the thumbs.
Otherwise you'll have to add a new ID to the list in your CSS file everytime you add a new image.
JSFiddle
I'm new to Javascript, but I've been teaching myself CSS and some php so I'm hoping to learn a bit. I've been looking all over the last couple days to figure out what I want, hopefully this isn't a dumb question.
I'm trying to build mini-image galleries for a page of porfolio projects of mine. I've got a page of about 8 large images - each one for a different project. I'm trying to get it where if you click on an image it will load the next image of that project (Mission accomplished! I've gotten that with a code I found online)
But I also want pagination dots (basically, images of circles), like I've seen on other websites, to represent the images in the set. So if there's three images of a project, you'll see three dots and clicking on the third dot takes you to the third image -- and that dot image replaces with the 'selected dot' image. Make sense?
I've been looking all day for scripts and examples of how to do this, and this is as far as my Javascript has gotten. This is the script for the first project. With the others I input the same script, but change the variables. img1 becomes img2 then img3 and so on. Can anyone tell what's wrong?
<div class="project" id="proj1">
<script type="text/javascript">
var img1 = [
"img/portf/tiger1.jpg",
"img/portf/tiger2.jpg",
"img/portf/tiger3.jpg"
];
img1.current = 0;
function showImage1(i) {
$('#imag1').fadeOut( function() {
this.src = img1[img1.current];
$(this).fadeIn();
});
}
function NextImage1() {
img1.current = (img1.current+1) % img1.length;
showImage1(img1.current);
}
function PreviousImage1() {
if (--img1.current < 0) { img1.current = img1.length - 1; }
showImage1(img1.current);
}
onload = function(){
showImage1(0);
};
</script>
<div class="projname">
<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<img src="img/active.gif" />
<img src="img/inactive.gif" />
<img src="img/inactive.gif" />
</div>
<div class="clear"></div>
</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>
</div>
</div>
You can see what I have so far here: http://www.gmisen.com
Thanks so much for the help!!
Might not be the greatest learning experience, but you can easily achieve this with the jQuery cycle plugin: http://jquery.malsup.com/cycle/int2.html (take a look at the pager example)
here's a demo: http://jsfiddle.net/69LNJ/
HTML
<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>
JS
$(function() {
$('.slideshow').before('<div id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
});
CSS
#nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
#nav a{
background-color: cyan;
border-radius: 10px;
height: 20px;
width: 20px;
display: block;
text-indent: -1000px;
float: left;
margin-right: 10px;
}
#nav a.activeSlide{
background-color: blue;
}
I have three images: the first is a light switch, the second is an "off" light bulb and the third is an "on" light bulb. When a user clicks on the light switch image, I would like it to change the "off" light bulb image into the "on" light bulb image. Is this possible?
These are the images:
Javascript:
img2=new Image();
img2.src="images/RCS/lightbul2-250.gif";
img3=new Image();
img3.src="images/RCS/lightbuld1.gif";
function changeImage() {
document.getElementById('myImage').src=img2.src;
}
function changeImage2() {
document.getElementById('myImage').src=img3.src;
}
HTML:
<img id="myImage" onmouseover="changeImage()" onmouseout="changeImage2()" border="0" width="250" height="141" src="images/RCS/lightbulb1-100.gif">
You can achieve this with JQuery
$(document).ready(function(){
$('#switch').click(function(){
$('#bulb').attr('src', 'bulbOn.jpg');
});
});
Just give your switch image an ID of 'switch' and your original bulb image an id of 'bulb'.
You can also achieve this without JQuery by using if/else statements.
HTML Markup:
<img src="lightSwitch.jpg">
<img id="myImage" src="lightOff.jpg">
Javascript:
function changeImage() {
if(document.getElementById('myImage').src == 'lightOff.jpg') {
document.getElementById('myImage').src = 'lightOn.jpg';
} else if(document.getElementById('myImage').src == 'lightOn.jpg') {
document.getElementById('myImage').src = 'lightOff.jpg';
}
}
JS Fiddle Example
Yeah, just attach a class to the lightswitch image and do something like this:
HTML MARKUP:
<img src="http://i.stack.imgur.com/wLSuu.gif" class="lightswitch">
<div id="container">
<div id="bulb" class=""></div>
</div>
CSS:
.toggle-off { display: none; }
#bulb { height: 100%; width: 100%; background: url('http://i.stack.imgur.com/l9EOR.gif')
center center no-repeat; }
.bulb-on { background: url('http://i.stack.imgur.com/TnKyp.gif') center center no-repeat
!important; }
.lightswitch { float: left; }
.clear { clear: both; }
#container { width: 300px; height: 300px; float: right; }
THEN USE JQUERY:
$('.lightswitch').click(function() {
$('#bulb').toggleClass('bulb-on');
});
Basically what this is doing is: once the lightswitch picture is clicked, it is checking to see if either the ID of BULB has a class of "bulb-on". If it doesn't, it is adding it. If it does, it is removing it.
You may also want to style the lightswitch so that it has a hand cursor as if it is a link, like so:
.lightswitch { cursor: hand; cursor: pointer; }
JS FIDDLE HERE:
http://jsfiddle.net/SDRQU/
<script type="text/javascript">
function altsrcImg(cnImage) {
var src = document.getElementById(cnImage).src;
var alt = document.getElementById(cnImage).alt;
document.getElementById(cnImage).src = alt;
document.getElementById(cnImage).alt = src;
}
</script>
<img id="cnImage" src="TnKyp.gif" alt="l9EOR.gif"><br>
<img id="cnImage" onClick="altsrcImg(this.id)" src="wLSuu.gif">
I am using a general javascript I wrote to flip between image specified as src and another specified as alt.
The above script works. See this.
However if I change the image order it does not work.
Probably because there is now two src associated with id="cnImage".
I am still learning the basics of JavaScript.
<img src="../switch1.png" id="switch1" onclick="ON(1)"> <img
src="../switch2.png" id="switch2" onclick="OFF(0)"> <img
src="../lighON.png" id="ON"> <img src="../lighOFF.png" id="OFF">
<script> function ON(X){ if(X=1) { document.getElementById("ON").style.display=block;
document.getElementById("OFF").style.display=none;
document.getElementById("switch1").style.display=block;
document.getElementById("switch2").style.display=none; }else{
document.getElementById("ON").style.display=none;
document.getElementById("OFF").style.display=block;
document.getElementById("switch1").style.display=none;
document.getElementById("switch2").style.display=block; } y=0;
</script>
css
#ON,#OFF{position:absolute;top:30px;left:30px;width:50px; height:50px;}
#switch1,#switch2{position:absolute;top:30px;left:330px;width:50px; height:50px;}
#OFF,#switch2{dispay:none;}