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 8 years ago

  • 1
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
That's Great! but how do you get rid of it once its open?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You click the "Close" link at the bottom of the link.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Cool,thanks for sharing!

@Callum if you hover in the gray at the bottom there is a close button :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! :) I am glad to help anyone!
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Thanks John, i couldnt find it in FF but it works in Chrome for me
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'll fix it so it will be more visible!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Is there a way to make it pop-up automatically?
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Hi Mr.Awesome
You could try adapting the code so it activates on <!-- <body onload="..."> -->
Instead of OnClick. I'll try it now on a test site and get back to you
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I don't know if there is a way. What do you mean by making it pop up automatically? Also, you can see a live preveiw at http://www.nathansmusicstudio.cz.cc/ and click the "Subscribe to our newsletter! Click here!" Link, and it will bring up a lightbox! Just go to it, you don't have to subscribe, just go there and click the link! Also, to close the light box, there is a link at the bottom that says "Close". Click it and it will close. But you can customize all you want and put an "X" picture instead of just "Close" and everything like that!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Hey, how do you make the cursor change on your site? What's code for it?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, yes, do you want the same one that I have? If you do, here is the code for the same one I have:

<!--

<style type="text/css">
body {
cursor: url(http://advimages.nexon.net/MapleStory..., auto;
}
A {
cursor: url(http://advimages.nexon.net/MapleStory..., url(http://advimages.nexon.net/MapleStory..., auto;
}
</style> ​

-->

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

I hope this helps!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! :) I'm glad to help!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Wow, that was fast.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
What was fast?
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
@Mr.Awesome
Heres the code to make it appear automatically:
Remember to remove the <!-- and -->

<!--
<head>
<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>
</head>
<body onload="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

<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>
</body>
​-->

Example here: http://cbooth-test.yolasite.com/libox...
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Whoa! that is sooo cool!

THANKS! :D
But to add an close button you just insert the close button from nathan's code to this one?
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Nice. I've just gotta say your post got popular.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, I hope more people read this too! And someday I hope I become a champion of Yola! :) I am trying my best to be really active!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Hmm... that would be nice. Your heading the right way. ;) Hey, I find your site nice. Could you check out mine please and tell me what you think? http://makewebsite.yolasite.com/
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for the kind comments :) Right now, me and my company are redesigning the homepage so you still see the old page i mean we are recreating it because some code broke the homepage! But we are publishing it pretty soon! And, your website looks awesome! :) So cool!!! I like the button thing too! You no, you hover over it and it changes the text!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
No Problem! And I got that from the help of an employee at Yola Forum. :D
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Say what is your site name again?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Wait hang on- I might know you. Do you know anyone named Artem?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Oh, sorry, you liked like someone I know for a second there.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It's okay. I am sorry one of our operators weren't on when you were on our website!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Listen, how do you advertise on your site? I don't seem to get it.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi didn't our Advertising team send you an email? Please check your email, there is a lot of information that we sent you!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Wowa, sorry.. Didn't check it. I was wondeing do you pay for your servers?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No, We are hosting on Yola.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You can now add the Login Script povided by ACoolOne in this lightbox! Visit this link for the Login script and then paste it into the lightbox and it willl work!: http://makewebsite.yolasite.com/login...
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Hello, how are you doing? I was wonderign if there was a way to make the lightbox like, slide down with you, because if there is a lightbox of the bottom of a page you have to scroll up for it to apppear.... Any way to make it follow you?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh yes you can! Check it out on my website first to see if you like it the way I have it and then use the code in the reply below!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Okay, here is the 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: 25%;
left: 25%;
width: 50%;
height: 455px;
padding: 15px;
border:5px solid black ;
background-color: white;
z-index:1002;
overflow: no;

}
</style>
<br>
<p><center><font size="3";>
<a href="#"

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

('fade').style.display='block';"><br><u><b>Lightbox link text here!</b></u></a></font></center></p>
<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="resources/closelabel_inline.gif" border="0" alt=" Close this lightbox - Click here " title="Close this lightbox"></a>

Your content here! (Just copy and paste the old contenet from the old code and paste into this part!)

<br><br><br><font size="2">We will <strong>never</strong> sell, rent, or give out your information</font><br><font size="1">Read our <a href="privacy-policy.php">Privacy Policy</a></font><br><br><br><br><font size="2"><strong>© 2010 Nathans Music Studio</strong></font><br><br><br><br></font><br><br><font size="2">To close, click <strong>Close</strong> at top</font>
<a href = "#" onclick =

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

('fade').style.display='none'"></a></div><div id="fade" class="black_overlay"></div>

-->



Also with this new code, you have to have this picture in your file manager and do not change the name! Here is the picture you HAVE to have in your file manager for this to work:



I hope this helps!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
How come once this opens it automatically redirects you to the homepage
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It should not be doing that, one minute, I will take a look at the code and re-post it.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Okay, I'm waiting for it....
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Oh yes, my name did used to be Mr.Awesome... why?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I was just asking because when you changed your name, it kind of confused me, but it's ok now!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
This code should work now:


<!--

<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: 25%;
left: 25%;
width: 50%;
height: 455px;
padding: 15px;
border:5px solid black ;
background-color: white;
z-index:1002;
overflow: no;

}
</style>
<br>
<p><center><font size="3";>
<a href="javascript:void(0)"

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

('fade').style.display='block';"><br><u><b>Lightbox link text here!</b></u></a></font></center></p>
<div id="light" class="white_content" ><font size="3"><a href ="javascript:void(0)" onclick =

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

('fade').style.display='none'"><img src="resources/closelabel.gif" border="0" alt=" Close this lightbox - Click here " title="Close this lightbox"></a>
<br><br>
Your content here! (Just copy and paste the old content from the old code and paste into this part!)

<br><br><br><font size="2"></font><br><br><br><br></font><br><br><font size="2">To close, click <strong>Close</strong> at top</font>
<a href = "javascript:void(0)" onclick =

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

('fade').style.display='none'"></a></div><div id="fade" class="black_overlay"></div>

-->


But remember, you must upload this picture into your file manager for this to work (Just save this picture as and upload it to your file manager):

--Picture--



--/Picture--
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Thanks, it does.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm so glad it works! Did you see how it looks on our website?
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Yeah, by the way, like what's the "point" of your site, I mean like youtube.com is for videos, yola.com is for site making, etc. whats yours? Sorry, I don't seem to get it
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It is a site for my studio. "Nathans Music Studio"
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Did I offend you?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Not really. But my company's site is for our studio. You get it? "Nathans Music Studio"
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Oh, well. Sorry, did I get you mad?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No, I'm not mad. Our website isn't really a big website. And pretty soon, we are going to have pictures of all of our equipment we use in our studio!
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
I'm guessing you are in your twenties?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yes, and how old are you, or around?
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Yeah
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
I mean im in my twenties too