2016-09-25 166 views
0

以下代码用于从数据库检索图像并显示在表格中!导入jquery和引导文件(用于实现lightbox模型来查看图像)后,图像的大小变小,但我不知道如何增加图像的大小,因为它们有点小!我如何纠正它?增加图像缩略图的大小

大小高度= 180和宽度= 150看跌期权的图像不工作:(

<?php 
    require("includes/db.php"); 

    $sql="SELECT * FROM `order` "; 
    $result=mysqli_query($db,$sql); 
    echo"<head>"; 
    echo'//<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
      <link rel="stylesheet" href="css/jquery.gallery.css"> 

      <script src="http://code.jquery.com/jquery-3.1.0.min.js"></script> 
      <script type="text/javascript" src="js/jquery.gallery.js" ></script> 
      <script> 
       $(function() { 
        $(".simple_img_gallery").createSimpleImgGallery(); 
       }); 
      </script>'; 
    echo"</head>"; 

    echo "<body bgcolor=#E6E6FA>"; 
    echo "<table border=1 cellspacing=0 cellpadding=4 > " ; 
    while($row=mysqli_fetch_array($result)) 
    { 
     echo '<div class="simple_img_gallery">'; 
     echo '<a href='.($row['Image1']).' >'; 
     echo "<img id='myImg1' src='" .$row['Image1']. "' height='180' width='150' class='lightbox' />"; 

     echo "</a>"; 
     echo"</div>"; 

     echo "<br>"; 
     echo"</td>"; 
     echo"<td align=center >"; 


     if($row['Image2']=="No copy"){ 
      echo "No copy"; 
     }else{ 
      echo '<div class="simple_img_gallery">'; 
      echo '<a href='.($row['Image2']).'>'; 
      echo "<img id='myImg1' src='" .$row['Image2']. "' height='180' width='150' class='lightbox' />"; 

      echo "</a>"; 
     } 

     echo "<br>"; 
     echo"</td>"; 
     echo"<td align=center >"; 

     if($row['Image3']=="No copy"){ 
      echo "No copy"; 
     }else{ 
      echo '<div class="simple_img_gallery">'; 
      echo '<a href='.($row['Image3']).' >'; 

      echo "<img id='myImg1' src='" .$row['Image3']. "' height='180' width='150' class='lightbox' />"; 

      echo "</a>"; 
     } 

     echo "<br>"; 
     echo"</tr>"; 
     echo "</div>"; 
    } 
    echo"</body>"; 
    echo "<script type='text/javascript'> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-36251023-1']); 
    _gaq.push(['_setDomainName', 'jqueryscript.net']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 


</script>" 

?> 

enter image description here

+1

一些明智的代码缩进将是一个好主意。它可以帮助我们阅读代码,更重要的是,它可以帮助您**调试您的代码** [快速浏览编码标准](http://www.php-fig.org/psr/psr-2/ )为了您自己的利益。您可能会被要求在几周/几个月内修改此代码 ,最后您会感谢我。 – RiggsFolly

+0

同时显示“lightbox”类的CSS(如有必要,请查找) –

+0

如何获取所需大小的图像? –

回答

0

看起来你被CSS限制你的图像大小。 这就是说,你的浏览器知道约180x150大小,但它重新渲染根据您的CSS规则

速战速决是:

echo "<img id='myImg1' src='" .$row['Image1']. "' height='180' width='150' class='lightbox' style="height: 180px; width: 150px;" />"; 

无论如何,请看看你的CSS,并在那里修复它。