SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image size/height in IE and FF

    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.
    Code:
    $('.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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh ok.

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

    You can use this template:

    Code:
    <!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. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Rjfec View Post
    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.
    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:

    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. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, I think it put me in the right direction.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •