成长效果网格图库

Question

我很想知道是否有任何开源 JS 库可以模仿您在以下网格图库中看到的效果：

http://www.lucrezialantana.com/artist-books/filorosso/

当用户单击缩略图时，它 "grows" 变为全尺寸，而其余图像保持不变。

我不知道这个效果是怎么调用的，所以不知道怎么找一个模仿它的lib。有什么想法吗？

提前致谢

Answer 1

您可以使用自定义 jquery 来执行此操作。

$(document).ready(function(){
 $('.ourImages').click(function(){
  $(this).height('500px').width('500px');
 });
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" width="200px" class="ourImages" />
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso3.jpg" width="200px" class="ourImages" />

Answer 2

Rohits 的回答很好，但你甚至不需要 jQuery（尽管它确实使它更容易）

这是一个纯粹的 JavaScript/HTML/CSS 示例：

//Function to change image size
//We do this by adding or removing the CSS class "small"
function growOnClick(evt) {
  //The click image
  var img = evt.target;
  //If class already contains "small"
  if (img.className.indexOf("small") >= 0) {
    //Remove "small"
    img.className = img.className
      .replace(/small/ig, '')
      .replace(/  /ig, ' ');
  } else {
    //Add small
    img.className += " small";
  }
}
//Select all "img" tags with the "growOnClick" class
document
  .querySelectorAll("img.growOnClick")
  .forEach(function(img) {
    //For each image, bind "onclick" event to our function
    img.onclick = growOnClick;
  });

img.growOnClick {
  transition: width 2.5s;
  width: 500px;
  cursor: pointer;
}

img.growOnClick.small {
  width: 150px;
}

<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" class="growOnClick small" />
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" class="growOnClick small" />
<img src="http://www.lucrezialantana.com/files/gimgs/26_filorosso1.jpg" class="growOnClick small" />

成长效果网格图库

Grow effect grid gallery

javascript

jquery

image

gallery