I know how to get lighboxes in our Yola sites!!

  • 1
  • Praise
  • Updated 8 years ago
Hi, I found out a way to put a light box in our sites!!!!!! Just insert this code anywhere in your page, and edit the parts you want to! And you don't even have to put anything in the HEAD tags! Here is the code:

<!--

<style>
.black_overlay{
display: none;
position: absolute;
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: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>

-->

Now, here is the code for the links to trigger a lightbox. You can add us much as these as you want! Here is the code:

<!--

<p>This is whrere you put the text you want to display in the link paragraph. To display a lightbox click <a href = "javascript:void(0)"

onclick = "document.getElementById('light').style.display='block';document.getElementById

('fade').style.display='block'">here</a>!</p>
<div id="light" class="white_content">This is the content that will display in the lightbox. You can put anything here you want!<br><br><br><br><center> <a href = "javascript:void(0)" onclick =

"document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'">Close this lightbox</a></div>
<div id="fade" class="black_overlay"></div></center>‚Äč

-->

Remember to remove the <!-- and the --> parts.

It will work! See a live preview here Its awesome!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • excited

Posted 9 years ago

  • 1
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Gee, Wufoo wont let me make a form!!! >:(
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Why? Is your account banned? We use Wufoo for our forms too.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
I wasnt banned, but it wont let me save a form becaus e they say: you are asking for an email. that is against our rules!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
But, that is stupid! "You are asking for our email"? That is dum. Don't they have the "Email" field to add? I would say you should contact them. support@wufoo.com
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Any updates on this Wufoo problem?
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Working, now. Because I changd some stuff
Photo of Julie

Julie

  • 2 Posts
  • 0 Reply Likes
I've got a question: is it possible with these codes to make a thumbnail image links to its full version image in a lightbox?
If yes, where should I insert my images names in the code?
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Julia,

You can actually use the Flickr Lightbox Widget to achieve this more easily on your site. The Flickr Lightbox Widget allows you to quickly and easily create a slick photo gallery with thumbnails that link to larger images. For more info and steps on this please refer to the following tutorial - Flickr galleries.

I hope this info is helpful. If you run into any problems, please let us know.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
it wouldnt work for me, i wanted to put my problems form into it but after it didnt work i discovered that my form host provided one that was better as i could change the colours =)

you can see it at http://tellyads.yolasite.com/help and click on the "show problems form" button
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Cool! I am going to try to make this lightbox code I made fade in and out like yours! Also, did you know that this lightbox I created is made of 2 divs, one for the lightbox and one for the black overlay? And they are both fixed so the black will stay there on the page and the lightbox will stay when you are scrolling down! Also, the black overlay is kind of transparent because of a filter.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hi Julie, here is the code you should use to enlarge a picture:

<style>

/*Black_overlay is the faded part that makes the screen fade out*/

.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 is the lightbox part*/

.white_content {
display: none;
position: fixed;
top: 25%;
left: 24%;
width: 900px;
height: 455px;
padding: 15px;
border:5px solid black ;
border-radius: 15px;
background-color: white;
z-index:1003;
overflow: no;

}
</style>
<br>
<center>
<a href="#" onclick = "document.getElementById('light').style.display='block';document.getElementById ('fade').style.display='block';"><br>

<img src="http://YOURSITE.yolasite.com/THUMBNAI...>

</a></font></center></p></center>

<div id="light" class="white_content" ><font size="3"><a href ="#" onclick =

"document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'"><img src="http://www.nathansmusicstudio.cz.cc/r..." border="0" alt=" Close this lightbox - Click here " title="Close this lightbox"></a></font><center>

<img src="http://YOURSITE.yolasite.com/resource...>

<br><br><br><br><font size="2"><strong></strong></font><br><br></font><br><br><font size="2">To close, click <strong>Close</strong> at top</font>
</div><div id="fade" class="black_overlay"></div>
</center>

Remember to change "YOURSITE.yolasite.com" with your domain name and "PICTURENAME.jpeg" with the file of your enlarged picture and "THUMBNAIL-PICTURENAME.jpg" with the smaller picture (The "thumbnail" smaller version)

This code should work. If you need any assistants please let me know.

Hope this helps!

Nathan

-->
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Hey nathan is it possible to make it come in center
please answer
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello, yes. Please look at the reply below. (The last one right now) It has the latest version of my lightbox and it looks better! Here is a preview of the new lightbox: http://my.nathansmusicstudio.cz.cc/te...
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Which one of these blocks of code is the right one to use; there's so many... And I don't understand the examples posted with what goes where. I just want to be able to put a thumbnail and have it pop up into a larger image when clicked on. Is it possible?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, if you want multiple pictures to pop up, you might want to use Lightbox 2. This is a very cool lightbox, and, they have examples on the website. Just visit here for the instructions: Lightbox 2. I'm almost certain that you are going to need help. If you do, just let me know! :)
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hey Nathan,, I want something less complex, not more, haha. When I say multiple pictures, I mean there will be multiple thumbnails on the web page and I want each one to pop up into a larger image..
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, I know, this is the system you'd use if you want some pictures on your site to enlarge when they get clicked. If you want, I can set it up for you and host the files on my server and computer, and then, I will give you the codes for everything. I will have it link to the place it is hosted on my server, so, if you want, please let me know. You can also open a ticket in our help desk, or just click "Contact us" on the side of our website. So, just go ahead and use either of those resources and I will get back with you asap! :)
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hi Nathan, no need to host the files. I can actually just use the images on flickr that I already have uploaded. it's easy enough to get the direct URLs to the thumbs. But I could just put the files in the file manager as well to use those.. Or maybe I won't create popups at all and just use larger than thumbnail size images. I won't be able to use the image widget to get the popup effect, I have to use the HTML widget for each one, correct?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
H, I am talking about the JavaScript files. For the lightbox. If you have Yola Silver, than you can host the JavaScript files on your website, but, if you don't then I can just host it for you! :)

Also, yes, you will not be able to use the image widget because you are going to need to add some other stuff and make the image a link so when you click it, it makes a lightbox pop up.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I do have Yola Silver. Since there were so many posts in this thread with all kinds of different code, can you modify your original post to show the correct code, in a step by step type format? i.e. showing where the link to the thumbnail goes, where the link to the main image goes, etc.. I think that would be helpful.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mike, you wot be able to use this code / lightbox system for more than one images, you will have to use Lightbox 2. I will post a topic on how to set up lightbox 2. Well, instead, can you just visit our website's help desk and open ticket? Helpdesk: www.nathansmusicstudio.mojohelpdesk.com
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hi Nathan, I sent a ticket on your site, thanks!! =)
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Thank You Nathan for all the great codes! You are getting better and better with these lightboxes!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks! (Sorry for the very delayed reply!)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I added animations and tweaked it a bit
<!--
<script src="http://code.jquery.com/jquery-1.4.3.m..." type="text/javascript">
</script>
<style>

/*Black_overlay is the faded part that makes the screen fade out*/

.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 is the lightbox part*/

.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 15px;
border:5px solid black ;
border-radius: 15px;
background-color: white;
z-index:1003;
overflow: no;

}
/*large picture*/
.largepic
{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
border-radius:10px;
}
/*close button*/
.close
{
border-radius:10px;
top:0px;
left:0px;
height:100%;
width:100%;
position:absolute;
}
/*div closee*/
.closee
{
display:none;
width:100px;
height:30px;
top:24%;
left:25%;
position:fixed;
z-index:1005;
}
</style>
<br>
<center>
<a href="#" onclick = "$('#light').slideDown(500);$('#fade').fadeIn(500);$('#closee').fadeIn(500);"><br>

<img src="YOURSITE.yolasite.com">

</a></font></center></p></center>

<div id="light" class="white_content" >
<img class="largepic" src="YOURSITE.yolasite.com"></img>
</div><div id="fade" class="black_overlay" onclick="$('#light').slideUp(500);$('#closee').fadeOut(500);$('#fade').fadeOut(500);"></div><font size="3"><div id="closee" class="closee"><a href ="#" onclick =
"$('#light').slideUp(500);$('#fade').fadeOut(500);$('#closee').fadeOut(500);"><img class="close" src="http://www.nathansmusicstudio.cz.cc/r..." border="0" alt=" Close this lightbox - Click here " title="Close this lightbox"></a></div>
</center>
-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for that code!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
your welcome!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello everyone. I also made another lightbox. This is the second version of the lightbox posted above. So, this is Lightbox Version 2.0 (I created this)

Code:

<!--

<style>
.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: 10%;
right:15%;
width:70%;
padding: 16px;
border: 0;
background-color: white;
z-index:2002;
height:70%;
border-radius:10px;
overflow:hidden;
}

#close_lightbox {
display:none;
position:fixed;
top:8%;
right:14%;
border-radius:100%;
z-index:3000;
background-color:black;
border:3px solid white;
width:30px;
height:30px;
margin:5px;
color:white;

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:8%;
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;
}
</style>

<script language='javascript'>
function lightbox(type) {
if (type == 'show') {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
document.getElementById('close_lightbox').style.display='block'
}
else {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
document.getElementById('close_lightbox').style.display='none'
}
return false;
}
</script>

<button onclick='lightbox("hide"); return false;' id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>

<p>To see the lightbox, <a href="#" onclick='lightbox("show"); return false;' style="text-decoration:underline">click here</a></p>
<div id="light" class="white_content">
<center>JavaScript Video<br><br></center>

LIGHTBOX CONTENT HERE
(You can put forms in, anything you want! Even iframes! So go ahead and put your content here!)

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

-->

Here is a preview of it: http://my.nathansmusicstudio.cz.cc/te...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Remember: Don't copy <!-- or --> Just the code in between it.
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Thanks for the code really
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
You Can See My Lightbox Here http://edubrary.yolasite.com/css.php
just click the both links
1)Host a website launch party
2)image #1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello, that looks nice! I'm glad to see that my lightbox script I made up is working!

But all of the files you have there can be replaced with something that wont show up on the page. For all of those files you are going to want to drag over an HTML widget and put this in for each file:

<link href="resources/FILE-NAME.css" type="text/css" rel="stylesheet">

Replace "FILE-NAME.css" with the actual name of the css file. For example: FILE-NAME.css would be this for the first one: "signup.css"

Then, just keep doing this for all of them and then you can delete those file widgets because when you do it this way, you wont see those big file boxes, you wont see anything accept the CSS working on the page.

I hope this helps!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wait, is this just a test page with all of those files on it? If ti is, I'm sorry for the last comment. I thought you where using that as the actual page and you had those file boxes on there! Sorry about that.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Another updated animated version for 2.0:
<!--

<html>
<head>
<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:3000;
background-color:black;
border:3px solid white;
width:30px;
height:30px;
margin:5px;
color:white;
text-align:center;
font-size:1.5em;
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*/
filter:alpha(opacity=20);
/* CSS3 standard */
opacity:0.2;
}

#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>
</head>
<body>

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

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

<p>To see the lightbox, <a href="#" onclick="inlightbox()" style="text-decoration:underline">click here</a></p>
<div id="light" class="white_content">
<center>JavaScript Video<br><br></center>

LIGHTBOX CONTENT HERE
(You can put forms in, anything you want! Even iframes! So go ahead and put your content here!)

</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Kevin, this is a cool code. So now it is animated! Cool :) Is there any way I can make it fade instead? Instead of sliding, is there a way to make it fade in and out? That would be sweet!

One problem though. On the "#close_lightbox" part in the CSS, the z-index needs to be raised up so it will be over the white part. The #close_lightbox:hover is fine, just, not the #close_lightbox
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
#close_lightbox is supposed to be half transparent when not moused over because this way it doesn't distract the user.
and if you want it to fade just change it to fadeIn/fadeOut instead of slideUp/slideDown
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I understand now! :) I just looked at the code and it had the opacity.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi everyone! I just created another lightbox! It is Lightbox 2.0! (The one I created) Here is the topic: Lightbox 2.0! (The lightbox I created) This one is much better so I suggest you switch over to this one if you are using Lightbox 1.0 right now.
Photo of riley

riley

  • 2 Posts
  • 0 Reply Likes
It does'nt work!!!!! :(
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hello Riley - I'm sure Nathan will help you when he's next online. In the meantime, would you be able to provide more information on what is going wrong? Would you be able to post a link to your site where you've tried to add the feature?
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
I can help you regarding this can you please clear what your doubt is?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Riley, I am back online. So, the lightbox isn't working? What do you see when you click the link to open the lightbox? The part where the content for the lightbox goes is in the divs with the id of "light" So, here is an example:

...

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

Lightbox content goes here

</div>

...

The dots just mean there is code after and before that piece of code.

Are you using the Lightbox code in the actual topic or did you get the code from a reply made on the topic?

Thanks,
Nathan
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Hello Again Nathan,

Is it possible to make the lightbox pop up automatically, no way to get out of it (No "No click here to Close" button, and music pops up the secodn the light box opens? Thanks,

ACoolOne
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, yes there is.

***These instructions are for the updated lightbox (Lightbox 2.0)***

First, just remove the

<img src="http://my.nathansmusicstudio.cz.cc/re..." onclick="hideLightbox()" class="close_lightbox">

tag, because that is the X button at the top corner.

Now, on the CSS, change all of the display:none; to display:block; then it will be there already when the page loads.

If you need help with this let me know.

This topic is out-of-date, here is the up-to-date lightbox topic: http://forum.yola.com/yola/topics/lig...
Photo of Adil Khan

Adil Khan

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

Joseph Gannon

  • 2 Posts
  • 0 Reply Likes
How can I insert a youtube video to play within the lightbox? This is the problem I'm having. Can you send me an email with step by step instruction? gannoncosolutions@gmail.com Use subject: Lightbox Youtube instructions for Yola.

thanks.

Joseph