具有滑动效果的模态

Question

我一直试图获得具有滑动效果的模态并在悬停时放大但还没有运气，但我设法达到了点击它时弹出图片的程度。 这是一个类似的网站http://www.garysheng.com/ （图片部分）。 请参阅 Codepen https://codepen.io/rranssa/pen/LYVyooe 。

Answer 1

您可以使用lightGallery

它很简单，您不必自己实现它，您需要做的就是在文档中添加提到的链接，然后像下面这样使用它：

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });
</script>

您可以通过将对象传递给它来启用和禁用选项，如下所示：

$('#lightgallery').lightGallery({
    mode: 'lg-fade',
    cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
    ......
}); 

所有选项都可以在下面的链接中找到： https : //sachinchoolur.github.io/lightGallery/docs/api.html