前端技術網頁設計 Gallery images javascripts jQuery lightbox

Image Wall with jQuery 美麗又有設計感的照片牆套件

by Fu - 上午10:21

Image Wall with jQuery 照片牆套件

Image Wall with jQuery 這是一個利用 jQuery 框架建立優美有有設計感的照片牆，在頁面中分散一些尺寸大小不一的圖片縮圖，當使用者在典籍其中的一張圖片時將會產生一條帶狀的幻燈片，在這一個帶狀的幻燈片中可以增加一些文字說明，當使用這再次點擊圖片時帶狀幻燈片即會關閉，隨後再以 Lightbox 效果打開原始圖片。

使用方法：
第一步載入 Image Wall with jQuery 的 CSS 和 JavaScript 檔案


<link rel="stylesheet" type="text/css" href="css/style.css" />

<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- 載入 masonry 瀑布流套件 -->

<script type="text/javascript" src="js/jquery.masonry.min.js"></script>

<!-- 載入 jQuery 動畫套件 -->

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

第二步使用 HTML 畫出圖片列表


<div class="content">

 <div class="iw_wrapper">

  <ul class="iw_thumbs" id="iw_thumbs">

            <li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb2"/><div><h2>Silence</h2><p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p></div></li>

            <li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/><div><h2>Abstraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb8"/><div><h2>Happiness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/9.jpg" data-img="images/full/9.jpg" alt="Thumb9"/><div><h2>Greatness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/10.jpg" data-img="images/full/10.jpg" alt="Thumb10"/><div><h2>Abstraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/><div><h2>Beauty</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb8"/><div><h2>Happiness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/12.jpg" data-img="images/full/12.jpg" alt="Thumb12"/><div><h2>Greatness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb4"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb5"/><div><h2>Growth</h2><p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p></div></li>

            <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/><div><h2>Beauty</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/10.jpg" data-img="images/full/10.jpg" alt="Thumb10"/><div><h2>Abstraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/11.jpg" data-img="images/full/11.jpg" alt="Thumb11"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/13.jpg" data-img="images/full/13.jpg" alt="Thumb13"/><div><h2>Happiness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/14.jpg" data-img="images/full/14.jpg" alt="Thumb14"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb2"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/11.jpg" data-img="images/full/11.jpg" alt="Thumb11"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/12.jpg" data-img="images/full/12.jpg" alt="Thumb12"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/13.jpg" data-img="images/full/13.jpg" alt="Thumb13"/><div><h2>Happiness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/14.jpg" data-img="images/full/14.jpg" alt="Thumb14"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb2"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb3"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb4"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/12.jpg" data-img="images/full/12.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb2"/><div><h2>Silence</h2><p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p></div></li>

            <li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/><div><h2>Abstraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb4"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb5"/><div><h2>Growth</h2><p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p></div></li>

            <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/><div><h2>Beauty</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb8"/><div><h2>Happiness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/9.jpg" data-img="images/full/9.jpg" alt="Thumb9"/><div><h2>Greatness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/10.jpg" data-img="images/full/10.jpg" alt="Thumb10"/><div><h2>Abstraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/11.jpg" data-img="images/full/11.jpg" alt="Thumb11"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb12"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/13.jpg" data-img="images/full/13.jpg" alt="Thumb13"/><div><h2>Happiness</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/14.jpg" data-img="images/full/14.jpg" alt="Thumb14"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/><div><h2>Virtue</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb2"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

            <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb3"/><div><h2>Attraction</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li>

  </ul>

 </div>

 <div id="iw_ribbon" class="iw_ribbon">

  <span class="iw_close"></span>

  <span class="iw_zoom">Click thumb to zoom</span>

 </div>

</div>

第三步使用 JavaScript 讓元素開始作用


$(window).load(function(){

  var $iw_thumbs= $('#iw_thumbs'),

 $iw_ribbon= $('#iw_ribbon'),

 $iw_ribbon_close = $iw_ribbon.children('span.iw_close'),

 $iw_ribbon_zoom  = $iw_ribbon.children('span.iw_zoom');

  

 ImageWall = (function() {

  var w_dim,

 current = -1,

 isRibbonShown = false,

 isFullMode= false,

 ribbonAnim= {speed : 500, easing : 'easeOutExpo'},

 imgAnim = {speed : 400, easing : 'jswing'},

 init = function() {

   $iw_thumbs.imagesLoaded(function(){

     $iw_thumbs.masonry({

    isAnimated : true

     });

   });

   getWindowsDim();

   initEventsHandler();

 },

 getWindowsDim = function() {

   w_dim = {

  width : $(window).width(),

  height : $(window).height()

   };

 },

 initEventsHandler = function() {

   $iw_thumbs.delegate('li', 'click', function() {

   if($iw_ribbon.is(':animated')) return false;

   var $el = $(this);

   if($el.data('ribbon')) {

  showFullImage($el);

   } else if(!isRibbonShown) {

  isRibbonShown = true;

  $el.data('ribbon',true);

  current = $el.index();

  showRibbon($el);

   }

 });

 $iw_ribbon_close.bind('click', closeRibbon);

 $(window).bind('resize', function() {

 getWindowsDim();

 if($iw_ribbon.is(':animated')) return false;

   closeRibbon();

 }).bind('scroll', function() {

 if($iw_ribbon.is(':animated')) return false;

   closeRibbon();

 }); 

 },

 showRibbon= function($el) {

   var $img = $el.children('img'),

   $descrp = $img.next();

  $iw_thumbs.children('li').not($el).animate({opacity : 0.2}, imgAnim.speed);

  $img.css('z-index', 100)

.data('originalHeight',$img.height())

.stop()

.animate({

 height   : '100px'

}, imgAnim.speed, imgAnim.easing);

  

  // the ribbon will animate from the left or right

  // depending on the position of the image

  var ribbonCssParam   = {

 top : $el.offset().top - $(window).scrollTop() - 6 + 'px'

},

descriptionCssParam,

dir;

  

  if( $el.offset().left < (w_dim.width / 2) ) {

dir = 'left';

ribbonCssParam.left  = 0;

ribbonCssParam.right  = 'auto';

  }

  else {

dir = 'right';

ribbonCssParam.right  = 0;

ribbonCssParam.left  = 'auto';

  }

  

  $iw_ribbon.css(ribbonCssParam)

            .show()

   .stop()

   .animate({width : '100%'}, ribbonAnim.speed, ribbonAnim.easing, function() {

switch(dir) {

 case 'left' :

  descriptionCssParam  = {

'left' : $img.outerWidth(true) + 'px',

'text-align'  : 'left'

  };

  break;

 case 'right' : 

  descriptionCssParam  = {

'left' : '-200px',

'text-align'  : 'right'

  };

  break;

};

$descrp.css(descriptionCssParam).fadeIn();

// show close button and zoom

$iw_ribbon_close.show();

$iw_ribbon_zoom.show();

   });

  

 },

 // close the ribbon

 // when in full mode slides in the middle of the page

 // when not slides left

 closeRibbon= function() {

  isRibbonShown  = false

  

  $iw_ribbon_close.hide();

  $iw_ribbon_zoom.hide();

  

  if(!isFullMode) {

  

// current wall image

var $el    = $iw_thumbs.children('li').eq(current);



resetWall($el);



// slide out ribbon

$iw_ribbon.stop()

    .animate({width : '0%'}, ribbonAnim.speed, ribbonAnim.easing);

  

  }

  else {

$iw_ribbon.stop().animate({

 opacity  : 0.8,

 height   : '0px',

 marginTop : w_dim.height/2 + 'px' // half of window height

}, ribbonAnim.speed, function() {

 $iw_ribbon.css({

  'width'  : '0%',

  'height' : '126px',

  'margin-top': '0px'

 }).children('img').remove();

});



isFullMode = false;

  }

 },

 resetWall= function($el) {

  var $img  = $el.children('img'),

$descrp  = $img.next();



  $el.data('ribbon',false);

  

  // reset the image z-index and height

  $img.css('z-index',1).stop().animate({

height   : $img.data('originalHeight')

  }, imgAnim.speed,imgAnim.easing);

  

  // fadeOut the description

  $descrp.fadeOut();



  // fadeIn all the other images

  $iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed);  

 },

 showFullImage  = function($el) {

  isFullMode = true;

  

  $iw_ribbon_close.hide();

  

  var $img = $el.children('img'),

large = $img.data('img'),

  

// add a loading image on top of the image

$loading = $('<span class="iw_loading"></span>');

  

  $el.append($loading);

  

  // preload large image

  $('<img/>').load(function() {

var $largeImage = $(this);



$loading.remove();



$iw_ribbon_zoom.hide();



resizeImage($largeImage);



// reset the current image in the wall

resetWall($el);



// animate ribbon in and out

$iw_ribbon.stop().animate({

 opacity  : 1,

 height   : '0px',

 marginTop : '63px' // half of ribbons height

}, ribbonAnim.speed, function() {

 // add the large image to the DOM

 $iw_ribbon.prepend($largeImage);

 

 $iw_ribbon_close.show();

 

 $iw_ribbon.animate({

  height   : '100%',

  marginTop : '0px',

  top: '0px'

 }, ribbonAnim.speed);

});

  }).attr('src',large);



 },

 resizeImage= function($image) {

  var widthMargin  = 100,

heightMargin  = 100,

  

windowH       = w_dim.height - heightMargin,

windowW       = w_dim.width - widthMargin,

theImage      = new Image();



  theImage.src      = $image.attr("src");

  

  var imgwidth      = theImage.width,

imgheight     = theImage.height;



  if((imgwidth > windowW) || (imgheight > windowH)) {

if(imgwidth > imgheight) {

 var newwidth  = windowW,

  ratio   = imgwidth / windowW,

  newheight  = imgheight / ratio;

  

 theImage.height = newheight;

 theImage.width = newwidth;

 

 if(newheight > windowH) {

  var newnewheight  = windowH,

newratio   = newheight/windowH,

newnewwidth  = newwidth/newratio;

 

  theImage.width   = newnewwidth;

  theImage.height  = newnewheight;

 }

}

else {

 var newheight  = windowH,

  ratio   = imgheight / windowH,

  newwidth  = imgwidth / ratio;

 

 theImage.height = newheight;

 theImage.width = newwidth;

 

 if(newwidth > windowW) {

  var newnewwidth  = windowW,

      newratio   = newwidth/windowW,

newnewheight  = newheight/newratio;



  theImage.height  = newnewheight;

  theImage.width  = newnewwidth;

 }

}

  }



  $image.css({

'width': theImage.width + 'px',

'height'  : theImage.height + 'px',

'margin-left' : -theImage.width / 2 + 'px',

'margin-top' : -theImage.height / 2 + 'px'

  }); 

 };

 

return {init : init}; 

  })();

 

 ImageWall.init();

});

作者網站：http://tympanus.net/codrops/
檔案大小：855 KB (包含範例)
檔案下載：http://tympanus.net/Tutorials/ImageWall/ImageWall.zip
備份下載：下載

Tags : 前端技術, 網頁設計, Gallery, images, javascripts, jQuery, lightbox

A-Fu Design

Image Wall with jQuery 美麗又有設計感的照片牆套件

0 意見

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

A-Fu Design

Image Wall with jQuery 美麗又有設計感的照片牆套件

You May Also Like

0 意見

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive