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
samiawyatt
5,269 PointsPortfolio image gallery caption question
Hello, I am building my portfolio gallery that will be displayed on my home page as clickable thumbnails. So if user wants to see the real size pic, they can click and read additional info about that pic. My question is... how can I add the caption to the real size picture?
Please see code below. Thank you
<div id="gallery" class="portfolio-gallery"> <div id="image-1" class="tshirt"> <div class="thumbnail-holder"> <a href="folio/Tshirt-mockup.jpg" target="_blank"><img src="folio/Tshirt-mockup.jpg" alt="Maximum Athletics T-shirt"></a> </div> </div> <div id="image-2" class="udderone-banner"> <div class="thumbnail-holder"> <a href="folio/UdderOne-Banner.png" target="_blank"><img src="folio/UdderOne-Banner.png" alt="UdderOne Banner"></a> </div> </div> <div id="image-3" class="udderone-website"> <div class="thumbnail-holder"> <a href="folio/UdderOne-Website.png" target="_blank"><img src="folio/UdderOne-Website.png" alt="UdderOne Website"></a> </div> </div> </div>
5 Answers
Gabriel Roczanski
Courses Plus Student 2,136 PointsHi!
The better way is using an jQuery plugin like Shadowbox or Fancybox, that add effects and give you the option to insert captions =P See more about Shadowbox here http://www.shadowbox-js.com/ and Fancybox here http://fancybox.net/
Good luck!
Philip G
14,601 PointsFor this you'll need to create another html page displaying the img with the caption. There isn't really a good way to do this otherwise(Out of a JS Lightbox) A (IMHO) bad way is to add the caption with an image editor under the picture and link to this.
samiawyatt
5,269 PointsStuart, You are right on the money. I just started learning HTML and CSS and I want to learn the right way to do things, that's why I'm asking you guys. I think I'm going to give fancybox a try.
Correct me if I'm wrong but if I use a plug in like fancy box, will help to have a simpler, cleaner code? (Less code) Is this right? Which option is best practice? Other HTML page or jQuery?
Gabriel Roczanski
Courses Plus Student 2,136 PointsFancybox no doubt, create other html pages will give you much more work, jQuery plugins are easy to install!
samiawyatt
5,269 PointsThank you Gabriel!
Gabriel Roczanski
Courses Plus Student 2,136 PointsNo problem, you get?
samiawyatt
5,269 PointsI did it. Fancybox rocks! Gabriel, thank you again. And thank you all for taking the time and sharing your own tricks.
samiawyatt
5,269 PointsThank you guys for taking the time!!!
Stuart Walker
4,649 PointsSorry I'm a bit late to the party.
It sounds like you're still quite new like me (correct me if I'm wrong). The best option I would choose is the suggestion from philip graf about making a new html page specifically for each photo. Then you can add captions or paragraphs or whatever you want. From my point of view, using jquery would be a bit advanced at my stage.
Philip G
14,601 PointsOr with PHP, you could generate this page with post variables.
Philip G
14,601 PointsPhilip G
14,601 PointsOh, sorry, you were faster... :)
Gabriel Roczanski
Courses Plus Student 2,136 PointsGabriel Roczanski
Courses Plus Student 2,136 PointsDo not apologize haha, more info better!