SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Proportionally scale image on window resize.

    Hi all

    I have a demo here to illustrate my problem

    http://www.ttmt.org.uk/forum/gallery1/

    It's a simple list of images at scrolls across the page.

    When the image is clicked a larger image appears above it, lightbox style.

    I want the height of this image to be a percentage of the height of the window (85%) and the width to adjust proportionally.

    If the window is resized I would like the image to scale proportionally.

    In Safari the large image appears at the correct height and scales proportionally when the height is changed but doesn't scale correctly when the width is changed less then the width of the image.

    In Firefox the large image doesn't appear at the correct height and doesn't scale when the height is changed but it does scale proportionally when the width is changed.

    How do I get the image to appear at the correct height and scale proportionally across browsers.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
      
      <style type="text/css">
        ul#gallery {
        	margin:100px 0 0 0;
        	
        	float:left;
        	height:500px;
        	margin-right:-20000px;
        }
        ul#gallery li{
          display:inline;
        }
        ul#gallery li img{
          float:left;
          height:100%;
        }
        #header{
          position:fixed;
          margin:20px 0 0 20px;
        }
        #header img,
        #header ul#info{
          float:left;
        }
        #header ul#info{
          margin:5px 0 0 50px;
        }
        #header ul#info li{
          color:#aaa;
          font:.95em/1.5em Helvetica, sans-serif;
        }
        #header ul#info li a{
          color:#aaa;
          text-decoration:none;
        }
        #header ul#info li a:hover{
          color:#333;
        }
        #header select{
          margin:20px 0 0 50px;
        }
        #lightbox {
    			position:fixed; 
    			top:0; 
    			left:0; 
    			width:100%; 
    			height:100%; 
    			background:url(overlay.png) repeat; 
    			text-align:center;
    		}
    		#lightbox p {
    			text-align:right; 
    			color:#fff; 
    			margin-right:20px; 
    			font-size:12px; 
    		}
    		#lightbox img {
    			box-shadow:0 0 15px #111;
    			-webkit-box-shadow:0 0 15px #111;
    			-moz-box-shadow:0 0 15px #111;
    			max-width:940px;
    		}
    		#content img{
    		  height:85%;
    		  max-width:100%;
    		}
      </style>
      
      </head>
      
    <body>
      
      <ul id="gallery">
        <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
        <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
        <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
        <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
        <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
        <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
        <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
        <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
        <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
        <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
        <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
        <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
        <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
        <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
        <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
      </ul>
    
    
    <script>
      jQuery(document).ready(function($) {
    
      	$('.lightbox_trigger').click(function(e) {
    
      		e.preventDefault();
    
      		var image_href = $(this).attr("href");
                
      		if ($('#lightbox').length > 0) { // #lightbox exists
    
      			$('#content').html('<img src="' + image_href + '" />');
    
      			//$('#lightbox').show();
      			
      			$('#lightbox').fadeIn('2000');
      		}
    
      		else { 
    
      			var lightbox = 
      			'<div id="lightbox">' +
      				'<p>Click to close</p>' +
      				'<div id="content">' + 
      					'<img src="' + image_href +'" />' +
      				'</div>' +	
      			'</div>';
    
      			$('body').append(lightbox);
      		}
    
      	});
    
      	$('#lightbox').live('click', function() { 
      		$('#lightbox').hide();
      	});
    
      });
      </script>
    </body>
    
    </html>

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey ttmt,

    Did you ever get an answer to the above question? It is exactly the same problem I have! I have a jquery horizontal scrolling gallery with large main images that need to scale down proportionally with the size of the window.

    Any help would be wildly appreciated.

    Nick

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I did it with

    Code:
    max-width:100%;
    max-height:100%;


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
  •