-
tCycle - This is the source I used for my slideshow jQuery plugin. I wanted something really small, easy to load and simple for mobile viewing. This gave me exactly that. I had to tweak the code just a bit to work for my needs, but for the most part it had thorough documentation and easy plugin usability. It was responsive which was something surprisingly hard to find in a jQuery slideshow plugin, but I am pleasantly surprised with its usability on both desktop and mobile. I used 10 images in this slideshow as a "daily uploads" section to show candid, everyday events around the banana stand so customers can get a feel for the environment the stand offers. I think all-in-all the slideshow plugin serves its purpose well and isn't fancier than it needs to be for a fun, single scroll restaurant page like this.
-
jQuery Slideshow Plugins - This is the reference list where I found the tCycle plugin listed above. I played with and researched a few of the options from this list, but in the end the tCycle was exactly what I needed for this project and displayed well.
-
jQuery Download - I used the home site of jQuery to download the main jQuery file I used for my project.
-
SlickNav - This is the plugin I used for my responsive, hamburger menu navigation panel. This was a bit harder to get working than my first plugin for the slideshow, but after I altered my HTML structure a bit and studied their source code, I finally figured out how they had it working. Their documentation was not as thorough as I think it should have been, and left out some key structure points you need to add to the html to make this plugin work. So I had to do some reverse engineering to get it responding the way it was suppose to, but I'm glad I stuck with this plugin and made it work. It responds exactly how I wanted it to. It is completely responsive, and I styled the list to be inline for desktop view. It is very function for mobile, which is was I was designing for first. I think with a single scroll page like this, an easy navigation menu is key. I wanted it simple and functional. And that's what this plugin provided for me, so I'm happy with how this turned out.
-
Smooth Scroll - This is the resource I used for the custom jQuery code to add smooth scroll to my site. It helped give me the jQuery code ideas I needed to create the smooth scroll from the navigation on my page. I wanted this smooth scroll to help ease the navigation use on my single scroll page, and I think it adds great user experience and interactivity to the page. It's not essential, but it's a nice surprise for users I believe.
-
MDN EventTarget.addEventListener - This was a huge help for me. I used this page of the Mozilla Developer Network to help gather some of the code and guidance I needed for the custom JavaScript I added to the slideshow. I created a click event listener so when you click the slideshow, a fun Arrested Development quote pops up under the About Us text next to the slideshow. I thought this was a fun, interactive easter egg for users and a way to add content to the page. In my experience, clicking on an image on a site is common to see if it links anywhere or gets bigger. So I thought it'd be a fun surprise to give users who do click on the image. This resource was extremely helpful. After looking over my notes and reading this article through a couple times, I started coding what I believed would make this click event work that I had created in my head. And it did, so I was very pleased!
I had a lot of fun designing this site. It was a project where I added my own style to an existing brand that I think turned out well! I enjoyed working with the jQuery plugins, that's definitely been my favorite topic of the semester. I find it extremely useful and broadens my ability to use JavaScript, a language that does not come very easily to me. So it's great to know there are tools and plugins out there to help me use JavaScript and all its benefits in a more concise, friendly way. Through this project, I did learn the importance of researching a plugin thoroughly before taking the time to apply it to your site. I spent several hours over the course of this project trying to make plugins work that were not what I wanted or needed for the site. If I would have done more research on the documentation ahead of time, I would have saved myself some frustration. But overall, I am very pleased with the plugins I did end up using, and I found some great resources in the process for future projects.
I did use the back-to-top button that I used in my resume, but it is not one of my 2 plugins required for this project. I added it in because I really liked its functionality and wanted a back-to-top button for this single scroll site. But again, it is not one I expect to be graded on as 1 of my 2 plugins.
I really enjoyed this project and all the different facets. I loved bringing everything from the semester together into one unified portfolio piece, and I feel confident with the work I'm submitting. Can't wait to get your feedback.