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 Gina Scalpone
Gina Scalpone
21,330 Points

[SOLVED]How to style lightbox with both vertical and horizontal images?

Hi, I have a lightbox based on the lightbox from the jQuery Basics course. It mostly works, but two of my images are vertical instead of horizontal, and when I click on those, they styling is wrong. How do a add different stylings for vertical images and horizontal images? Relevant code:

var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
$overlay.append($image);
$(".wrapper").append($overlay);
$("#gallery a").click(function(e) {
    e.preventDefault();
    var href=$(this).attr("href");
    $image.attr("src",href)
    $overlay.show();
});
$overlay.click(function() {
    $overlay.hide();
});

#overlay {
  background: rgba(0,0,0,.7) 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  text-align: center;
  display: none;
}
#overlay img {
    width: 30%;
}

2 Answers

Gina Scalpone
Gina Scalpone
21,330 Points

The answer I came up with (since I keep getting emails about choosing a best answer) was to just format the photos before I put them in the img file. Not the best way to do it. The other ways to do it that I thought of were to give the vertical and horizontal different classes to define their heights and widths differently, or to define them directly in the html.

Marcus Parsons
Marcus Parsons
15,719 Points

Your middle option of using CSS and differing classes is likely the best option. It's the most modular, quick, and efficient way to do it. If you were to instead define the widths and heights via CSS, you could preserve the aspect ratio of the original photos when they are brought up in the lightbox instead of scaling them down beforehand.

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Gina,

I would use some CSS manipulation to get those images to display correctly. But, first, if you're using Workspaces to get this done, can you post a snapshot of your Workspace and then post a comment when you've done it? I can't see any notifications if you just edit your original post. If you don't know how to post a snapshot, you can take a look here: https://teamtreehouse.com/forum/workspace-snapshots

Gina Scalpone
Gina Scalpone
21,330 Points

I'm not using Workspaces, but I solved it myself anyway. Thanks though!

Marcus Parsons
Marcus Parsons
15,719 Points

Oh, awesome! Glad to hear it :) Happy Coding!