nathan! help with your lightbox! its broken

  • 1
  • Question
  • Updated 5 years ago
hi,
the lightbox nathan made is broken when i click open 2nd lightbox it doesnt work, i managed to find the problem, a typo i fixed that but now the lightbox doesnt close!

help

alex

http://tellyads.cz.cc/zzzzzzzz
▲is the page with code on▲

P.S.
im using google chrome
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Why Don't You Use My Shadow Box
Which i gave you on this post
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i didn't think that Shadow Box could have HTML codes in it, i need to put my share , rate & comment HTML code in it
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Alex! Sorry, I just woke up about 30 minutes ago. You have to create a different function. Here is the code you can use for 2 light boxes:

<!--

<style type="text/css">
.black_overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.3;
opacity:.30;
filter: alpha(opacity=30);
}
.white_content {
display: none;
position: fixed;
top: 15%;
right:15%;
width:70%;
padding: 16px;
background-color: white;
z-index:2002;
border-radius:20px;
border-top-right-radius:0px;
-moz-border-radius:20px;
-moz-border-top-right-radius:0px;
-webkit-border-radius:20px;
-webkit-border-top-right-radius:0px;
overflow:auto;

box-shadow:0px 0px 15px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px black;/* Mozilla shadow version*/
}
/*
#light_2 {
display: none;
position: fixed;
top: 2%;
left:3%;
right:3%;
width:94%;
height:93%;

bottom:2%;
padding:5px;
background-color: #f7f7f7;
z-index:9009;
border-radius:20px;
border-top-right-radius:0px;
-moz-border-radius:20px;
-moz-border-top-right-radius:0px;
-webkit-border-radius:20px;
-webkit-border-top-right-radius:0px;
overflow:hidden;

box-shadow:0px 0px 15px black;
-webkit-box-shadow:0px 0px 15px black;
-moz-box-shadow:0px 0px 15px black;
}
*/
#close_lightbox {
display:none;
position:fixed;
top:13%;
right:14%;
/*border-radius:100%;*/
z-index:8000;
background-color:none;
/*border:3px solid white;*/
width:30px;
height:30px;
margin:5px;
color:white;
text-align:center;
font-size:1.5em;
box-shadow:0px 0px 0px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 0px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 0px black;/* Mozilla shadow version*/

}

#close_lightbox:hover {

position:fixed;
top:13%;
right:14%;
/*border-radius:100%;*/
z-index:3000;
/*background-color:black;
border:3px solid white;*/
width:30px;
height:30px;
margin:5px;
box-shadow:0px 0px 0px;
-webkit-box-shadow:0px 0px 0px;
-mox-box-shadow:0px 0px 0px;
color:white;
cursor:pointer;
text-align:center;
filter:alpha(opacity=100);

box-shadow:0px 0px 0px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 0px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 0px black;/* Mozilla shadow version*/
/* CSS3 standard */
opacity:1.0;
}

#close_lightbox_2 {
display:none;
position:fixed;
top:13%;
right:14%;
/*border-radius:100%;*/
z-index:8000;
background-color:none;
/*border:3px solid white;*/
width:30px;
height:30px;
margin:5px;
color:white;
text-align:center;
font-size:1.5em;
box-shadow:0px 0px 0px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 0px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 0px black;/* Mozilla shadow version*/

}

#close_lightbox_2:hover {

position:fixed;
top:13%;
right:14%;
/*border-radius:100%;*/
z-index:3000;
/*background-color:black;
border:3px solid white;*/
width:30px;
height:30px;
margin:5px;
box-shadow:0px 0px 0px;
-webkit-box-shadow:0px 0px 0px;
-mox-box-shadow:0px 0px 0px;
color:white;
cursor:pointer;
text-align:center;
filter:alpha(opacity=100);

box-shadow:0px 0px 0px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 0px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 0px black;/* Mozilla shadow version*/
/* CSS3 standard */
opacity:1.0;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">

function showLightbox()
{
$('#light').fadeIn(200);
$('#fade').fadeIn(200);
$('#close_lightbox').fadeIn(200);
}
function hideLightbox()
{
$('#light').fadeOut(200);
$('#fade').fadeOut(200);
$('#close_lightbox').fadeOut(200);
}

</script>

<script type="text/javascript">
function showLightbox2() {

$('#light_2').fadeIn(200);
$('#fade_2').fadeIn(200);
$('#close_lightbox_2').fadeIn(200);
}

function hideLightbox2() {
$('#light_2').fadeOut(200);
$('#fade_2').fadeOut(200);
$('#close_lightbox_2').fadeOut(200);
}
</script>

<a href="#" onclick="showLightbox();return false;">Show the first Lightbox</a>
<img onmousedown="hideLightbox(); return false;" id="close_lightbox" src="http://my.nathansmusicstudio.cz.cc/re...>

<div id="light" class="white_content">

1st Lightbox's content goes here
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra urna vitae mi hendrerit adipiscing. Curabitur viverra posuere nulla vel laoreet. Morbi et nisl ut lorem blandit consectetur. In et feugiat neque. Duis et sapien at odio sodales pretium eget et dui. Nullam eget velit turpis. Duis at felis nisi, in aliquet libero. Suspendisse pellentesque, turpis vel pellentesque malesuada, nunc nisi vulputate elit, eget cursus elit nulla id leo. Vivamus quis nisl urna, ut gravida lectus. Duis accumsan malesuada tortor non fermentum. Ut malesuada tristique urna quis eleifend. Curabitur at eros nulla, quis tincidunt purus. Cras sit amet leo lectus, quis placerat velit. Sed pulvinar tortor tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel tellus justo, quis eleifend tortor. Sed viverra augue lobortis leo vestibulum tempor. Nunc posuere, erat quis sollicitudin rhoncus, sapien erat tempor massa, at condimentum risus metus nec dolor. Nam non felis ut velit mattis fermentum a eget magna. Ut vehicula enim at metus commodo congue.

In et massa accumsan orci suscipit pretium. Aliquam tempor velit ac lorem dapibus rhoncus. Donec pellentesque mattis nibh ut gravida. Nulla convallis, urna sed cursus vulputate, lorem metus pulvinar massa, in mollis lorem velit in enim. Integer risus massa, condimentum at dictum ut, adipiscing convallis quam. Pellentesque sollicitudin, tellus vitae dignissim gravida, dolor ligula vestibulum massa, vitae tristique magna turpis vel justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur faucibus, est et congue suscipit, est nisl blandit augue, eget mattis leo tortor non mauris. Nullam justo ipsum, sagittis eget posuere a, faucibus ut elit. In molestie, lorem non feugiat commodo, augue ante sagittis nisi, varius pharetra sem dolor in nulla. Quisque iaculis egestas purus eu hendrerit.

Donec tempus luctus sem, quis accumsan felis venenatis vitae. Cras justo augue, luctus ac lobortis et, viverra malesuada lacus. Praesent vitae sem a nunc consequat luctus. Nunc in sodales lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi mi ligula, dignissim id porttitor interdum, sollicitudin ut ligula. Aliquam aliquam est nulla, et sollicitudin erat. Morbi egestas est non velit facilisis ac consequat nibh sodales. Ut tempus fringilla nisl ultrices interdum. Ut cursus sagittis nibh, sed viverra quam convallis ac. Morbi commodo diam eget odio placerat id aliquam tortor malesuada. In gravida venenatis nisl, sit amet lobortis velit elementum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis augue erat. Phasellus molestie, nulla at mollis fringilla, sem metus vestibulum odio, a pellentesque lacus felis a nunc. Donec ut consequat felis. Pellentesque malesuada dignissim ultricies. Integer neque nulla, vestibulum consequat laoreet sed, lobortis in est. Ut non erat et ligula porttitor hendrerit rutrum a elit.

Pellentesque non mauris vitae dui aliquam blandit. Etiam metus tellus, volutpat feugiat venenatis sed, tincidunt eu leo. Aenean risus nulla, faucibus eget pretium et, auctor in justo. Aenean vel mauris vitae mi egestas varius sit amet pellentesque turpis. Cras purus ipsum, adipiscing ac euismod id, pulvinar vitae mi. Nunc sit amet magna sed purus viverra sollicitudin. Duis rhoncus augue vitae ligula faucibus ac posuere velit vulputate. Nunc sed dui ac orci convallis congue. In leo lectus, aliquam ac viverra nec, feugiat sed purus. Maecenas fermentum, diam et cursus dapibus, mauris ante varius ante, at eleifend ante ante id quam. Vivamus eget nulla sed sapien tincidunt molestie in id odio. Cras hendrerit, urna a congue tincidunt, velit turpis suscipit nibh, ac fringilla ipsum felis eget diam. Fusce dictum tellus ut augue cursus vel egestas dolor aliquam. Nullam vehicula dignissim ante, blandit suscipit augue tempor a. Fusce bibendum lobortis libero mollis vehicula. Vestibulum vitae tellus eros.

Vivamus posuere sapien ut enim semper tristique. Nulla vestibulum diam in mi hendrerit lobortis sed eget felis. Integer velit arcu, porttitor id mattis nec, vestibulum nec tellus. Suspendisse rhoncus vestibulum eros nec tempor. Quisque pharetra leo eget ante lobortis non imperdiet purus imperdiet. Sed sed dignissim mi. Nulla ultrices elit nunc. Maecenas ac massa nisi, faucibus aliquam mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec nunc sit amet risus consequat faucibus. Cras eros sapien, elementum non convallis non, rutrum ut tellus. Morbi suscipit rutrum libero, id posuere urna eleifend nec. Ut gravida metus nec turpis pellentesque id cursus leo accumsan.

</div>

<div id="fade" onclick="hideLightbox()" class="black_overlay"></div>

<br><br>

<a href="#" onclick="showLightbox2();return false;">Show the second Lightbox</a>
<img onmousedown="hideLightbox2();" id="close_lightbox_2" src="resources/Cancel.png">

<div id="light_2" class="white_content">

2nd Lightbox's content goes here
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra urna vitae mi hendrerit adipiscing. Curabitur viverra posuere nulla vel laoreet. Morbi et nisl ut lorem blandit consectetur. In et feugiat neque. Duis et sapien at odio sodales pretium eget et dui. Nullam eget velit turpis. Duis at felis nisi, in aliquet libero. Suspendisse pellentesque, turpis vel pellentesque malesuada, nunc nisi vulputate elit, eget cursus elit nulla id leo. Vivamus quis nisl urna, ut gravida lectus. Duis accumsan malesuada tortor non fermentum. Ut malesuada tristique urna quis eleifend. Curabitur at eros nulla, quis tincidunt purus. Cras sit amet leo lectus, quis placerat velit. Sed pulvinar tortor tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel tellus justo, quis eleifend tortor. Sed viverra augue lobortis leo vestibulum tempor. Nunc posuere, erat quis sollicitudin rhoncus, sapien erat tempor massa, at condimentum risus metus nec dolor. Nam non felis ut velit mattis fermentum a eget magna. Ut vehicula enim at metus commodo congue.

In et massa accumsan orci suscipit pretium. Aliquam tempor velit ac lorem dapibus rhoncus. Donec pellentesque mattis nibh ut gravida. Nulla convallis, urna sed cursus vulputate, lorem metus pulvinar massa, in mollis lorem velit in enim. Integer risus massa, condimentum at dictum ut, adipiscing convallis quam. Pellentesque sollicitudin, tellus vitae dignissim gravida, dolor ligula vestibulum massa, vitae tristique magna turpis vel justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur faucibus, est et congue suscipit, est nisl blandit augue, eget mattis leo tortor non mauris. Nullam justo ipsum, sagittis eget posuere a, faucibus ut elit. In molestie, lorem non feugiat commodo, augue ante sagittis nisi, varius pharetra sem dolor in nulla. Quisque iaculis egestas purus eu hendrerit.

Donec tempus luctus sem, quis accumsan felis venenatis vitae. Cras justo augue, luctus ac lobortis et, viverra malesuada lacus. Praesent vitae sem a nunc consequat luctus. Nunc in sodales lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi mi ligula, dignissim id porttitor interdum, sollicitudin ut ligula. Aliquam aliquam est nulla, et sollicitudin erat. Morbi egestas est non velit facilisis ac consequat nibh sodales. Ut tempus fringilla nisl ultrices interdum. Ut cursus sagittis nibh, sed viverra quam convallis ac. Morbi commodo diam eget odio placerat id aliquam tortor malesuada. In gravida venenatis nisl, sit amet lobortis velit elementum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis augue erat. Phasellus molestie, nulla at mollis fringilla, sem metus vestibulum odio, a pellentesque lacus felis a nunc. Donec ut consequat felis. Pellentesque malesuada dignissim ultricies. Integer neque nulla, vestibulum consequat laoreet sed, lobortis in est. Ut non erat et ligula porttitor hendrerit rutrum a elit.

Pellentesque non mauris vitae dui aliquam blandit. Etiam metus tellus, volutpat feugiat venenatis sed, tincidunt eu leo. Aenean risus nulla, faucibus eget pretium et, auctor in justo. Aenean vel mauris vitae mi egestas varius sit amet pellentesque turpis. Cras purus ipsum, adipiscing ac euismod id, pulvinar vitae mi. Nunc sit amet magna sed purus viverra sollicitudin. Duis rhoncus augue vitae ligula faucibus ac posuere velit vulputate. Nunc sed dui ac orci convallis congue. In leo lectus, aliquam ac viverra nec, feugiat sed purus. Maecenas fermentum, diam et cursus dapibus, mauris ante varius ante, at eleifend ante ante id quam. Vivamus eget nulla sed sapien tincidunt molestie in id odio. Cras hendrerit, urna a congue tincidunt, velit turpis suscipit nibh, ac fringilla ipsum felis eget diam. Fusce dictum tellus ut augue cursus vel egestas dolor aliquam. Nullam vehicula dignissim ante, blandit suscipit augue tempor a. Fusce bibendum lobortis libero mollis vehicula. Vestibulum vitae tellus eros.

Vivamus posuere sapien ut enim semper tristique. Nulla vestibulum diam in mi hendrerit lobortis sed eget felis. Integer velit arcu, porttitor id mattis nec, vestibulum nec tellus. Suspendisse rhoncus vestibulum eros nec tempor. Quisque pharetra leo eget ante lobortis non imperdiet purus imperdiet. Sed sed dignissim mi. Nulla ultrices elit nunc. Maecenas ac massa nisi, faucibus aliquam mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec nunc sit amet risus consequat faucibus. Cras eros sapien, elementum non convallis non, rutrum ut tellus. Morbi suscipit rutrum libero, id posuere urna eleifend nec. Ut gravida metus nec turpis pellentesque id cursus leo accumsan.
</div>

<div id="fade_2" onclick="hideLightbox2()" class="black_overlay"></div>

​-->

This has 2 Lightboxes in it. What you have to do is that you have to change the ids and class names and function names because they will all mess up. If you want 3 just tell me and I will add it in to the code for you. If you want 4 let me know, etc.

I hope this information is helpful!

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Remember, don't copy <!-- and -->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks nathan!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem Alex! :)
Photo of Jason Christofilakis

Jason Christofilakis

  • 0 Posts
  • 0 Reply Likes
Hello! I have the site icarlygreeksubs.yolasite.com, which I use to share tv episodes. I really like your lightboxes, especially the second one wich is great! So, here's the thing.. I need a seperate lightbox for every tv episode in each series. The number of the episodes is 29 and that's how many lightboxes I'm going to need.... You think you can hook me up? Thank you!