Lightbox 2.0! (The lightbox I created)

  • 1
  • Praise
  • Updated 5 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 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Don't copy <!-- or --> in the code box! Just the code in between it!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, and here is the preview: http://my.nathansmusicstudio.cz.cc/te...
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I like the shadow Nathan!
Can't wait for 3.0!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Upgraded it even more!
added special title and caption area!
<!--
<style type="text/css">

.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/

-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/

-moz-box-shadow:0px 0px 20px yellow;/* Mozilla shadow version*/
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/

-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/

-moz-box-shadow:0px 0px 15px white;/* Mozilla shadow version*/
}
.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%;
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 {

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;

color:grey;

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);
setTimeout("showtite()",800);
}

function showtite()
{
showcap()
$('#tite').slideDown(1000);
}

function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()

{

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

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

$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}

</script>
<div id="tite" class="title" >Title Here!</div>
<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">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="cap" class="caption" >Caption or description here!</div>

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

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Cool!
Photo of Kevin

Kevin

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

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Kevin, do you know how to make it where you click the background of the page and it exits out of the lightbox? Like you click any where on the page (accept the lightbox part) and it will close the lightbox when it is open. Do you know how to do that?

Thanks!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
change <!--<div id="fade" class="black_overlay"></div>-->
to <!--<div id="fade" class="black_overlay" onclick="hideLightbox()"></div>-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, yeah, duh to me! Thanks so much!
Photo of Kevin

Kevin

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

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello everyone that uses this code!

I just added another feature to Lightbox 2.0! It is where the lightbox will close if you click the page when it is opened.

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:hidden;
height: 70%;
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:black;
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>

<button onclick="hideLightbox(); 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="showLightbox(); return false;" 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" onclick="hideLightbox()" class="black_overlay"></div>

-->



Just don't copy <!-- or --> Just the code in those.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Now this is much more easier!
Only applies to images and iframes though though.
code:

<!--
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<a href="#" rel="yoururl">yourtext</a>
<script>
function openlbox()
{

}
var rel = $("a").attr("rel");
$("a").click(function () {
showLightbox();
writeele();
});
</script>
<style type="text/css">

.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/

-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/

-moz-box-shadow:0px 0px 20px yellow;/* Mozilla shadow version*/
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/

-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/

-moz-box-shadow:0px 0px 15px white;/* Mozilla shadow version*/
}
.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%;
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 {

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;

color:grey;

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);
setTimeout("showtite()",800);
}

function showtite()
{
showcap()
$('#tite').slideDown(1000);
}

function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()

{

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

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

$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}

</script>
<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>
</div>
<div id="light" class="white_content">
<? height="100%" width="100%" id="myelement"></iframe>
<script type="text/javascript">
function writeele()
{
document.getElementById('myelement').src=rel;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>

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


change ? to either img(images), or iframe(external page).
even thought you can only still install one, this is much more easier.
Then, if you want to put something,
just write:<!--<a href="#" rel="yoururl">yourtext</a>-->
This is very easy!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow! How did you do that!!?? Wow! You are good! Fantastic!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Nathan, I am currently working on a version where you can add multiple ones.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi kevin, if you create it, you could probably just set it up where when you have a link, just add onclick="showLightbox('div_id') and then add the div id in and it will make that div pop up in the lightbox but then they'll have to add class="white_content" to the divs they want to pop up so it'll work and make it pop up.

Do you think this would be considered Lightbox 3 after you do that? Or just lightbox 2.1?

That feature will be so neat! :)
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
can u give me code to make more than one lightboxes
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
See my new coda bottle style Here
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Nathan! this is it!
Anything you want!
As many as you like!

<!--

<script src="http://code.jquery.com/jquery-latest....>
<a href="yoururl" rel="lbox3" onclick="gethref(this.href);return false;">yourtext</a>
<script>
function gethref(hrefea)
{
hrefe=hrefea;
}
var hrefe;
var rel = $("a").attr("rel");
$("a").click(function () {
if(rel=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return false;
}
});

</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>
<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>
</div>
<div id="light" class="white_content">
<object width="100%" height="100%" id="myelement">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"></div>
-->
Just write:<!--<a href="yoururl" rel="lbox3" onclick="gethref(this.href);return false;">yourtext</a>-->. change the url to anything you want, images, pages, anything litteraly. even flash i believe. That is all!
Note:Glitchy in chrome and safari for some reason. Have to open twice for changes to take effect.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Just write:<!--<a href="yoururl" rel="lbox3" onclick="gethref(this.href);return false;">yourtext</a>-->. change the url to anything you want, images, pages, anything litteraly. even flash i believe. That is all!
Note:Glitchy in chrome and safari for some reason. Have to open twice for changes to take effect.
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
it is not working
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Please give the whole code with your url & complete info please thanks
where to the href tag
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
doesnt work =( i need 3 lightboxes and i can only have 1 with the other code!
please help kevin!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
sorry about that, I mistakened this for the Goodbye from Kershnee topic.
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
I know how to make coda bottle style in yola

just copy & paste the code

<!--

<!DOCTYPE HTML>
<html>
<head>
<title>Coda Effect</title>
<style type="text/css">
body{
background:#D6D3C9;
color:#383835;
font-family:Arial, Arial, Helvetica, sans-serif;
}

#bubblemenu li {
display: inline;
margin-left: 15px;
cursor:pointer;
}

#bubblemenu li > div {
width: 150px;
min-height: 100px;
position: absolute;
display: inline;
margin-left: -120px;
padding: 5px;
visibility:hidden;
opacity: 0;
margin-top: -125px;
background: #ffffff;
font-size:1em;

/* Setting the border-radius property for all Browsers */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
border-radius: 5px; /* Browsers that Support it like Opera */

/* Setting the box-shadow property for all Browsers */
-moz-box-shadow: 0 0 8px gray; /* Firefox */
-webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */

}

#bubblemenu li:hover > div {

visibility:visible;
opacity: 1;
margin-top: -150px;

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */
}
</style>
</head>
<body>
<h1>Coda Effect With CSS3</h1>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<ul id="bubblemenu">
<li>
Penn Jillett
<div>
My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them.
</div>
</li>
<li>
Thomas Watson
<div>
I think there is a world market for maybe five computers.
</div>
</li>
<li>
Bill Gates
<div>
640K ought to be enough for anybody.
</div>
</li>
<li>
Sam Ewing
<div>
Computers are like bikinis. They save people a lot of guesswork.
</div>
</li>
</ul>
</body>
</html>

-->

REMEMBER DON"T COPY <!--AND-->
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hey everybody, i've fixed the issues(or hope so).

<!--

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<a href="yoururl" rel="lbox3" onmouseover="gethref(this.href);return false;">yourtext</a>
<a href="yoururl" rel="lbox3" onmouseover="gethref(this.href);return false;">yourtext</a>
<script>
function gethref(hrefea)
{
hrefe=hrefea;
}
var hrefe;
var rel = $("a").attr("rel");
$("a").click(function () {
if(rel=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return false;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>
<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>
</div>
<div id="light" class="white_content">
<object width="100%" height="100%" id="myelement">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"></div>
-->

Instead, do <!--<a href="yoururl" rel="lbox3" onmouseover="gethref(this.href);return false;">yourtext</a>-->
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Don't copy the <!-- and -->!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Alert! just realized, flash won't work.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Oh yeah, images won't resize. Sorry for all these bugs.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
*alert!**alert!**alert!**alert!**alert!**alert!**alert!**alert!**alert!**alert!*
Okay, I just tested this on yola. Something on yola is stopping the script from working. If you paste this in a text editor, then save as an html file, it will work. So technically, it is some incompatabilities with yola for somereason, but works perfectly as an independent file. I am getting to the bottom of this right now.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi kevin, if you paste this code into yola's html editor and then click OK and it takes a while to load, just wait. And then a pop up box will pop up and say "The JavaScript code you pasted has an error. Please check your code." It does that to me all of the time.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Working version here, as an independent html file:http://www.campatet.com/resources/lbo...
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Hey Friends I Have Made The Script For Unlimited Images Light Box
See An Example Here

Here's The Code

<!--
<head>
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/...>
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/...>
<script type="text/javascript">
// -----------------------------------------------------------------------------------
//
// Lightbox v2.04
// by Lokesh Dhakar - http://www.lokeshdhakar.com
// Last Modification: 2/9/08
//
// For more information, visit:
// http://lokeshdhakar.com/projects/ligh...
//
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/b...
// - Free for use in both personal and commercial projects
// - Attribution requires leaving author name, author link, and the license info intact.
//
// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
//
// -----------------------------------------------------------------------------------
/*

Table of Contents
-----------------
Configuration

Lightbox Class Declaration
- initialize()
- updateImageList()
- start()
- changeImage()
- resizeImageContainer()
- showImage()
- updateDetails()
- updateNav()
- enableKeyboardNav()
- disableKeyboardNav()
- keyboardAction()
- preloadNeighborImages()
- end()

Function Calls
- document.observe()

*/
// -----------------------------------------------------------------------------------

//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'http://edubrary.yolasite.com/resource...,
fileBottomNavCloseImage: 'http://edubrary.yolasite.com/resource...,

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

var Lightbox = Class.create();

Lightbox.prototype = {
imageArray: [],
activeImage: undefined,

// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {

this.updateImageList();

this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;

this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration

// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';

// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>

var objBody = $$('body')[0];

objBody.appendChild(Builder.node('div',{id:'overlay'}));

objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));

$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));

var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
},

//
// updateImageList()
// Loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
//
updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;

document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},

//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) {

$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

// stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

this.imageArray = [];
var imageNum = 0;

if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();

while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

this.changeImage(imageNum);
},

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {

this.activeImage = imageNum; // update global var

// hide elements during transition
if (LightboxOptions.animate) this.loading.show();
this.lightboxImage.hide();
this.hoverNav.hide();
this.prevLink.hide();
this.nextLink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
this.imageDataContainer.setStyle({opacity: .0001});
this.numberDisplay.hide();

var imgPreloader = new Image();

// once image is preloaded, resize image container

imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},

//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {

// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();

// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);

// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;

// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;

if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});

// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}

(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
this.imageDataContainer.setStyle({ width: widthNew + 'px' });

this.showImage();
}).bind(this).delay(timeout / 1000);
},

//
// showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},

//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {

// if caption is not null
if (this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}

// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}

new Effect.Parallel(
[
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],
{
duration: this.resizeDuration,
afterFinish: (function() {
// update overlay size and update nav
var arrayPageSize = this.getPageSize();
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
this.updateNav();
}).bind(this)
}
);
},

//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {

this.hoverNav.show();

// if not first image in set, display prev image button
if (this.activeImage > 0) this.prevLink.show();

// if not last image in set, display next image button
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();

this.enableKeyboardNav();
},

//
// enableKeyboardNav()
//
enableKeyboardNav: function() {
document.observe('keydown', this.keyboardAction);
},

//
// disableKeyboardNav()
//
disableKeyboardNav: function() {
document.stopObserving('keydown', this.keyboardAction);
},

//
// keyboardAction()
//
keyboardAction: function(event) {
var keycode = event.keyCode;

var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
} else { // ie
escapeKey = 27;
}

var key = String.fromCharCode(keycode).toLowerCase();

if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
this.end();
} else if ((key == 'p') || (keycode == 37)){ // display previous image
if (this.activeImage != 0){
this.disableKeyboardNav();
this.changeImage(this.activeImage - 1);
}
} else if ((key == 'n') || (keycode == 39)){ // display next image
if (this.activeImage != (this.imageArray.length - 1)){
this.disableKeyboardNav();
this.changeImage(this.activeImage + 1);
}
}
},

//
// preloadNeighborImages()
// Preload previous and next images.
//
preloadNeighborImages: function(){
var preloadNextImage, preloadPrevImage;
if (this.imageArray.length > this.activeImage + 1){
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if (this.activeImage > 0){
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}

},

//
// end()
//
end: function() {
this.disableKeyboardNav();
this.lightbox.hide();
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},

//
// getPageSize()
//
getPageSize: function() {

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}

return [pageWidth,pageHeight];
}
}

document.observe('dom:loaded', function () { new Lightbox(); });
</script>
<link rel="stylesheet" href="http://www.lokeshdhakar.com/projects/..." type="text/css" media="screen" />
</head>
<a href="http://edubrary.yolasite.com/resource..." rel="lightbox" title="my caption">image #1</a><br />
<a href="http://static.travelblog.org/Wallpape..." rel="lightbox[roadtrip]">image #2</a><br />


-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil, that is Lightbox 2. You didn't create that. But, thanks for showing!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Yes, I've finally got it.
It works now.

<!--
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<li><a href="http://static.howstuffworks.com/gif/flying-car-front.jpg" rel="lbox3" onmouseover="gethref(this.href);return false;">Future Car Image</a></li>

<script type="text/javascript">
var hrefe;
var rolo;
function gethref(hrefea)
{
hrefe=hrefea;
}
function getrel(releae)
{
rolo = releae;
}
$("a").click(function () {
if(rolo=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return false;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>
<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>
<div id="light" class="white_content">
<object width="100%" height="100%" id="myelement" style="width:100%; height:100%;">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"> </div>



​-->

Enjoy!
To make a box, write:<!--<a href="yoururl" rel="lbox3" onmouseover="gethref(this.href);return false;getrel(this.rel);return false">your text</a>-->
Example here:http://www.campatet.com/lboxprev20.php
Remember to only copy the code, not the <!--and--> !
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
This code is not working.Is My Code Correct
<!--

<script src="http://code.jquery.com/jquery-latest...." type="text/javascript"></script>
<li><a href="http://www.google.com" rel="lbox3" onmouseover="gethref(this.href);getrel(this.rel);return false;" >Google</a></li><script type="text/javascript">
var hrefe;
var rolo;
function gethref(hrefea)
{
hrefe=hrefea;
}
function getrel(releae)
{
rolo = releae;
}
$("a").click(function () {
if(rolo=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return false;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>
<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="1px" face="arial black"><b><strong>X</strong></b></font></button>
<div id="light" class="white_content">
<li><a href="http://www.google.com" rel="lbox3" onmouseover="gethref(this.href);getrel(this.rel);return false;" >Google</a></li>
<object width="100%" height="100%" id="myelement" style="width:100%; height:100%;">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"> </div>


-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Adil, I have made an example page of this which is right under this code. Here is the corrected code of the lightbox:

<!--

<script src="http://code.jquery.com/jquery-latest...." type="text/javascript"></script>
<li><a href="http://www.google.com" rel="lbox3" onmouseover="gethref(this.href);getrel(this.rel);return false;" >Google</a></li><script type="text/javascript">
var hrefe;
var rolo;
function gethref(hrefea)
{
hrefe=hrefea;
}
function getrel(releae)
{
rolo = releae;
}
$("a").click(function () {
if(rolo=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return false;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>

<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="2" face="arial black"><b><strong>X</strong></b></font></button>
<div id="light" class="white_content">

<object width="100%" height="100%" id="myelement" style="width:100%; height:100%;">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"> </div>

​-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I have made an example page here: Lightbox Code Example
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Very simple to fix.
Just put this now,
<!--<a href="yourlink" rel="lbox3" onmouseout="gethref();getrel();return false;" onmouseover="gethref(this.href);getrel(this.rel);return false;" >Yourtext</a>-->
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
and a updated code:<!--

<script src="http://code.jquery.com/jquery-latest...." type="text/javascript"></script>
<li><a href="http://www.google.com" rel="lbox3" onmouseover="gethref(this.href);getrel(this.rel);return false;" >Google</a></li><script type="text/javascript">
var hrefe;
var rolo;
function gethref(hrefea)
{
hrefe=hrefea;
}
function getrel(releae)
{
rolo = releae;
}
$("a").click(function () {
if(rolo=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return true;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>

<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="2" face="arial black"><b><strong>X</strong></b></font></button>
<div id="light" class="white_content">

<object width="100%" height="100%" id="myelement" style="width:100%; height:100%;">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"> </div>

​-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
oh, i need it to open some html content,
i will just stick with on lightbox for now then =)
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Hey I want to social bookmarking add this widget on my site.It Looks Something Like This Just Click On Share And You Will See The Sharing Options.I Just Want That Sharing Options In Kevin's Code.

How Can I Do That?Help Me.Please
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I think he meant what plan of Yola.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Ack! Kevin, apologies, I just realized you wanted to know if Adil was using Yola Free or Yola Silver! Sorry for the confusion. Ignore me, you guys are way over my head with this code but the results are looking fabulous!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Yeah, I got that Nathan, just took me a minute...or 3 to be exact! ;)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
hi adil, i dont mind you using some code from my site but please could you find some other images in the rounded boxes? also, i dont know if that search box will still be searching my site or have you changed it?

thanks

alex

http://tellyads.yolasite.com
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
Hey Alex I will Change The Images in just 2-3 days.I am making some new images myself.Thanks for giving me permission to use your codes.

for your query I Have Changes The Your Pico Search With Mine

Thanks
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
yeah, I was asking if he had silver because he will need to save a HTML file.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Gotcha! *blush* :0)
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
I Am Just A School Going Boy & I Like Web-designing.So I Prefer Yola To Complete My Wish.I Have A Free Plan
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
I Am Just A School Going Boy & I Like Web-designing.So I Prefer Yola To Complete My Wish.I Have A Free Plan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Kevin, if he has to save an HTML file, he can probably just store the HTML file on a free file hosting website. (Just like http://www.yourjavascript.com is free JavaScript hosting) Adil, when kevin gives you the stuff, just find a free file hosting site that support HTML files. Just search Google for "Free HTML file hosting" or something.
Photo of Adil Khan

Adil Khan

  • 61 Posts
  • 0 Reply Likes
yeah i have found a html hosting site.
You Can Say Me What To Do.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Any way to make it pop up automatically?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, yes, here is the code to make it automatically pop up when the page loads:

<!--

<script src="http://code.jquery.com/jquery-latest...." type="text/javascript"></script>
<li><a href="http://www.google.com" rel="lbox3" onmouseover="gethref(this.href);getrel(this.rel);return false;" >Google</a></li><script type="text/javascript">
var hrefe;
var rolo;
function gethref(hrefea)
{
hrefe=hrefea;
}
function getrel(releae)
{
rolo = releae;
}
$("a").click(function () {
if(rolo=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return true;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: fixed;
top: 15%;
right:15%;
width:70%;
padding: 16px;
border: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#close_lightbox {
display:block;
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;
color:grey;
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">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>

<script type="text/javascript">
showLightbox()
</script>

<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="2" face="arial black"><b><strong>X</strong></b></font></button>
<div id="light" class="white_content">

<object width="100%" height="100%" id="myelement" style="width:100%; height:100%;">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"> </div>


​-->

Hope this helps!

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, I made an example page here: http://free-scripts.yolasite.com/ligh...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi ACoolOne, that code is wrong, sorry about that, here is the correct code to make it automatically pop up:

<!--

<script src="http://code.jquery.com/jquery-latest...." type="text/javascript"></script>
<li><a href="http://www.google.com" rel="lbox3" onmouseover="gethref(this.href);getrel(this.rel);return false;">Google</a></li>

<script type="text/javascript">
var hrefe;
var rolo;
function gethref(hrefea)
{
hrefe=hrefea;
}
function getrel(releae)
{
rolo = releae;
}
$("a").click(function () {
if(rolo=="lbox3")
{
showLightbox();
writeele(hrefe);
return false;
}
else
{
return true;
}
});
</script>
<style type="text/css">
.title
{
top:6%;
height:4%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color:black;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 20px yellow;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 20px yellow;/*Safari shadow version*/
-moz-box-shadow:0px 0px 20px yellow
}
.caption
{
bottom:6%;
height:3%;
left:25%;
width:50%;
position:fixed;
color:white;
background-color: grey;
border-radius:15px;
text-align:center;
z-index:1500;
display:none;
border:0px none;
box-shadow:0px 0px 15px white;/*CSS3 shadow: 30px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 15px white;/*Safari shadow version*/
-moz-box-shadow:0px 0px 15px white
}
.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: 0px none;
background-color: white;
z-index:2002;
border-radius:10px;
overflow:hidden;
height: 70%;
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
}
#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;
color:grey;
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">
function showLightbox()
{
$('#light').fadeIn(500);
$('#fade').fadeIn(500);
$('#close_lightbox').fadeIn(500);
setTimeout("showtite()",800);
}
function showtite()
{
showcap()
$('#tite').slideDown(1000);
}
function showcap()
{
$('#cap').fadeIn(1300);
}
function hideLightbox()
{
document.getElementById('myelement').data="";
$('#light').fadeOut(500);
$('#fade').fadeOut(500);
$('#close_lightbox').fadeOut(500);
$('#tite').slideUp(500);
$('#cap').fadeOut(500);
}
</script>

<body onload="showLightbox()" rel="lbox3">

<div id="tite" class="title" >Title Here!</div>
<button onclick="hideLightbox()" id="close_lightbox"><font size="2" face="arial black"><b><strong>X</strong></b></font></button>
<div id="light" class="white_content">

<object width="100%" height="100%" id="myelement" style="width:100%; height:100%;">
</object>
<script type="text/javascript">
function writeele(releca)
{document.getElementById('myelement').data="";
document.getElementById('myelement').data=releca;
}
</script>
</div>
<div id="cap" class="caption" >Caption or description here!</div>
<div id="fade" class="black_overlay"> </div>

-->

Example page: http://free-scripts.yolasite.com/ligh...

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
But, this doesn't work for the iframe lightboxes.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Pretty nice,

But- I have the site style formlogix, and is there a way to put the lightbox pop up automatically on the very bottom of the page? Like what I mean is when yo go on the site and scroll down to the bottom, there will be a little lightbox that is not blocking the yola ad but is almost doing it, I need a little lightbox at the bottom.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
No, not really, sorry. But yes, a bar across thats almost blocking the yola ad, its right on top of it.
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
No, not really, sorry. But yes, a bar across thats almost blocking the yola ad, its right on top of it.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, i can develop this and give it to you when I get done. I'll let you kno and give you the code when I'm done. D you want it all the way across the bottom or just a little one and then when you hover over it grows and then if you click it the lightbox pops up?
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
No, all I want is all the way across the bottom, and it automatically pops up, and is impossible to close.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
So, it isn't really lightbox right? It is a box across the bottom without the ability to close? I will post the code below in a couple mins.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow! My lightbox 2.0 post got long! (just like the other one!) Kevin, thank you so much for your awesome help with the lightbox and the features! ;)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi ACoolOne, here is the code!

<!--

<style type="text/css">
#bottom_lightbox {
padding:15px;
border-right:0px;
border-left:0px;
border-bottom:1px solid orange;
border-top:1px solid orange;
background-color:yellow;
position:fixed;
bottom:50px;
left:0px;
right:0px;
width:100%;
}
</style>
<center>
<div id="bottom_lightbox">Here is the content of the lightbox</div>
</center>

-->

Also, here is an example page: http://free-scripts.yolasite.com/bott...

Hopefully this is what you want! :)

--
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
P.S You could change those arrows to better ones, you know ^ you could change those to ▲Just hold in alt and type 30 on the number pad. If you have a laptop, hold in alt and then type 30 on the regular numbers.

This is how the arrow will look:

hold alt and type 30 = ▲

To make down, just hold alt and type 31, this is how it would look:

hold alt and type 31 = ▼

Sincerely,
Nathan
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
wow nathan thanks! theres loads of stuff i can do wit that! ☺

alex

http://tellyads.cz.cc
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
wow nathan thanks! theres loads of stuff i can do wit that! ☺

alex

http://tellyads.cz.cc
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
wow nathan thanks! theres loads of stuff i can do wit that! ☺

alex

http://tellyads.cz.cc
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem Alex! ☺