Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashlynn Pai
Ashlynn Pai
11,679 Points

jQuery Basics Lightbox issues resizing

I was trying to make the image gallery larger but ran into some problems.

First, the caption text became illegible because there were photos in the background and I couldn't seem to change the background of the caption. My solution was to make the overlay opaque.

Next the overlay didn't cover to reach the bottom photos. So I added $('#overlay').height($(document).height()); and it works locally, but I uploaded it so I could point to it on these forums and now it's broken. Weird.

Third, I couldn't figure out how to keep the overlay in the center of the screen so it's always easy to see.

Fourth, I couldn't figure out how to add spaces and new lines to the caption, which is drawn from the alt text.

If you want to see what I mean, I uploaded it to http://ashlynnpai.com/travel/gallery/ and pushed the code to https://github.com/ashlynnpai/road-lightbox.

Thanks!

3 Answers

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

So, is there any reason why you're building this from scratch and not using a ready made plugin that takes care of all the problems you're having? There are plenty of lightbox plugins out there that will take care of this for you. Here are some guides as to why you're seeing this.

For points 1,2, and 3, most of your issues are CSS related and where you are appending the overlay box. Most overlay or lightbox plugins take care of this by having an overlay div that is typically quite large, like 10,000 pixels wide and tall or something crazy. They use this as the overlay div because when you are setting the height of the div, you're not making it big enough to cover everything.

As to number 4, I'm not completely sure what you mean, but it seems like you can do it all with some text manipulation before you append it to the caption using $caption.text(captionText); in your code.

If you want to see how some of the other folks implement this, try taking a look at http://fancyapps.com/fancybox/ which is a pretty good plugin for accomplishing this.

Ashlynn Pai
Ashlynn Pai
11,679 Points
Ashlynn Pai
Ashlynn Pai
11,679 Points

I didn't build it from scratch. The code is from Andrew's JQuery Basics course, which I put in the title of my post. I just tried to tweak it to make it look like I wanted. Since many others at Treehouse have completed that course, maybe someone else has tweaked it better than me.

I can go and look at some other people's code, as long as my main focus is learning code.

Ashlynn Pai
Ashlynn Pai
11,679 Points
Ashlynn Pai
Ashlynn Pai
11,679 Points

I think I fixed my issues remaining faithful to the original design.

Issue 1 - #overlay p add 

background-color: whatever;  //override transparency
width: 800px;  //whatever width you want for the caption
margin: 0 auto; //position caption below image

Issue 2 - http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

"The solution here is to set a minimum height on the root element and on the body instead of setting a height value, which is preferable in most situations."

html, body { margin: 0; min-height: 100%; }

Issue 3 - Still not perfect but looks ok.

Issue 4 - Can't do with cross-browser compatibility using CSS but fiddling with caption font and width can force text to the next line.