lightbox

[Matej]

Hello gentlemen , i would like to ask you if know any lightbox(http://fancybox.net/ like this one = the 3rd one) tutorial in plain javascript . I have been searching for a while now but so far i've found only JQ tutorials.

 

Thanks for answers

[Ingolme]

Almost all lightbox scripts are built upon jQuery because it simplifies DOM access and animation. I have never searched for a Javascript-based one. Why are you opposed to using jQuery?

[Matej]

I would like to "master"/"learn" javascript without using libraries so i can master/learn it properly. Of course i'm planning to learn jquery and some others libaries/frameworks eventually , but in my opinion pure(plain) JS skill>libraries , (and i dont like "$" it just irritates me )

 

//

and also i feel like i dont learn anything and im just copying someone's work when i just search JQ plug in/script and just copy paste it (modife it a little)

Edited December 14, 2014 by Matej

[Ingolme]

Yes, knowing Javascript is important, but you're not going to find tutorials on how to make a light box because it's such a particular thing and it's pretty complex.

 

Tutorials give you basic building blocks. They can teach you about each of the different components that things are made up of, but they won't tell you how to put those components together because there are endless ways to do that. The main skill every programmer needs is knowing how to use the tools they have to make what they want.

 

These are some of the things you need to know to make a lightbox from scratch:

 

A lightbox is an element on the page, usually a <div>, with position: absolute and a specified width and height. It is hidden until it is needed. It has a background color and sometimes a border. You can create elements using document.createElement() and add them to the page using appendChild().

 

Inside the lightbox is an <img> element that is set to the same URL as the href attribute of a link that was clicked on. To target the links on the page, or any other element, you can use DOM methods such as getElementsByTagName() or getElementById(), and DOM properties such as parentNode and childNodes.

 

The box changes its size to fit the image it contains. To find out the size of the image, check the image's width and height properties after it has loaded, you need to use the image's onload event to determine that. To change the style of the box, use the style property.

 

This isn't all that you need to know, there's also event handling, animation and more basic things such as callbacks. Each of these things take time to learn on their own, trying to cram it all into a single tutorial is impossible.

[Matej]

Yes thanks

 

I'm aware of all of those things , the biggest reason for me to want to find lightbox tutorial is to understand logic of animations behind it (well you can do pretty"one image lightbox" - without slides with just :target in css)

[Ingolme]

You'll need to learn about Javascript animation in general, some math knowledge is required as well.

 

This tutorial is a good place to start:

http://javascript.info/tutorial/animation

[Matej]

thanks:)