2016-10-01 22 views
0

我建立一個畫廊,但是當我按下需要把圖像在一個較大的IMG框之一,它把錯誤的形象。PHP的foreach和JS改變光源切換錯誤畫面

它所現在做: enter image description here

這是代碼現在:

   <?php 
       $hostname='localhost'; 
       $username='dddoecje_rik_cam'; 
       $password='*******'; 

       try { 
        $dbh = new PDO("mysql:host=$hostname;dbname=dddoecje_campu",$username,$password); 

        $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line 
        $i = 0; 
        $len = count($array); 
        $sql = "SELECT * FROM gallery"; 
        foreach ($dbh->query($sql) as $row) 
        { 
         echo ' 
         <div class="col-md-2"> 
          <a> 
           <div onClick="change()" class="enlarge"> 
           <i class="fa fa-arrow-down fa-3x" aria-hidden="true"></i> 
           </div> 
           <img src="data:image/gif;base64,'.base64_encode($row['image']).'"></img> 
          </a> 
          <script> 
           function change() { 
            var image = document.getElementById("pic-big"); 
            image.src = "data:image/gif;base64,'.base64_encode($row['image']).'"; 
           } 
          </script> 
         </div> 
    '; 
        } 


        $dbh = null; 
       } 
       catch(PDOException $e) 
       { 
        echo $e->getMessage(); 
       } 
       ?> 
</div> 
     </div> 
     <div class="picture"> 
      <img id="pic-big" src="assets/img/villa1.png" alt="Villa Big"> 
     </div> 

是否有人知道是什麼原因導致這個問題?

+0

是什麼原因導致什麼問題,它不會改變? – SAM

+0

圖片不會更改爲圖片需要更改爲 – Rik

+0

請同時添加您的JavaScript腳本 – SAM

回答

0
<script> 
function change(src) { 
var image = document.getElementById("pic-big"); 
image.src = "data:image/gif;base64,'"+src+"'"; 
       } 
    </script> 
    <?php 
    $hostname='localhost'; 
    $username='dddoecje_rik_cam'; 
    $password='*******'; 
      try { 
    $dbh = new PDO("mysql:host=$hostname;dbname=dddoecje_campu",$username,$password); 
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line 
    $i = 0; 
    $len = count($array); 
    $sql = "SELECT * FROM gallery"; 
    foreach ($dbh->query($sql) as $row) 
    { 
    echo '<div class="col-md-2"><a><div onClick="change(\'.base64_encode($row['image']).\')" class="enlarge"><i class="fa fa-arrow-down fa-3x" aria-hidden="true"></i></div><img src="data:image/gif;base64,'.base64_encode($row['image']).'"></img></a></div>'; 
       } 
       $dbh = null; 
      } 
      catch(PDOException $e) 
      { 
       echo $e->getMessage(); 
      } 
      ?> 
    </div> 
    </div> 
    <div class="picture"> 
     <img id="pic-big" src="assets/img/villa1.png" alt="Villa Big"> 
    </div> 
+0

不起作用。當我按下圖像時,它只是沒有任何東西 – Rik

+0

檢查你的控制檯 –

+0

'SyntaxError:預期的表達式,腳本結束campi.nijdeken.com:1:7' – Rik

0

你必須在你的代碼錯誤:
1.Don't使用</img> img標籤並不需要這一點。
2.定義循環外的函數。
3.你應該調用image函數而不是div
4.你也應該爲你的函數添加一個參數。
小圖片:

$image_src = "data:image/gif;base64,'.base64_encode($row['image']).'"; 
<img onClick="change(.$image_src.)" src=".$image_src."> 

而JavaScript函數應該是這樣的:

function change(img_src) 
{ 
var image = document.getElementById("pic-big"); 
image.src = img_src; 
}