[jQuery] - 練習-Photos Gallery View

project
jQuery

Demo

jQuery 練習-Photos Gallery View- Demo

1. Introduction 介紹

這是顯示照片集的網頁，滑鼠移動到圖片上覆蓋會有標題與文字敘述搭配背景覆蓋，上方的 navbar item 點擊則可針對圖片顯示做篩選。

引入 lightbox，點擊圖片會彈出視窗，且會顯示照片總數與目前張數。

這邊使用的 lightbox by Lokesh Dhakar：Lightbox

2. 功能

一般的網頁架構，有 navbar、標題區塊、主要區塊是圖片顯示。
主要功能

  • 判斷 class 名稱，篩選後顯示圖片
  • 滑鼠mouseenter、mouseleave搭配文字背景覆蓋的效果
  • 引入 lightbox

navbar 的 item 用來篩選照片，每一張照片的 class 要先設定好名稱，再用 jQuery 來判斷 class 名稱來顯示。

點擊 navbar item 中的 a 連結後，直接取用 navbar item 名稱來篩選每一張圖片的 class 名稱，這邊用了toLowerCase()把文字轉為小寫、replace把空格轉為-。點擊All Projects會把所有 hidden class 的 li 全部 fadeIn 顯示、並把 hidden class 移除。

如果點擊的是其他的項目則會把全部 li 的陣列用 each 來判斷是不是符合點擊項目的名稱後再去操作hide與fadeIn

程式碼擷取一個 li 範例，li class 可以輸入單個或多個名稱，點擊後篩選就依照是否有該 class 來執行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<header>
  <div class="container">
    <h1 class="logo">P GALLERY</h1>
    <!-- Navbar Item -->
    <nav>
      <ul>
        <li><a href="#">All Projects</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">CMS</a></li>
      </ul>
    </nav>
  </div>
</header>

<!-- 主要照片區塊 -->
<!-- 舉一個li說明 -->
<section>
  <div class="container">
    <h1 id="heading">All Projects</h1>
    <ul id="gallery">
      <li class="design">
        <a href="./img/web1.jpg" data-lightbox="Projects" data-title="Project 1" data-desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum modi harum.">
        <img src="./img/web1.jpg" />
        </a>
      </li>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$("nav a").on("click", function() {
  // current class assignment
  $("nav li.current").removeClass("current");
  $(this).parent().addClass("current");

  // Set Heading text
  $("h1#heading").text($(this).text());

  // Get & Filter link text
  var category = $(this).text().toLowerCase().replace(" ", "-");

  // Remove hidden class if 'all-projects' is selected
  if (category == "all-projects") {
    $("ul#gallery li:hidden").fadeIn("slow").removeClass("hidden");
  } else {
    $("ul#gallery li").each(function() {
      if (!$(this).hasClass(category)) {
        $(this).hide().addClass("hidden");
      } else {
        $(this).fadeIn("slow").removeClass("hidden");
      }
    });
  }
  // Stop link behaviour
  return false;
});

另外則是滑鼠移動到圖片上Mouseenter會有標題與文字搭配背景的覆蓋效果，移開mouseleave則恢復圖片顯示。
觸發 Mouseenter 事件後，取用自訂屬性的 data-title、data-desc，之後 append 一個 overlay 的區塊在觸發的 li 之後，再將取得自訂屬性的標題與描述內容加進去，再執行 fadeIn 效果。

Mouseleave 則是會先用stop()停止在執行的效果後再去fadeOut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Mouseenter overlay
$("ul#gallery li").on("mouseenter", function() {
  // Get data attritube values
  var title = $(this).children().data("title");
  var desc = $(this).children().data("desc");

  // Validation
  if (desc == null) {
    desc = "Click To Enlarge ";
  }
  if (title == null) {
    title = "";
  }

  // Create overlay div
  $(this).append('<div class="overlay"></div>');
  // Get the overlay div
  var overlay = $(this).children(".overlay");

  // Add html to overaly;
  overlay.html("<h3>" + title + "</h3><p>" + desc + "</p>");

  // Fade in overlay
  overlay.fadeIn(800);
});

// Mouseleave overlay
$("ul#gallery li").on("mouseleave", function() {
  // Get the overlay div
  var overlay = $(this).children(".overlay");

  // Fade out overlay & Remove overlay
  overlay.stop().fadeOut(500, function() {
    $(this).remove();
  });
});

引入lightbox，這個範例是直接用引入script跟css檔案，並按照提供的方式來設定即可。
在a連結的屬性中加上data-lightbox、data-title、data-desc等等。