Lightbox without uploading!

  • 3
  • Idea
  • Updated 8 years ago
Want a lightbox that you can put anything in?
well here's the code!
First we include the Jquery library:

<script type="text/javascript" src="
http://code.jquery.com/jquery-
1.4.2.min.js"></script>



then the javascript:

<script type="text/javascript">
function showlbox()
{
$('#lboxbackground').fadeTo('500', 0.5);
$('#lboxcontent').slideDown('1000');
$('#lboxclose').fadeIn('500');
}
function hidelbox()
{
$('#lboxbackground').fadeOut('500');
$('#lboxcontent').slideUp('500');
$('#lboxclose').fadeOut('500');
}
</script>

at last the html:

<a href="#" onclick="showlbox();">your link</a>
<div id="lboxbackground" style="background:black; display:none;
position:absolute; height:100%; width:100%; left:0px; top:0px;
z-index:1000;"><!--leave this place alone--></div>
<div id="lboxclose" onclick="hidelbox()" style="cursor: hand; background-image:
url('http://www.campatet.com/
resources/img
/close.png'); display:none;
position:absolute; height:20px; width:20px; right:20%; top:19%;
z-index:1002"><!--leave this place alone--></div>
<div id="lboxcontent" style="background:darkgrey; border-radius: 10px;
display:none; position:absolute; height:60%; width:60%; left:20%; top:20%;
z-index:1001;"&gt
&lt!--your content here-->

</div>


That's it!
for a example, click Here



Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
  • happy

Posted 8 years ago

  • 3
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Very nice, kevin. Thank you for posting.
Photo of Kevin

Kevin

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

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Cool! That would be cool! But, how would we create multiple ones? Like multiple lightboxes and links? Would it work?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Did you create that www.campatet.com ? It's a pretty cool site with the features and stuff!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
For the lightbox:
Javascript:
function showlbox(contid)
{
$('#lboxbackground').fadeTo('500', 0.5);
$(contid).slideDown('1000');
$('#lboxclose').fadeIn('500');
}
function hidelbox()
{
$('#lboxbackground').fadeOut('500');
$('#lboxcontent').slideUp('500');
$('#lboxcontent2').slideUp('500');
$('#lboxclose').fadeOut('500');
}
HTML:

<a href="#" onclick="showlbox(lboxcontent);">your link</a>
<a href="#" onclick="showlbox(lboxcontent2);">your link</a>
<div id="lboxbackground" style="background:black; display:none;
position:absolute; height:100%; width:100%; left:0px; top:0px;
z-index:1000;"><!--leave this place alone--></div>
<div id="lboxclose" onclick="hidelbox()" style="cursor: hand; background-image:
url('http://www.campatet.com/resources/img...; display:none;
position:absolute; height:20px; width:20px; right:20%; top:19%;
z-index:1002"><!--leave this place alone--></div>
<div id="lboxcontent" style="background:darkgrey; border-radius: 10px;
display:none; position:absolute; height:60%; width:60%; left:20%; top:20%;
z-index:1001;"><!--your content here--></div>
<div id="lboxcontent2" style="background:orange; border-radius: 10px;
display:none; position:absolute; height:60%; width:60%; left:20%; top:20%;
z-index:1001;"><!--your content here--></div>

Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
You know where it says "id="?
in the link, where it says onclick="showlbox();", put the id of the content you want to show between the brackets, for example, if you have a content with a id of "car", you put; onclick="showlbox(car);".
to close it, look at the javascript.
Where it says
$('#lboxcontent').slideUp('500');, just add another one.
example; if you have a id called "car", write;
$('#car').slideUp('500'); .
The hash is absolutely required!
hope you understand this.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks, I get it now! :)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
And yeah, I made www.campatet.com. but there are many people to thank for their great codes. Google and fancybox are probably the most important.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi kevin, but how did you make all of the lightboxes? Like for the form, the lightbox zooms in. Its so neat! Keep up the great work!

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks kevin!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, how did you get the SET HOMEPAGE thing? Thats so awesome!!!!! GREAT WORK!! But how did you do it? With cookies? Good job!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
as i already said, those lightboxes on my site are from www.shadowbox-js.com.
they are not my creations.
and yeah, the homepage thing works by cookies. if you want to see, type this into the address bar when you are in the site:javascript:alert(document.cookie)
I am having cookie problems with firefox though. the cookies won't set in firefox.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Kevin, thats cool :) Is it a lot of JavaScript to make all of that stuff work? Cool stuff though! That site doesn't even look like it was built with Yola! (But I know it was, because I viewed the source and it had the Yola template in.) What template are you using for your site?
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
sorry about the confusion, it is shadowbox, not fancybox. but both are great!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Kevin, thats cool :) Is it a lot of JavaScript to make all of that stuff work? Cool stuff though! That site doesn't even look like it was built with Yola! (But I know it was, because I viewed the source and it had the Yola template in.) What template are you using for your site?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, shadow box is cool and fancybox is too! They both are cool! Have you ever heard of Facebox? Facebox is the Facebook-style lightboxes / modal boxes. Website: http://chriswanstrath.com/facebox/
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Well, i guess so so. I use the jquery javascript library, which is a great library that makes animations very easy. So instead of 60 lines of code(i've seen it myself), all you have to do is define what kind of animation(e.g fadeIn, fadeOut, slideDown, e.t.c), and its parameters(e.g height, width).
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thats cool! That is way better than 60 lines of code. Have you ever built a website with all HTML, no site builder? I have.It takes a lot more time! Thats why I use Yola. But, I use HTML sometimes. I am building an HTML one right now actually. It is: http://pauljohnsonphotos.com/ Also, I am using Lightbox 2 on the site I'm building right now. Here is the gallery page with lightbox 2 on it: http://pauljohnsonphotos.com/gallery....
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
as for the style, you gave it to me yourself Nathan! It's here:http://forum.yola.com/yola/topics/no_....
Go to the 6th reply!!!
Oh yeah, thank you for the style code!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem! So you used that? Thanks, I didn't know if anyone used it or not! I figured all of it out by viewing the source of one of my websites and I saw all of the classes and ids so I created a css style to hide all of the content so it can be a blank template. I'm glad it helped you!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
i did Nathan! Great Work
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hi Nathan, can I give you a suggestion? with the lightbox2 on your site, make the animation faster. I don't know about you, but the animation takes like 5 seconds to finish. thanks.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
And yeah, I am currently building a HTML5 compliant site called HTML and JavaScript from scratch and I am planning to submit it to the Virtual Science Fair contest.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I've uploaded what i've done so far here:http://www.campatet.com/resources/htm....

tell me what you think.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
the last part in chapter 2 will not work because I haven't created it yet. that's also why the last one is called the same as the 2nd one from the first chapter. I just copied and pasted the code
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
That is the coolest thing ever!!! Its awesome! Good job! You should win!! And I will change the animation speed. What do you think I should put?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
The menu and everything is so cool! You double click to make the menu appear! Did you use the lightboxes from shadow box for the menu?
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
no, everything on that site is created by me. And I think you should change it to at most 1 second.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok, I'll do that right now.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Done! It has been changed to 10. (1=slowest 10=fastest)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
is that the fastest? I still think it is a little slow, but it'll work.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
How fast do you think it should be? I'll try to make it faster.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
500 milliseconds will be the best
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I don't know if I can change it to milliseconds though. I'll check the script.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Check out www.fancybox.net and see how fast the animation for that is.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, that is fast. But, if you see on how lightbox2 has it, its not that fast. www.huddletogether.com/projects/light...
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
sorry, i'll have to go for now. see you later.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
have a good day / night
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Check it out now, I set it to 100.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Perfect Nathan!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
great job
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks kevin!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Bu the only problem is the Next button on the lightbox. (When you hover over the right of the image) It isn't aligned right. I looked all through the CSS and JavaScript and couldn't find something to fix. Do you know anything that wuld cause this?
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
No. I mean, you just changed the animation speed. That shouldn't do anything
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It's been like that the whole time I have had the lightbox. I posted to the lightbox 2 form - no response. I also emailed the creator - still no response! So I don't know what I'll do. It doesn't look nice. Also if you notice the little bar below the image that comes down and appears after the image loaded, it goes down too far and comes back up a little bit. Like ti comes down a centimeter too far and then goes back up a centimeter. I don't know what is going on. But this doesn't happen on the lightbox 2 site. If you want to, you can contact me through my site at www.nathansmusicstudio.tk so we can talk about this not on this forum (this topic is kinda going off topic!) Just click the blue Contact Us tab on the side of my site.