Lightbox 2.0! (The lightbox I created)

  • 1
  • Praise
  • Updated 6 years ago
Hello everyone! Remember that other post I created? It was Lightbox? It was: I know how to get Lightboxes on our Yola sites!

Well, I just made a way better version that fades in and out and it has the "X" on the corner like Yola's! So, here is the codes!

First, drag over an HTML widget to your page. A box will pop up. Paste this in:



<!--

<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.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 15%;
right:15%;
width:70%;
padding: 16px;
border: 0;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
}

#close_lightbox {
display:none;
position:fixed;
top:13%;
right:14%;
border-radius:100%;
z-index:8000;
background-color:black;
border:3px solid white;
width:30px;
height:30px;
margin:5px;
color:white;
text-align:center;
font-size:1.5em;
box-shadow:0px 0px 10px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 10px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 10px 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 10px black;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 10px black;/*Safari shadow version*/
-moz-box-shadow:0px 0px 10px 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(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
}
function hideLightbox()
{
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
}
</script>

<button onclick="hideLightbox()" id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>

<p>To see the lightbox, <a href="#" onclick="showLightbox()" style="text-decoration:underline">click here</a></p>
<div id="light" class="white_content">
<center><font size="3" face="arial">Lightbox title</font><br><br></center>

<center>

<font size="3">LIGHTBOX CONTENT HERE </font>
<br><br>
<font size="2">
(You can put forms in, anything you want! Even iframes! So go ahead and put your content here!)
<font>

</center>
</div>
<div id="fade" class="black_overlay"></div>


-->



Ok, now I'm going to explain this code!

First, what exactly does this "new version" do?

Well, it looks much nicer! It has th "X" on the corner and there is no images that have to be in your file manager! It is a button! But, some browsers wont get this because it uses border-radius to make the circled X on the side. So, IE 8 and down wont get this. Because it does not have CSS3 in it which has border-radius. So, you can just choose an image of it if you don't have an upgraded browser.

How does it work?

Well, when you click the link that triggers the lightbox, it triggers a JavaScript "function" which is defined in the script tags. That function makes a dark overlay display, the lightbox, and the "X" button. The function is called "showLightbox()" Now, how in the world does it hide the lightbox? Well, it triggers another function when you click the "X" button. It hides the overlay, the lightbox and the X button. That function is called "hideLightbox()" If you see the onclick part, that triggers the functions. So, that is how it works!

Can I add more than one now?

Right now, you cannot. I am very sorry but right now you can only have one lightbox to display on the page right now. This lightbox is not really for images, it is for content. I am working on another one that will allow you to hide / show MORE than one lightbox which will be released right on this topic pretty soon! Just the only problem is that the "more than on" lightboxes on a page wont be fading in unless you add some coding your self. But, it is possible I'll make it work where it will fade all of them!

Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy & excited!

Posted 9 years ago

  • 1
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
THanks!

OH man! I just found a STRANGE glitch where You can move the Yola banner in a diffrent place!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thats funny!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow! Thats strange! :)
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Amazing new discovery! Anywhere I move the box, the yola ad follows it! o_0
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow! That is funny! :) It must be some where in the coding, maybe a div id and it is interfering with the ad.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Oh- It's fixed now :)
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Any way of making it STAY at the bottom instead of it going everywhere you go?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh yes! Just change the "position:fixed" to "position:absolute" (without quotes)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Does this help ACoolOne?
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
How to do that kevin?Reply fast
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil, what would you like to do?
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Everyone, if you just want to implent images, PrevPic will be perfect for you
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I love PrevPic! :) But, I still like mine because of the X in the corner, but, for multiple images I like PrevPic! You could even sell licenses to get some money for your hard work!

Thanks,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, Lightbox 2 is cool too. EX: http://pauljohnsonphotos.com/gallery....
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
All three are soo cool Nathan!
I wonder where both of us come up with this stuff.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Our heads! :) lol I know, they're all very neat! But, I think your's is more better than mine because your's can do multiple images, even though mine has more than images. How did you even make Prevpic? You are super great at JavaScript! Also, what's that HTML5 thing you made? Have you made any updates lately? I forgot the url to it. You can either send it to support@nathansmusicstudio.cz.cc or you can post it here.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
thanks Nathan!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem! :)
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes
Nathan

Thanks for all the work on lightboxes. Mine still won't scale correctly (where are the boxes' dimensions being determined in the code?) And for some reason, the attractive round "x" in the upper right corner becomes a square with an "x" in Safari (and any way to change the x to the upper left corner?) Thanks again

Richard
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, it is an X with a square because you need to update your lightbox code. I am posting the new code that will work in all browsers in a second here...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, the boxes' dimensions is in the CSS. Here is a screen shot:



This is in percentage (%) so you can change it and it will be the the percentage of the page. So, lets say you set the width to 50%, this will be 50% of the page. So it will be half of the page.

Hope this helps!
Nathan
Photo of smashismkills

smashismkills

  • 1 Post
  • 0 Reply Likes
Nathan

Im haveing trouble with the lightbox. Im completely new to html, css and such. I cant seem to get the pics to come out right. Can you give me some tips on how to put images in the lightbox? I want to use the lightbox2 style if at all possible. Also can you host my photos?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I am posting a code below of the newest lightbox code...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
UPDATE ON THE LIGHTBOX CODE!

Hi everyone! I have a newer version of this Lightbox code that will work in all browsers, it is right here: (on this forum) http://forum.yola.com/yola/topics/upd... This has a way better X in the corner of it, and, it is just better.

Thanks,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi rstravisjr! Here is the code for images:


<br>
<!--

<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.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 15%;
right:15%;
width:70%;
padding: 16px;
border: 0;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:auto;
height: 40%;
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*/
}

.white_content img {
width:50%;
height:100%;
}

#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;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
}
function hideLightbox()
{
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
}
</script>

<a href="#" onclick="showLightbox(); return false;">Show the lightbox!</a>

<img onmousedown="hideLightbox(); return false;" id="close_lightbox" src="http://my.nathansmusicstudio.cz.cc/resources/Cancel.png">

<div id="light" class="white_content">
<img src="resources/IMAGE.JPG">
</div>
<div id="fade" onclick="hideLightbox()" class="black_overlay"></div>

-->
<br>


Don't copy <!- or --> , just the code in between them.

Also, you will need to change "IMAGE.JPG" to the actual name of the image in your file manager of your website. Like, just go into File Manager and then find the image and the name is below it, then just remember that (with the little .jpg or whatever at the end) and paste it in right after resources/ in the img src part.

Here is the File Manager button screenshot:



I hope this helps!
If you have any questions or problems with this script please don't hesitate to let me know! :)

Nathan
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
watch this post for a very cool lightbox version3 Here
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil, that lightbox you posted, is that shadow box? It looks like it is and it looks like you got it from www.shadowbox-js.com It is cool though, you should make a example page of it so we can see how it looks before we do all of the work.

Thanks,
Nathan
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Yeah You Are Right Nathan But I Have Done Some Cool Things In The Js Files Of Shadow Box That Is Why I needed To Share This
Here's My Website
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
please can i have some help,
here the post
http://forum.yola.com/yola/topics/nat...
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Just gonna say this code is very strong and easy to understand, and I use it for every site wheter its for a login box or a blog. Keep up the good work.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Mike!
Photo of ottox232

ottox232

  • 17 Posts
  • 0 Reply Likes
Thanks for sharing this code. This could be useful for making a map application, where you click a part of the map and an image pops out that is zoomed-in for more detailed directions. Or it could be used in an image of a restaurant or bar exterior. Click on the door and suddenly the inside of the building is visible. Or it could contain virtual tours of homes. Interesting.
Photo of satidents

satidents

  • 78 Posts
  • 4 Reply Likes
When I place multiple lightboxes each containing a unique embed youtube code to display a different youtube video. They all display the same video even though in the HTML coding I have different youtube embed codes. I have made an example here http://skyidentsplayer.yolasite.com/t... - I know there is a multiple lightbox code which allows more than one lightbox but it appears as one object. I need them to be separate like on this page http://www.skyidents.com/bio-new-sd.php I have images in between the lightbox buttons. So having them on the same line would not work. I would be very greatfull if someone knows a code that would work for this
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
This is so cool! I'm using it in my blog posts when I have multiple images to display for a certain post, or even YouTube videos! So professional and saves space. Great job :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Brandon! :) But, stay tuned! I am making a jQuery lightbox plugin called WowBox, and all you do to open a lightbox is this:


<a href="#div-id" rel="wowbox" title="Title of lightbox here">Click here to open #div-id in WowBox</a>



The above would open #div-id on the page.

If you want to open an image, even better! You don't have to use any elements on the page, you simply put the URL to the image in the href! So to open "image.jpg" in WowBox, you would simply do this:


<a href="resources/image.jpg" rel="wowbox" title="Caption of image here">Click here to open image.jpg in WowBox</a>



See how much easier that is? It will take a while to get it all organized, but I already got it working a little. Also I'm going to add flash support for things like YouTube videos, and I'm going to add AJAX support so you can embed external pages right into your page from WowBox by just putting the URL to the external page in the href and rel="wowbox" and then title="" for a title to the lightbox.

I'm really excited about this, and, the lightbox has a new style with optional animations! :)

I'll let you and everyone else know when I have the examples running on my WowBox site! :)

Kind regards,
Nathan
Photo of Jason Christofilakis

Jason Christofilakis

  • 0 Posts
  • 0 Reply Likes
But, hey, what about multiple lightboxes with different iframes into them? Please help!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Jason!

Sorry about taking so long to respond.

I made this lightbox/modal box script a while ago; it's outdated now and, frankly, inefficient. I made it back when I was a beginner in JavaScript.

A better modal box plugin to use (which allows you to have as many modal boxes as you want) is called fancyBox. Its design is similar to the one I made (actually, I forgot how the one that I made looks, haha - I haven't seen it in so long) but it is a lot nicer and you can load iframes, divs, images, etc. into it.

First, drag over an HTML widget and paste the following code into it. Put this HTML widget at the top of the page only once.


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

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/25819920/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/25819920/fancybox/jquery.fancybox.pack.js"></script>

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/25819920/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>



Whenever you want to open a modal box, all you have to do is this in an HTML widget:


<a href="http://google.com/" class="fancybox" rel="group">Click here to open Google.com in a fancyBox</a>



Change http://google.com/ to whatever URL you would like to open in an iframe in a fancyBox and the link text in between the HTML tags to whatever link text you want to display (when the link is clicked, the fancyBox will open and load the URL in the "href" attribute in the modal box).

You can make as many links/modal boxes as you want like this on the page. Just make sure that you have the first peice of code at the top of every page you want to have modal boxes on.

If you have any issues with this code or any questions, let me know and I will help. I haven't tested it but I am sure that it will work since it is fairly basic.

Nathan
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Nathan

We are excited to see you back on the Yola Support Forum, we've been missing you! :-)

I've tried to use the code you posted above, unfortunately it doesn't seem to work, I can't see any modal box. When I click on the link, the Google website opens in the same window. Maybe you'd like to review the code or instructions? Or did I make a mistake?
Photo of Baenjamin Wyatt

Baenjamin Wyatt

  • 2 Posts
  • 0 Reply Likes
I really want to thank you for answering! Nevertheless, i found a little workaround on the issue I stated above. Everytime I wanted to add another lightbox, I changed the index parametre (or any parametre you want :p) so it recognizes it as a different and separate lightbox! Thanks again!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Stefan

I'm glad to be back. :)

It looks like it was my mistake, sorry. I changed the code for the link a little but Google still won't open in it for me, here's my test page: http://dl.dropboxusercontent.com/u/25...

Here's the new code:


<a href="fancybox-iframe.html" class="fancybox" data-fancybox-type="iframe">Click here to open fancybox-iframe.html in a fancyBox</a>

Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Jason,

No problem! And, yeah, I thought you may have came up with your own solution by now since it's been about 24 days since you asked here but I still wanted to answer just in case :)