1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [jQuery] 實作出水平瀑布流相片牆×Lightbox燈箱效果
js 網頁開發

[jQuery] 實作出水平瀑布流相片牆×Lightbox燈箱效果

2020/06/16

梅問題-[jQuery]水平瀑布流相片牆+lightbox燈箱效果
  先前梅干曾分享過,利用Bootstrap的網格系統,實作出如flickr水平瀑布流相片牆的效果,雖然可以水平式排序照片,但照片得先手動整理過,再將照片一一的塞入到指定的區塊中,才能有此效果,而最近正好有朋友問到梅干,像這效果是怎麼做的,因此梅干就研究了一下,水平式的瀑布流的寫法,再整合lightbox燈箱效果。

  而梅干也將這二個特效整合完畢,因此各位無需再作調整,只需將程式碼,安裝到指定的區塊中後,並將要呈現的照片,依續的排列在HTML網頁中,接著程式就會自動去計算圖片大小,並進行編排,因此喜歡此效果的朋友們,也趕快來看看囉!


Step1
首先,先將lightbox燈箱效果的CSS加入到<head>…..</head>之間。

Step2
接著再把jquery、lightbox元件與程式碼,加到</body>上方。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/dist/simple-lightbox.jquery.min.js"></script>
<script>
window.onload = function() {
  create($("#zoomwall"));
  function create(blocks){
    resize(blocks.children().children());
  }
  function resize(blocks){
    var row = [];
    var top = -1;
    for (var c = 0; c < blocks.length; c++) {
      var block = blocks[c];
      if (block) {
        if (top == -1) {
          top = block.offsetTop;
        } else if (block.offsetTop != top) {
          resizeRow(row, calcRowWidth(row));
          row = [];
          top = block.offsetTop;
        }
        row.push(block);
      }
    }
    resizeRow(row, calcRowWidth(row));
  }
  function resizeRow(row, width){
    if (row && row.length > 1) {
      for (var i in row) {
        row[i].style.width = (parseInt(window.getComputedStyle(row[i]).width, 10) / width * 100) + '%';
        row[i].style.height = 'auto';
      }
    }
  }
  function calcRowWidth(row){
    var width = 0;
    for (var i in row) {
      width += parseInt(window.getComputedStyle(row[i]).width, 10);
    }
    return width;
  }
};
$(function(){
  var gallery = $('.gallery a').simpleLightbox({navText:    ['&lsaquo;','&rsaquo;']});
});
</script>

Step4
這時無論是直式還是橫式的照片,js會自動計算照片的寬高後,再作調整並排序在畫面中。
梅問題-[jQuery]水平瀑布流相片牆+lightbox燈箱效果
Step5
當點照片縮圖後,就會有燈箱的效果,來呈現大圖。
梅問題-[jQuery]水平瀑布流相片牆+lightbox燈箱效果
#範例預覽

See the Pen
PhotoWall相片牆
by minwt (@minwt)
on CodePen.