Jump to content

lightbox


Matej
 Share

Recommended Posts

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 :D)

 

//

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 by Matej
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...