Develop Reference

Using a Javascript lightbox effect for multiple links on same page

I am trying to code a simple lightbox effect that I can use for multiple images on the same page. (Click a link, image shows up on with the website opaque in the background.) I found a nice little Javascript, but it only works for a single image on the page. I know my HTML and CSS, but I'm struggling to find a clean, simple solution for what should be a simple function. (Unfortunately, I'm not a Javascript coder, but I usually can modify scripts I find to work for what I need...this is just beyond my scope!)
Here's my Javascript:
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.querySelector('.light').style.display='block';
document.querySelector('.fade').style.display='block';
}
function lightbox_close(){
document.querySelector('.light').style.display='none';
document.querySelector('.fade').style.display='none';
}
After doing some research, and I changed the original getElementById to querySelector since I need to apply this to multiple images. But I'm thinking I need to switch back to ID, and possibly use numbered IDs to differentiate my images. But I'm not sure how to use one function for multiple instances.
My CSS is:
.fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.light {
display: none;
position: absolute;
top: 20%;
left: 50%;
width: auto;
height: auto;
margin-left: -150px;
margin-top: -100px;
border: 2px solid #FFF;
background: #FFF;
z-index:1002;
overflow:visible;
}
I haven't perfected the CSS, but I'm not worried about it at this point. I just need to get the Javascript working first.
And my HTML is something like this:
Photo 1
<div class="light">
<img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close();"></div>
<br />
Photo 2
<div class="light">
<img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close();"></div>
Like I said, this isn't my Javascript; I'm just in over my head trying to modify it for my needs. There's got to be a simple way to achieve this, but I don't know enough Javascript coding to do it myself. I probably need an array or something?? Can someone please help a girl out?? =)
Thanks!

If you don't have other purposes to deal with numbered IDs with images , you don't need to switch them back , A little revise , I hope this could help you
, demo : http://codepen.io/Carr1005/pen/PzBgom
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(index){
window.scrollTo(0,0);
document.querySelectorAll('.light')[index].style.display='block';
document.querySelectorAll('.fade')[index].style.display='block';
}
function lightbox_close(index){
document.querySelectorAll('.light')[index].style.display='none';
document.querySelectorAll('.fade')[index].style.display='none';
}
and html part
Photo 1
<div class="light">
<img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close(0);"></div>
<br />
Photo 2
<div class="light">
<img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" />
</div>
<div class="fade" onClick="lightbox_close(1);"></div>
============================================================
There is a saying that using onClick() is a bad practice , here is why
I think in some situations is not that bad to use onclick() , but if you wanna
go in this direction , here is another example , and maybe it's a chance to look into more javascript
http://codepen.io/Carr1005/pen/wWxVYE?editors=1111

New image when hovering on link

<div id="social-links">
<div><img src="pictures/facenh.png"/></div>
<div> <img src="pictures/twitternh.png" /></div>
<div> <img src="pictures/ytnh.png" /></div>
<div> <img src="pictures/mailnh.png" /> </div>
</div>
This is the code I'm using. The thing I want to do is to make another image appear when hovering over the image/link. I'm not sure how to do it, so i would love some help please.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
If you need to know the css for social-links, it's right there. All i want to do is to make another image appear when hovering over the links/the images. Perhaps Javascript is needed?

No JavaScript required, you can just use CSS.
It's not great practice to use images for links as search engines won't read them or get any context from them. Much better to have a text link that you replace with an image in the CSS - e.g.
<div id="social-links">
<div><span>Facebook</span></div>
...
</div>
Then, in your CSS, simply hide the text, and replace with image for both standard and hover.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
#social-links a span {
display: none;
}
#facebookLink {
display: block;
background: url('path-to-facebook-image.jpg');
width: 50px;
height: 50px;
}
#facebookLink:hover {
background: url('path-to-facebook-hover-image.jpg');
}

Here is a jQuery solution. Fiddle Here.
$("#facebook").hover( function () {
$(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
$(this).find("img").attr('src', 'http://placehold.it/150x150');
});
I really think this Link from #talemyn is what you are looking for also. Either way should get the job done.

Change the position of a sprite image set as background using click on image mapping

I have searched for about an hour to find a solution to my problem but I can't find much help.
I have a div with sprite image set as a background image, so that one image sits on top of the other in a single jpg. And when you hover over the div it changes the position of the sprite image so that you see an alternative state.
I want to use image mapping so that when you click on one section of the background image, this will change the positioning of the sprite background image to display the alternative state. clicking on it again will return it to it's original state.
I hope this makes sense and thank you for your time.
.imageswap {
list-style: none;
height: 495px;
width: 940px;
display: block;
background: url('/HTMLContent/images/frozenpeas_web_sprite3.jpg') 0 0;
}
.imageswap:hover{
background-position: 0 -495px;
}
<div class="ContentBorders imageswap" style="margin:0 auto;">
<div class="textandlogo" style="width: 249px; height: 145px; padding: 0; z-index: 99; float: left;">
<img src="/HTMLContent/images/frozenpeas_logo.png" height="94" width="344" />
<p class="sucktextblack" style="text-align: left; padding: 0 0 0 17px; margin: 0; width: 255px;">
<strong>Make Ice Balls</strong><br />
Ice cubes and a refreshing drink go together like peas in a pod, which is why we bring you the frozen peas ice cube mould! Frozen ice peas home-grown from your own freezer and completely reusable. Perfect for hap-pea occasions or just for vegging out in front of the TV. Easy peasy<br />
<span class="sucksmall" style="text-align: left;" >Design by Alessandro Martorelli</span>
</p>
</div>
<div style="width: 202px; height: 202x; padding:0; margin: 270px 20px 0 0; z-index: 98; float: right;">
<img src="/HTMLContent/images/frozenpeas_circle.png" height="202" width="202" />

Is this what you are looking for?
CSS:
.imageswap.active,
.imageswap:hover {
background-position: 0 -495px;
}
jQuery:
$(".imageswap").click(function() {
$(this).toggleClass("active");
});

I think this is what you need: https://stackoverflow.com/a/14567489/2645724
To help place links on top of the image, reference this: http://www.neopets.com/~Kacizilla
Hope this helps.

Jquery Cycle plugin: first image appears floating right

I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.

Set the left to 0.
#banner img{
left: 0;
}

half transparent div above image

I have a PNG image of a character, and I want something like that:
http://www.swfcabin.com/open/1364482220.
If someone clicks on a part of the character's body, it'll be "selected".
The question is - how can I do that. I don't want to use more images (because I have multiple characters), I want to use CSS only.
I tried this: http://jsfiddle.net/eRVpL/, but the green background appear above the white background, and I want it to be only above the character.
The code:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" />
<span></span>
</div>
<style>
.character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }
.character > span {
display: block;
width: 200px;
height: 30%;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
}
img {
max-width: 200px;
}
</style>

You can make this work with CSS masks, although they are currently only supported in WebKit browsers: http://caniuse.com/#feat=css-masks
http://jsfiddle.net/eRVpL/3/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask"></div>
</div>
CSS:
.green-mask {
height: 200px;
width: 508px;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
If you want to offset the elements like in the GIF you linked, put the colored background on children of the masked div:
http://jsfiddle.net/eRVpL/11/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask">
<div class="filler"></div>
</div>
</div>
CSS:
.filler {
background-color: rgba(160, 255, 97, 0.3);
height: 200px;
margin-top: 200px;
width: 100%;
}
.green-mask {
position: absolute;
width: 508px;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
And this one's just for fun: http://jsfiddle.net/eRVpL/23/ Try clicking the character. It uses checkboxes and labels with no JavaScript.

Currently there is no CSS-only means of accomplishing this. There is a specification for compositing and blending with CSS that's in the works, but it currently isn't being supported enough to be used in a product just yet. You can read-up on the spec here: http://www.w3.org/TR/compositing/
With this specification, we could set the blend-mode of your element to "screen", "overlay", or "lighten" which would make your character be green but the background would remain white. Unfortunately, this isn't possible just yet.
The best way would be, as jcubic said in one of your comments, "You need to use a mask, image that will be exactly the same but the character transparent".
Good luck!

Try using z-index for getting what you want. You'll be able to make the object appear to be hidden on a certain page until you bring it up with a mouse click or hover. You can also make a green image that's basically a silhouette and cut it up into three different portions, give them a little bit of exact positioning (each with their own division) and have a little z-index, then you've got yourself that. You might also want to cut up the actual character into three parts to make it easier.