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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Kevin Dunn
Kevin Dunn
6,623 Points
Posted by Kevin Dunn
Kevin Dunn
6,623 Points

.show() method adds inline-style by default. How to remove it?

When clicking an image link from the gallery-list, an overlay is supposed to be shown. $overlay.show() shows the overlay, but this code also adds an inline-style into the overlay. It adds an inline style with the style display:block. How to remove it?

It goes from:

<div id="overlay"></div>

to this when clicking an image link:

<div id="overlay" style="display: block;"><img src="img/P2271652.jpg"></div>

here is the jQuery code:

//Capture the click event on a link to an image
$(".gallery-list a").click(function(event){
  event.preventDefault();

  var imageLocation = $(this).attr("href");

  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);  

  //Show the overlay
  $overlay.show();
  //Get child's alt attribute and set caption
  var imageCaption = $(this).children("img").attr("alt");
  $caption.text(imageCaption);
});

1 Answer

eck
eck
43,038 Points

Heyo, I am going to give you a bit of info on how jQuery's show method works and a few options you might be interested in to get the results you are after.

Here is how jQuery's show method, when you are not using animations, determines which display value to use:

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

So, if your problem is that you want to be using another value for display that is not block, you could declare the display property value for #overlay in your CSS and expect that to be the inline value.

However, if you just don't want there to be an inline style at all you could call $overlay.css('display','') right after you call the show method and remove the inline style. You could even call that in place of the show method if you are not using the animation functionality at all.

A third option would be to create a CSS class, maybe something like:

.hidden {
  /* this is !important so that display: none will always take precedence */
  display: none !important; 
}

You could then call $overlay.addClass('hidden') and $overlay.removeClass('hidden') to change visibility of the element without using any inline styles.

If you are interested in my opinion on which approach to use, I would favor the last one, assuming again that you do not need to make use of jQuery's animation functionality.