子圖像顯示點擊mainimage當

Question

我要讓喜歡當我點擊了圖像的切換圖像的子圖像會出現這樣的事情......這是具有一個切換功能的圖像..

<?php 
    include('../includes/inc.php'); 
    $user_id =json_decode($user->user_id); 
    $albumname=''; 
    $album = $carousel->get_album($user_id); 
    foreach ($album as $key => $myalbum) { 
    $albumname = $myalbum['album_name']; 

?> 
    <div class="portfolio-image"> 
    <div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;"> 
    <img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>"> 
    <p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p> 
    </div>&nbsp;&nbsp; 
    <p></p> 
</div> 
<?php 
} 
?> 

這是我的功能不用..

<script type="text/javascript"> 

    $(document).on('click', 'img[data-id]', function() { 
    var selected = $(this).attr('data-id'); 

    $ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle(); 

    }); 
</script> 

這就是子圖像會顯示出來。一旦我點擊了圖像..

<div class="col-md-12 picforalbum"> 
<?php 

    include('../includes/inc.php'); 
    $user_id =json_decode($user->user_id); 
    $album = $carousel->get_photoINalbum($albumname,$user_id); 
    foreach ($album as $key => $pic) { 
?> 
    <div class="portfolio-image"> 
    <div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;"> 
    <img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" > 
    </div>&nbsp;&nbsp; 
    <p></p> 
    </div> 
    <?php  
    } 
    ?> 

</div> 

但問題是，當我試圖單擊切換圖像沒有任何反應......

Answer 1

假設你想切換功能爲你的形象，我徑自並建立了一個簡單的JSfiddle。 （如右圖需要一點時間來加載基於你的網絡連接，請等待點擊圖片後幾秒鐘）

你需要做的，通過的onclick基本上調用一個函數（什麼）圖像，其改變你的IMG標籤的SRC屬性上。因此，如果您維護一個布爾變量，您可以輕鬆地在true和false之間切換以更改圖像。所以對於真正的你會有link1和虛假的你會有link2。

編輯：既然你說圖像應該作爲「子」圖像的切換，我已經編輯了代碼，其中圖像充當切換旁邊的另一個圖像。請參閱下面的updated fiddle和代碼片段。

這是一個簡單的例子。

var toggle = false; 
 

 
function toggle_img() { 
 
    if (toggle) { 
 
    document.getElementById("toggle_image").style.opacity = 0; 
 
    toggle = false; 
 
    } else { 
 
    document.getElementById("toggle_image").style.opacity = 1; 
 
    toggle = true; 
 
    } 
 
}

<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" /> 
 

 
<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>