Image size/height in IE and FF

JavaScript
1

The following works somewhat fine in chrome, but is garbage in IE and FF. I can not seem to figure out why .height is not working. Any help is appreciated. The goal is to have the img in the light box stay within the viewport (actually a bit smaller then the viewport) *please note, I am a rookie to jquery and I am sure the below could be improved or changed. (:

$('.mainContent a').has('img').addClass('lightbox_trigger');

	$('.lightbox_trigger').click(function(e) {

        e.preventDefault();

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

            var lightbox =
            '<div class="lightbox">' +
                '<p>Click to close</p>' +
                '<div class="lightbox_content">' +
                    '<img src="' + image_href +'" />' +
                '</div>' +
            '</div>';

            $('body').append(lightbox);
            $('.lightbox').hide();
            var maxheightvalue = $(".lightbox").height - 60;
			$(".lightbox img").css("max-height", maxheightvalue + "px");
            $('.lightbox').fadeIn(400);
    });

    $(document.body).on('click', '.lightbox', function() {
    $('.lightbox').fadeOut(300, function() {
	
    	$('.lightbox').remove();

    	});
    });
2

Hi there,

Can you provide a link to a page where we can see this in action?

3

Hi Pullo,

Unfortunately it is on my local machine and a screen shot does not do it justice.

4

Oh ok.

Could you then post enough code for me to recreate your problem?

You can use this template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

your CSS here

</style>
	
</head>
<body>

your HTML here

</body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>

your JS here

</script
</html>
5

Hi Pullo,

Thanks for taking the time to look at it, I appreciate it. I have put the code here so it would not be so long. Also, I was unable to provide the image link and src. Thanks

6

It’s not working, because you are trying to set the height of the image, before the image has loaded.
You’’ need to use the images load() function.

I took the liberty of rewriting your code a little.

Here’s a fiddle.

Here’s the complete code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lightbox example</title>
    <style>
      #black_overlay{
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
      }
      
      #image {
        position:relative;;
        border: 16px solid white;
        z-index:1002;
      }
    </style>
  </head>
  <body>
    <div id="lightbox">
      <a href="https://i.chzbgr.com/maxW500/3919704832/hA8E22AF7/">Display image in lightbox</a>
    </div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
      jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
      }  
      
      $('#lightbox a').click(function(){
        $('<div>',{
          id : 'black_overlay',
          click: function(){
            $(this).remove();
            $('#image').remove();
          }
        }).insertBefore('#lightbox');
        
        $('<img>',{
          id: 'image',
          src: $(this).attr('href'),
          load: function() {
            $(this).insertAfter('#lightbox').center();
          }
        })
        return false;
      });
    </script>
  </body>
</html>

Hope that helps you.

7

Thanks Pullo, I think it put me in the right direction.