How do you make popup windows like yola's "preview"?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
How can I make a popup window that looks like the ones yola uses for its preview feature? I want it to have just a thin border and an x to close and nothing else
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello,

Thank you for your message. One of our Champs, Nathan, posted a thread on adding a Lightbox to your site, please see this link: Adding a Lightbox to your Yola site.

Please let us know if you need further assistance!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, that topic I posted is a nice lightbox. But, I am making a better lightbox script that has an "X" in the corner to make it look nicer. But, for now, I guess you can use my first one I made until I post the next version of it.

Sincerely,
Nathan
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes
Nathan,

Thanks, I was able to get a lightbox to work using your last posted script but only when I used my selected domain name instead of the one with yolasite in it for the picture links, strange. Can your script be modified to open a video in a lightbox? I've been trying but it just gives a "?" in the window after some time even though the link is correct (I can copy and paste the link behind the "?" icon in a new window and it opens just fine)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, sorry for this late reply. To post code, you have to wrap it in <!-- and -->

Like this:

<!--

Code here

-->

If you want a video in the lightbox, then, use 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%;
height: 70%;
padding: 16px;
border: 0px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
border-radius:10px;
overflow:hidden;
}

.close_lightbox {

position:absolute;
top:0%;
right:0%;
border-radius:100%;
z-index:2000;
background-color:black;
border:2px white;
width:30px;
height:30px;
margin:5px;
color:white;

}

.close_lightbox:hover {

position:absolute;
top:0%;
right:0%;
border-radius:100%;
z-index:2000;
background-color:white;
border:2px white;
width:30px;
height:30px;
margin:5px;
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*/
color:black;
}
</style>

<p>To see the video, <a href="#" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'; return false;">click here</a></p>
<div id="light" class="white_content">
<center>Test Video<br><div style="x-index:1000"><object width="70%" height="70%" wmode="transparent"><param name="wmode" value="transparent" /><param name="movie" value="YOUTUBE-VIDEO-URL"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="YOUTUBE-VIDEO-URL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" wmode="transparent"></embed></object></div></center>

<button onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; return false;" class="close_lightbox"><font size="7" face="arial black"><b>X</b></font></button>
</div>
<div id="fade" class="black_overlay"></div>
-->

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

This isn't the second version of the lightbox, but, it is a little better one.

Remember to replace both of the "YOUTUBE-VIDEO-URL" with the url of your youtube video. Just copy and paste it form the address bar when you are on the Youtube video page.

I hope this helps!

If you have any questions, comments, or concerns please let me know.

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Nathan for your terrific help on this!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome.

@rstravisjr Is this working yet? Just let me know if it works or if you have any problems or questions.
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes
Yup it's working, I'm using quicktime to play lightbox videos I've uploaded to this site. I've probably added in excess coding using Apple's QTPro "export for web" feature, but it does seem to put in the correct code needed to play the movie. If you follow their directions you also have to upload the .mp4 of the movie even though it isn't referenced anywhere in the code, evidently QT just knows where to look for it. So here's the bloated code (obviously replace "mysite" and others with what you want):

<!--

<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: 15%;
left: 13%;
width: 900px;
height: 504px;
padding: 10px;
border:10px solid black ;
border-radius: 20px;
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://mysite.yolasite.com/resources/...>

</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://mysite.yolasite.com/resources/..." border="0" alt=" Close this lightbox - Click here " title="Close"></a></font><center>

<OBJECT
CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
WIDTH="900"
HEIGHT="504"
CODEBASE="http://www.apple.com/qtactivex/qtplug...>
<PARAM name="SRC" VALUE = "http://mysite.yolasite.com/resources/..." >
<PARAM name="QTSRC" VALUE = "http://mysite.yolasite.com/resources/..." >
<PARAM name="HREF" VALUE = "http://mysite.yolasite.com/resources/..." >
<PARAM name="AUTOHREF" VALUE = "true" >
<PARAM name="CONTROLLER" VALUE = "false" >
<PARAM name="TYPE" VALUE = "video/quicktime" >
<PARAM name="TARGET" VALUE = "myself" >
<EMBED
SRC = "http://mysite.yolasite.com/resources/..."
QTSRC = "http://mysite.yolasite.com/resources/..."
HREF = "http://mysite.yolasite.com/resources/..."
TARGET = "myself"
CONTROLLER = "false"
WIDTH = "900"
HEIGHT = "480"
LOOP = "false"
AUTOHREF = "true"
PLUGIN = "quicktimeplugin"
TYPE = "video/quicktime"
CACHE = "false"
PLUGINSPAGE= "http://www.apple.com/quicktime/download/" >
</EMBED>
</OBJECT>

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

-->

One important thing is I did replace AUTOPLAY with AUTOHREF and set to true, this makes the movie automatically start playing when it's finished loading. I used your closegif icon (hope you don't mind, in case the link ever breaks). I would love to have a small "x" in the corner that sticks out from the border like yola does but this'll do for now. Thanks again

Richard
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes
If you want to see what it looks like I've unlocked the page it's on:

http://www.palmsofsouthtexas.com/palo...#

The first video is the lightbox, the 2nd is the traditional quicktime poster movie. Note the lightbox video is large, about 4mb, it may take a while to load and play if you have a slow connection (you can double click it at any time to play the part that's already loaded)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It looks nice, but you might want to reposition it using that CSS. The lightbox is white_content. Just change the amount it is from the left up more.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, can you PLEASE wrap your codes you post here in <!-- and --> Thanks!

EX:

<!--

Code here

-->

You have to do this to show code on here, when you just put the code there, it renders and no one can see the code.
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes
Yes I know I posted twice I think forgetting to do that. Wish there was a "preview" function here so you could see what the message will look like before it gets posted. As it is, you have to hope everything's OK then delete it and repost if not
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, no, you don't have to delete it and then repost it. All you have to do is refresh the page and then click "Edit". You can then Edit it and then update the reply.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hello, here is a better code with an "X" in the corner. But, I'm still working on the X off of the lightbox a little bit like Yola's.

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%;
height: 70%;
padding: 16px;
border: 0px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
border-radius:10px;
overflow:hidden;
}

.close_lightbox {

position:absolute;
top:0%;
right:0%;
border-radius:100%;
z-index:2000;
background-color:black;
border:2px white;
width:30px;
height:30px;
margin:5px;
color:white;

}

.close_lightbox:hover {

position:absolute;
top:0%;
right:0%;
border-radius:100%;
z-index:2000;
background-color:white;
border:2px white;
width:30px;
height:30px;
margin:5px;
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*/
color:black;
}
</style>

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

<p>To see the video, <a href="#" onclick='lightbox("on"); return false;'>click here</a></p>
<div id="light" class="white_content">

YOUR QUICK-TIME PLAYER CODE HERE

<button onclick='lightbox("off"); return false;' class="close_lightbox">

<font size="7" face="arial black"><b>X</b></font>

</button>

</div>

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

Just copy the Quick Time player code from the other lightbox and paste it in where it says "YOUR QUICK-TIME PLAYER HERE" This looks much nicer than the other one! And, I set it up where it has an "X" in the corner but I'm still working on getting the X like Yola's. For now, just use this updated code.

Also, if you want to make another lightbox for the other videos, just let me know and I'll set it up. To display more than one you have to set it up diffferentl so I will set that up good if you need more than one lightbox on your site on the same page.

I hope this helps!

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

Nathan

-->
Photo of rstravisjr

rstravisjr

  • 7 Posts
  • 0 Reply Likes
Nathan

Hmm, I'm having a more difficult time with this latest code, though I'm on a very slow connection tonight and can't do much tinkering. By the way is there a way of just centering the entire lightbox in the webpage?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I will try it and see if I can center it. I don't think there is a way to do that. I'll experiment with it and then reply when I'm done with the new CSS. All you will have to do is replace everything in the "style tags" with the new CSS I make.