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

HTML

Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

How to set the length of a caption in a photo gallery?

I am working on a task and have used a Jquery plugin to create a lightbox photo gallery. The captions are only allowed to be 600px in length and I am wondering if I can do this in the html, and will it work with the plugin? The caption comes from the alt="" the plug in I have used is photobox master. https://github.com/yairEO/photobox

I have tried putting in

style="width: 600px;" but may not be placing it correctly. Any advice / guidance is much appreciated. Thank you.

a html sample is below

 <li data-keywords="sand dunes beach"><a href="Photos/08.jpg"><img src="Photos/Thumbnails/08.jpg" alt="Sand Dunes on the beach, could be anywhere in the world, however it is one of my favourite places.  I really enjoyed staying at this location and would recommend it to anyone." title="Sand Dunes" class="photo">
                </a></li>

1 Answer

Mary Hawley
.a{fill-rule:evenodd;}techdegree seal-36
Mary Hawley
Front End Web Development Techdegree Graduate 34,349 Points

For this project, I styled the captions in the main CSS file. After the caption has been appended to the image in the overlay in the jQuery file:

var $overlay = $('div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//Append the overlay to the body
$("body").append($overlay);

//Append the image to the overlay
$overlay.append($image);

//Append the caption to the image in the overlay
$overlay.append($overlay);

In the CSS file, add the styling (You can style both the image using the selector '#overlay img', and the caption using '#overlay p'):

#overlay p {
     max-width: 600px;
}

Hope this helps!

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you