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
Related
Probably a simple solution. I would like to expand an embedded video underneath the "Watch the video" when it is clicked. Pretty straight forward, however I can't get this code to add the "expanded" class on click to the video__player div for the life of me. Any help here is greatly appreciated, thanks.
Code:
$(".video").click(function() {
$(".video__player").addClass("expanded");
});
.video__player {
display: none;
width: 80vw;
max-width: 560px;
max-height: 315px;
height: 0;
transition: 0.5s;
margin: auto;
}
iframe {
width: 100%;
height: 100%;
}
.expanded {
height: 45vw !important;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player">
<br><br>
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
One, as the comment says, you might not have wrapped it in a $(document).ready(function() {}); handler. Two, your allowFullScreen hasn't set a value. Unset, it's default is false. If you want to allow it fullscreen, set it to true.
Posting your full code through a JSFiddle or a repl.it would help as well, as it could be something else.
In the stackoverflow interpreter, your code seems to be working fine. Perhaps it's something with whatever interpreter you're using?
I am designing a webpage and want multiple images coming from one image using Javascript, CSS or Jquery whatever is required.
<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >
I am new to javascript and so it's getting difficult to solve it.
main.png is the main image and I want submain1.png, submain2.png, submain3.png images to come from the main.png one after the other as soon as the page loads.
As others have suggested, we think you are asking about sprite sheets. Now that you know a more common term for what you might be after you could try some searches. There are lots of CSS sprite issues on this site:
CSS Sprite Issues On StackOverflow
This is a quick demo:
#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }
.iconback {
border: solid 1px;
background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}
.window { width: 80px; height: 80px; margin: 1em; }
<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>
<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.
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;
}
I am new to responsive design. I am trying to use Foundation orbit slider for my project.
I am not able get the captions displayed for the pictures. I have following code...
<div class="row">
<div class="twelve columns">
<div id="slider">
<img src="images/pic1.jpg" />
<img src="images/pic2.jpg" />
<img src="images/pic3.jpg" />
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption1...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
</div>
When I tried this for first time it didn't work. I tried looking in Stackoverflow and tried
the fix given by commanderdemon. Still it didn't work. I dont even get the dark strip for caption on the pics.
In foundation.css I see that display is set to none for the class orbit-caption
/* Captions ---------------------- */
.orbit-caption { display:none; font-family: inherit; }
.orbit-wrapper .orbit-caption { background: black; background: rgba(0, 0, 0, 0.6);
z-index: 30; color: white; text-align: center; padding: 7px 0; font-size: 13px;
position: absolute; right: 0; bottom: 0; width: 100%; }
By removing it I was able to see a tiny black strip (around 10px high) on the pic and the 3 captions are all appended and fallen out of the pictures.
Should the pictures be less than 400px in height? Is there a css fix required for this?
What am I doing wrong?
I have tried using just image tag instead of anchor tag. Both have same result.
P.S. I am using the foundation.css as it comes with download. I am not allowed to post a screen shot either...
Sorry found the mistake... I was supposed to put data-caption="#captionOne"
-Jody
In your js are 'captions' set to 'true' ?
<script type="text/javascript">
$(window).load(function() {
$("#featured").orbit({
captions : true
});
});
</script>
Provide same ID in image tag as in SPAN caption tag