Something went wrong.

We've been notified of this error.

Need help? Check out our Help Centre.

Lightbox - My First JQuery Plugin

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:

Features:
-Responsive
-Close ‘X’ button
-Intro and exit animation
-‘Prev’ and ‘Next’ buttons
-Area for image text from attribute
-Keyboard support
-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)

Process:
-Create an overlay element, and add to it the:
    -close button
    -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
     an attribute
-Click functions for previous, next, and closing the popup (either through clicking the ‘X’ or by clicking outside of the popup).



Basics, Loops, Arrays, & Objects

Over the past few days I’ve made some good progress with the Treehouse course. I managed to complete the JavaScript Basics course as well as the JavaScript Loops, Arrays and Objects course. For the most part, these courses were reviews for me since I knew almost everything that was mentioned. Regardless, it was still a good refresher and I’m glad I went through them. The parts that stuck out the most to me were the topics on Loops, Arrays, and Objects. I was able to review all the different loops and how they are used. With Arrays and Objects, it was great to learn about a few methods to use when interacting with them such as .unshift(), .pop(), .join(’ ‘), and .concat(). Furthermore, I learned about the for-in loop used when dealing with Objects. Previously I used the for each loop, but this is a good alternative. 

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.


My plans to improve!


Hi all! I have recently decided to take on the Team Treehouse Full Stack Javascript course in order to refresh and progress my skills. With that, I thought it would be a good idea to start this blog to keep track of my progress. I will be writing about the topics I go through, and what I learn. I feel that this will help me to stay committed and on track. I’ve began various other Treehouse courses before, but I’ve never finished one through to the end, and that is the goal this time. 

Aside from the course, I have picked up copies of Javascript & JQuery by Jon Duckett, Secrets of the Javascript Ninja by Bear Bibeault and John Resig, and You Don’t Know Javascript by Kyle Simpson. 

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.


1
Using Format