Javascript, 網頁設計

Blueimp Gallery 與iPhone內建相簿極為相似jQuery相本套件

梅干2018/08/07
梅問題-Blueimp Gallery 與iPhone內建相簿極為相似相本套件
  使用iPhone的朋友,應該對於內建的相簿不感陌生,除了方便瀏覽照片外,再來就是可快速的切換,甚至還可以點一下將資訊隱藏,並左右滾動相片,當再點一下後,就會再顯示出相片資訊,而這看似簡單平凡的操控,其實一點都不簡單。
  最近正好有朋友,與梅干提到有沒有像iPhone的相簿的套件,本來梅干想說自行來刻刻看,但光想到那些事件,再加上RWD後,立即讓梅干打消念頭,於是找了好久,終於找到「Blueimp Gallery 」的套件,不但功能極為相似,甚至還相當的強大,同時再經由梅干加工後,現在與iPhone的相簿極為相似,有需要的朋友,現在也一塊來看看囉!
Blueimp Gallery
套件名稱:Blueimp Gallery
套件下載:http://blueimp.github.io/Gallery/

Step1
首先,先將Blueimp Gallery的CSS引用到網頁中。
 rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/css/blueimp-gallery.css">
 rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/css/blueimp-gallery-indicator.min.css">

Step2
接著再載入javascript。

Step4
當把CSS與JS都載入後,接下來就是有關HTML架構,而圖片需包在links的DIV中。

 id="links" class="links">

   href="https://farm1.static.flickr.com/938/42813532974_9e7c491f8f_b.jpg" title="Puffin" data-gallery="">
     src="https://farm1.static.flickr.com/938/42813532974_9e7c491f8f_s.jpg">
  
  .........

Step5
當都完成後,就可以正常運作了,但內建的Blueimp Gallery點了縮圖後,下方的縮圖會變成一小顆一小顆的圓,不要說不好點,就連預覽都有些吃力。
梅問題-Blueimp Gallery 與iPhone內建相簿極為相似相本套件
Step6
接著將梅干調整好的CSS加入。
.blueimp-gallery > .indicator > li {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 6px 3px 0 3px;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  border: 1px solid transparent;
  background: #ccc;
  background: rgba(255, 255, 255, 0.25) center no-repeat;
  border-radius: 2px;
  box-shadow: 0 0 2px #000;
  opacity: 0.5;
  cursor: pointer;
}
.blueimp-gallery>.indicator{
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

Step7
這樣下方的縮圖就會變成方形啦!
梅問題-Blueimp Gallery 與iPhone內建相簿極為相似相本套件
Step8
雖然滾動上方的圖片,下方的縮圖也會跟著切換,但超出時卻不會自動換頁,這時再加入下方的JS碼後,當超出範圍時,就會自動換頁啦!
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = { index: link, event: event },
links = this.getElementsByTagName('a');
// blueimp.Gallery(links, options);
var gallery = blueimp.Gallery(
links,
{
index: link, event: event,
onopen: function () {
// Callback function executed when the Gallery is initialized.
},
onopened: function () {
// Callback function executed when the Gallery has been initialized
// and the initialization transition has been completed.
},
onslide: function (index, slide) {
//console.log("onslide:"+index);
// Callback function executed on slide change.
var get_index = index+1;
var get_w = $('.indicator').width();
var get_item_num = Math.floor(get_w/52)-1;
 var page_index =  Math.floor(get_index/get_item_num);
console.log("onslideend:"+get_index+"/"+get_w+"num:"+get_item_num+"page:"+page_index);
$('.indicator').scrollLeft(page_index*get_w);
},
onslideend: function (index, slide) {
var get_index = index+1;
var get_w = $('.indicator').width();
var get_item_num = Math.floor(get_w/52);
var page_index =  Math.floor(get_index/get_item_num);
console.log("onslideend:"+get_index+"/"+get_w+"num:"+get_item_num+"page:"+page_index);
$('.indicator').scrollLeft(page_index*get_w);
// Callback function executed after the slide change transition.
},
onslidecomplete: function (index, slide) {
// Callback function executed on slide content load.
},
onclose: function () {
// Callback function executed when the Gallery is about to be closed.
},
onclosed: function () {
// Callback function executed when the Gallery has been closed
// and the closing transition has been completed.
}
}
);
};

Step7
加入後,當滾動上方的圖片時,超出顯示範圍時,就會自動滾動換頁啦!
梅問題-Blueimp Gallery 與iPhone內建相簿極為相似相本套件
#範例預覽