Update on Lightbox: Better X in the corner of it!

  • 1
  • Praise
  • Updated 7 years ago
Hi everyone! I created a lightbox 2 myself, but, the X in the corner probably didn't look right in some browsers that do not have CSS3. Because CSS3 has border-radius in it, and that X button was a button (not an image) styled with some CSS and SS3 and without border radius it will be a big square - not a circle! So I changed it to an image! (I even have the image hosted on my website so you don't have to download anything) Here is the code:



<!--

<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*/
}

.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*/
border:none;

}

.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);
border:none;

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>

To see the lightbox, <a href="#" onclick="showLightbox(); return false;"><u>click here</u></a>.

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

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

<font size="4" face="arial" color="black">

<center> Lightbox content goes here! You can put in anything you want! Here are some things you can add:<br><br>
</center>
<ul>
<li>I-frames</li>
<li>HTML</li>
<li>JavaScript</li>
<li>Flash objects</li>
<li>YouTube videos</li>
<li>Images</li>
<li>And much more!</li>

</ul>

</font>
<br><br>
<br>

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

-->



Do not copy <!-- or --> Just the stuff in between them.

So, this looks so much nicer! Here is an example page of the new lightbox: http://free-scripts.yolasite.com/ligh...

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Nice work, Nathan. I like it.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Jean S! :)
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
I really like this! I'm gonna have to find somewhere to slip this into my site, one problem I'm having though is the close button, I don't see it, at all!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hi, I'll check the code and get back with you. Do you mean on the example page or when you put it in your site? I might have set up the wrong thing. Oh, I see why! My whole domain system is down. http://nathansmusicstudio.cz.cc is down. I thing the domain reistrar is down so all domains aren't working right now, so that is why you don't see it because it is hosted on my website (the image) and it is down right now. Just change the img src to: http://free-scripts.yolasite.com/reso...

Thanks again! :)

-->
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Can we use them unlimited Or we can use it only for once like your previous lightbox
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, if you want to make it where you have more than one, you can! But, it isn't really super duper easy. But, all you have to do is rename an id accept you don't have to rename "fade" or ".black_overlay" or ".close_lightbox" or any of that. All you have to do is rename "light" part in the JavaScript and in the div id. So, in the JavaScript, where it has the $('light').fadeIn(500) Just rename 'light' to like 'light2' and then in the <div id="light" just rename the second lightbox div to <div id="light2" Here is what 2 lightboxes would look like:



<!--

<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*/

}

.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*/

border:none;

}

.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);

border:none;

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);

}

function showLightbox2()

{

$('#light2').fadeIn(500);

$('#fade').fadeIn(500);

$('.close_lightbox').fadeIn(500);

}

function hideLightbox2()

{

$('#light2').fadeOut(500);

$('#fade').fadeOut(500);

$('.close_lightbox').fadeOut(500);

}

</script>

To see the lightbox, <a href="#" onclick="showLightbox(); return false;"><u>click here</u></a>.

To see the 2nd lightbox, <a href="#" onclick="showLightbo2x(); return false;"><u>click here</u></a>.

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

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

<font size="4" face="arial" color="black">

<center> Lightbox content goes here! You can put in anything you want! Here are some things you can add:<br><br>

</center>

<ul>

<li>I-frames</li>

<li>HTML</li>

<li>JavaScript</li>

<li>Flash objects</li>

<li>YouTube videos</li>

<li>Images</li>

<li>And much more!</li>

</ul>

</font>

<br><br>

<br>

</div>

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

<font size="4" face="arial" color="black">

<center> The content of the second Lightbox goes here! You can put in anything you want! Here are some things you can add:<br><br>

</center>

<ul>

<li>I-frames</li>

<li>HTML</li>

<li>JavaScript</li>

<li>Flash objects</li>

<li>YouTube videos</li>

<li>Images</li>

<li>And much more!</li>

</ul>

</font>

<br><br>

<br>

</div>

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

-->



If you have any questions or comments please let me know!

Sincerely,
Nathan
Photo of Celine

Celine

  • 11 Posts
  • 0 Reply Likes
Hi Nathan, I'm not sure if you'll read this, since these messages are all over 2 years old..

I'm trying to use your codes for several lightboxes. One lightbox, I know how to get that (finally...). But several lightboxes is a bit harder.
The only thing I can't figure out is how to have an image ('x') to click on to make the lightbox2 go away. It's only working for lightbox1

I thought maybe copying: img onmousedown="hideLightbox(); retu.... and put in a '2', but that doesn't work.

Can you help me?

Kind regards,
Celine
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
not working wrong code
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
please reply fast the above code for more that one lightbox is wrong
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil! Your website is sweet! Just, I saw that it looks like you have copied the whole first part of the homepage from Yola.com. Did you copy the source code or what? I mean, your whole site looks nice but you could get in trouble for that, I think.

Regarding the Lightbox code, what part isn't working? Is both links opening up one lightbox? Maybe I forgot to mention, the part where it says <a href="#" onclick="showLightbox();return false;"> Just change that for the second lightbox trigger link to <a href="#" onclick="showLightbox2();return false;">

If this does not work, let me know.

Nathan
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
hey nathan i want this version of lightbox on onload event can u give me the code.....

as fast as you can
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil, here is the code for that:



<!--

<style type="text/css">

.black_overlay {

display: block;

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: block;

position: absolute;

top: 8%;

right:15%;

width:70%;

padding: 16px;

border: 0;

background-color: white;

z-index:2002;

border-radius:10px;

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*/

}

.close_lightbox {

display:block;

position:absolute;

top:6%;

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*/

border:none;

}

.close_lightbox:hover {

position:absolute;

top:6%;

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);

border:none;

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>

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

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

<center><font size="3">Lightbox content goes here!</font></center>

</div>

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

-->
‚Äč


Remember not to copy <!-- and -->

Hope this helps!

Happy building,
Nathan
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Hey nathan thanks for all your help if you need any help regarding some cool codes like this one.

I would like to help[ you.

Thanks,
Adil....
Photo of Adil Khan

Adil Khan

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

Howie

  • 22 Posts
  • 0 Reply Likes
love these lightboxes you guys are creating, however for an old guy like me I need something a bit more idiot proof, so my question is
A) how do you put a picture into one of these light boxes and
B) where do you get the file manager path for the image you want to place in the box.

Cheers guys
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Howie. To put an image into one of these, I will post another code in a little bit where you can add images to it easily.

Nathan
Photo of Howie

Howie

  • 22 Posts
  • 0 Reply Likes
You are a star, I look forward to it.... thank you
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Howie, I will be posting it soon (I just need to get it all together).

Thanks,
Nathan
Photo of Howie

Howie

  • 22 Posts
  • 0 Reply Likes
Thanks Nathan, look I have actually worked out how to put an image in the lightbox you created, hurray!!!, I did this by replacing the text shown below with the image source from my resource folder, another thing I have found, another hurray!!!, but with that all said, when the image pops up in the lightbox, its not centred and is too big fit into the lightbox window, and cuts large corners off the image. I hope you can help and sort that out. I dont know if the problem is due to the image I am using or whether it needs some type of scaling code to fit in the lightbox. I am sure you know the answer.

Once again thank you very much for any help you can offer
<!--
<li>I-frames</li>
<li>HTML</li>
<li>JavaScript</li>
<li>Flash objects</li>
<li>YouTube videos</li>
<li>Images</li>
<li>And much more!</li>
-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Howie, I'm sure that Nathan will be along to respond to your questions. I would deduce that you would need to resize your images a bit smaller. But Nathan will be able to confirm this or offer alternative suggestions.

As for the rest of your questions, we have a number of these on our tutorials which you may find quite useful. If you get stuck on something or cannot find the information needed, please let us know and we'll be glad to help further.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Everyone there is a problem with this thread! Ok first Sanja's reply is messed up. I think it is because of the HTML code that Howie posted. Howie can you edit your reply and wrap that code you pasted in <!-- and --> like this:

<!--

Code here

-->

Here is a screen shot of how it looks:



Thanks.

Howie to answer your question it would be a good idea (Thanks Sanja!) to resize your image, but you can also add in style to the image tag to resize it also. So in the lightbox code for the <img src="" /> tag, add in this HTML attribute to the image tag: style="width:400px"

So the img tag should look something similar to this:

<img src="URL-of-image" style="width:400px;" />

But it will need to be changed to how you want it. Just lower the number of pixels to make it smaller and raise the number of pixels to make it larger. But keep 'px' after the number.

If there is already a style="" in the img tag then just add in width:400px; but remember to separate the CSS attributes with a semicolon ; so it will render correctly.

If you have any more questions please do ask! :)

I hope this helps.

Nathan
Photo of Howie

Howie

  • 22 Posts
  • 0 Reply Likes
I would happily edit the post, but I dont know how to, can I delete it, can someone else delete it, heeeeeeelp
Photo of Howie

Howie

  • 22 Posts
  • 0 Reply Likes
is that ok now.......
Photo of Howie

Howie

  • 22 Posts
  • 0 Reply Likes
Hi Nathan..... sorry about breaking Yola thread before, it seems fixed now, anyway hopefully one final problem you could solve

I resized the image as suggested and I could fit a smaller image into the light box you have created, that said I require a larger image to fit into the lightbox as the purpose is to highlight missed marine life in photographs taken when scuba diving.

So what I am asking is there any way that the height of the lightbox can be doubled or tripled etc etc, so that a larger image can be placed inside the box, I thought maybe the larger image would create a scroll bar if it was too big, however the dimensions of the lightbox seem fixed and cut off the image as prevously mentioned, if it were possibe to create a lightbox with greater height this would solve this issue. The width of the light box is fine.

I hope this makes sense, and I hope I am not bothering you too much.

There are some cool pictures and videos on the website, if you like marine life or scuba diving, if you would like to check the site out please be my guest.

howiesscuba.com

As always thank you very much for your help and patience
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi, firstly, this is great - just what I have been looking for! I love the Yola Forum :). Secondly, I have had a mind blank and I have forgotten how to use an image to open the lightbox.

Oh and Howie, I suggest using either a Flash application that allows the user to zoom into the image or use an iFrame that has scrolling bars.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi mangopearmedia,
I think Nathan will be the best to help out here with this... I am hoping he will get an alert on this and come to give some information.

Kind Regards,
Emmy
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Nathan, could you please answer? I would really like to have this, I have an amazing website that this will suit perfectly!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Don't worry... I have sorted it for myself!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi guys! I am so sorry about not replying!

To use an image to open the lightbox, just do this:

<a href="#" onclick="showLightbox();return false"><img src="resources/image.jpg" /></a>

If you want multiple lightboxes on your site let me know and I wil create you individual ones, and if you do want more than one, please le tme know how much you are wanting so I can make how ever many you want. (You have have as much as you want, just I haven't made it to where you can add multiple ones your self, yet.)

Just let me know.

If you only need one then all you need to do is copy this code below (please use this one instead, the on in the topic above isn't the NEWEST version. In this code below I have put all of the stuff into to files so it is less code for you to copy and paste.) :

I'll post the code later because I am trying to get it to work and it's not working right now but it will work pretty soon and when it does work I will post the code! :)

Sincerely,
Nathan
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Nathan, I have got it working!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok thats good!

@Howie: Did you get this working?
Photo of Chris

Chris

  • 3 Posts
  • 0 Reply Likes
I have a question I have uploaded the my pictures but I'm still having a problem with it. The problem I am having is that I'm using different html widgets for each picture, and I changed the areas too look like this...

<!--
<center>
<a href="#" onclick="showLightbox(); return false;"><img src = "resources/6.jpg" style = "width:300px;"/></a>.
</center>
<img onmousedown="hideLightbox(); return false;" class="close_lightbox" src="http://my.nathansmusicstudio.cz.cc/re...>

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

<center>
<img src = "resources/6.jpg"/>
</center>

<br><br>

<br>

-->
...

But when I click on several images it just shows the same picture, not the one shown in the thumbnail.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Chris. The reason is because when you click on it, it is opening the same one. How much images do you want to open in it? I am going to set up a code real quick that will allow you to put in more images. I just need a number of how much you want.

Thanks,
Nathan
Photo of Chris

Chris

  • 3 Posts
  • 0 Reply Likes
I have 7 images
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok, thanks, I will set it up really quick and post the code below. If you ever need more let me know on this thread.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
If you have a lot of images, you might want to try prevpic:
www.prevpic.yolasite.com
Photo of Chris

Chris

  • 3 Posts
  • 0 Reply Likes
Thanks I will check this out
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah prevpic would be better because mine is not yet made for a bunch of images. Thanks Kevin for suggesting this!

@Kevin: Do you now how I can make my lightbox open images through links like "<a href="resources/image1.jpg" rel="lightbox">Open image 1</a>" I think you know the JavaScript to do this. If you do could you go to my website's Help Desk and then start a ticket just so I don't post my email to this thread on this public forum. The Help Desk is located here: http://nathansmusicstudio.mojohelpdes... Just click "+ New ticket" on the side to start a new ticket and when you start the new ticket it will create an account for you on the help desk so you can login anytime and keep track of all of your tickets.

Thanks in advance!
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
your welcome nathan, and yes, I will help you make a thing that can open multiple images.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Okay, thanks! :)