Creating an Interactive Slideshow with Captions Using jQuery
This week’s jQuery lessons in Codecademy were a breath of fresh air! I really felt quite lost last week with JS, but things started to click for me this week with jQuery. CA still had some kinks this week (also no option to “Get Code”!!!), but with some help from Google, I finally got the hang of it about a quarter of the way into the lessons – and it was pretty breezy from there on.
I followed Greg’s instruction and added my images, captions, and dots(buttons) to my index.html file I created a few weeks ago for our homepage assignment, and linked to my new script.js file. As I moved through the lessons, I went back and forth to my JS file to begin building out my slideshow for my homepage. When I got stuck, w3schools tutorial was immensely useful – it really helped to see how all the pieces fit together: HTML, CSS, and JS/jQuery. Once I felt like I was in a good place, aka. the slideshow worked (yay!), I then played around with and added to my stye.css file for my homepage.
One area I am stuck on is how my slideshow first displays (or doesn’t display) in Chrome and Safari. On Chrome, all four images initially stack on top of each other, until I click on a button, at which point they become a slideshow. Also, the slide numbers, captions, and buttons are not ON the pictures (but above and below.) It doesn’t seem to be reading the CSS which styled the font size, color, etc… either. I’ve searched Google endlessly, but I don’t think I’m using the right terms.
The jQuery is working great in Safari, except that the images do not initially display at all – I have to first click a button and then the slideshow can begin. Again, Google hasn’t solved this one for me yet either. Any ideas class? Anyone else have either of these issues?
On a separate note, I am looking forward to our midterm project. I will be profiling a coworker’s husband who is a web developer for Discovery. Prior to joining Discovery a couple years back, he was a developer for a PR agency. I chose him because he has an interesting story about how and why he got into web development that I think the class will enjoy reading.