Thursday, July 11, 2013

Image resizing with out using css and with out pixalating

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

$(document).ready(function() {
   
    var thwidth = $(".image-nav li").css("width");
   
    var liwidth = parseInt($('.image-nav li').css('width'));
    var liheight = parseInt($('.image-nav li').css('height'));
        var x = '';
   
        $( ".image-nav li img" ).each(function( index) {
                $(this).css('width',liwidth);
           if(liwidth>liheight){
               var hi = (liheight*100)/liwidth;
           $( ".image-nav li img").css("width", hi);
               }else {
              var wi = (liwidth*100)/liheight;               
          $( ".image-nav li img").css("height", wi).css("marginLeft", "-20px");  
                   }
           
        });
   
});


</script>
<title>Image resizing</title>
</head>

<body>
<div id="gallery-wraper">
  <div id="image-wraper">
    <div class="slide-image"> </div>
    <div class="image-nav">
      <ul>
        <li><img src="images/flowers-wallpaper-13.jpg" /></li>
        <li><img src="images/flower27.jpg" /></li>
        <li><img src="images/flower-20070920032053752.jpg" /></li>
        <li><img src="images/desktop-gallery-windows-7-abstract-blue-flower.jpg" /></li><li><img src="images/images.jpg" /></li>
        <li><img src="images/pl_arts_pendulum1_f.jpg" /></li>
       
      </ul>
    </div>
  </div>
</div>
</body>
</html>