子图像显示点击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"/>