从缩略图图像显示屏幕范围的版本

Javascript Displaying screen-wide version from thumbnail image onclick

本文关键字：屏幕范围版本显示屏显示略图图像更新时间：2023-09-26

我有一组缩略图，我想，在点击一个，很好地显示它的屏幕宽的版本，灰色的网站的其余部分，直到另一个点击。

我已经看到一些网站这样做，但在过去的几天里不太幸运。

我确实使用HTML Bootstrap(无论如何暂时)为这个网站，因此也使用jQuery。

我相信有一个简单的方法来做到这一点，但Javascript不是我的语言，我似乎不擅长搜索^^'

无论如何，谢谢你的帮助。

一个非常流行的插件是lightbox。

样本

步骤1:下载javascript文件，并将javascript和css放到你的页面中。

<html>
<head>
    <script src="jquery-2.1.1.min.js"></script>
    <!--- boostrap goes here --->
    <script src="bootstrap-lightbox.min.js"></script>
    <link rel="stylesheet" href="bootstrap-lightbox.min.css">
</head>
<body>
   <!-- page content --->
</body>
</html>

步骤2:定义一个div容器，其中包含图像的"大"版本。

 <div id="myLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
        <img src="myBigImage.jpg">
        <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
</div>

步骤3:在你的缩略图图像标签

<img src="myThumbnail.jpg" onClick="$('#myLightbox').lightbox()"/>

从缩略图图像显示屏幕范围的版本

Javascript Displaying screen-wide version from thumbnail image onclick

Bootstrap - lightbox