UPDATE: 9/14 10:43pm. Have basic functionality working. Pushed code to GitHub and opened a few issues with what I still have to do: https://github.com/cjhensen/cj-lightbox/issues/
I’ve spent the past few days going over the basics of JQuery and I’ve decided that for my first project I am going to create a simple JQuery lightbox plugin. Yeah, there’s a billion of these out there already, but I figured it would be good to try to re-create one to get me to think through the process of how and to use my new skills.
There are a couple of features I want this plugin to have, and I am going to map them out below, along with the steps I am going to take to create the plugin:
-Close ‘X’ button
-Intro and exit animation
-‘Prev’ and ‘Next’ buttons
-Area for image text from attribute
-Themeable easily with CSS through SASS
-Touch device support, or alternative* (not sure if I’m going to implement this, just wanted to write it down)
-Create an overlay element, and add to it the:
-previous and next buttons
-area for image
-area for text
-Capture the click event on an element
-Show the overlay
-Populate the overlay with the image (using its URL) and the text from
-Click functions for previous, next, and closing the popup (either through clicking the ‘X’ or by clicking outside of the popup).
I’ve come up with a few ideas for small simple apps to test my knowledge, and I think I’m going to be starting to work on one over the next few days. However, I am excited to get into JQuery, as that is the next course and I haven’t used it in a while so I’m looking forward to seeing what’s new.
I’ll be documenting my progress here, along with any troubles I run into and side projects I start.
Feel free to just read along, or comment on the posts if you’re interested. I’m always looking for new advice, tips, and tricks.