mb.gallery.2.0


Description: ボタンのクリックでLightbox風にギャラリーごとポップアップさせるプラグインです。ポップアップ以外にスライドダウン形式も用意。呼び出されるギャラリーの中にサムネイルも用意されています。IE6ではレイアウトが崩れます。
Sample: demo
Tutorial: mb.gallery A super clean photo gallery!
License: -

Note

$(function(){

    //these are the default settings for the component
    // you can redefine this defaults or change each parameter on the component call
    $.fn.mbGallery.defaults={
      containment:"body",
      cssURL:"css/",
      skin:"white",
      overlayBackground:"#333",
      exifData:false, //todo

      galleryTitle:"My Gallery",
      imageSelector: ".imgFull",
      thumbnailSelector: ".imgThumb",
      titleSelector: ".imgTitle",
      descSelector: ".imgDesc",

      minWidth: 300,
      minHeight: 200,
      maxWidth: 0,
      maxHeight: 0,
      fullScreen:true,
      addRaster:false,
      overlayOpacity:.5,
      startFrom: 0,//"random"
      fadeTime: 500,
      slideTimer: 6000,
      autoSlide: true,

      onOpen:function(){},
      onBeforeClose:function(){},
      onClose:function(){},
      onChangePhoto:function(){}
    };
  });

    //this is a direct call on document load
    $('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});

    // this is a call attached to an event
    $('#galleryOpener')
    .bind("click", function(){
    $('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
    });

jQueryとプラグインを読み込んで上記設定を行います。

Related snippet :

  • Description: ややニッチな用途です。iPadや、iPhoneのようなタッチデバイス向けのLightbox系プラグイン。縦でも横でも画像幅を自動で最適化してくれます ...
  • Description: 全画面をスライドショー化出来るプラグイン。IE6、7は対応していませんが、とってもクールですねー。使ってみたい。FlickrAPIにも対応しており、 ...
  • Description: 画面全体を使った3Dギャラリーです。IE6では表示されませんでしたが、7では動作してくれました。画像はドラッグで移動可能です。インパクト有りますね・ ...
  • Description: 横幅全体を使ったダイナミックなイメージギャラリーです。IE6以外はかなり素敵な表現が出来そう。アニメーションしながらズームし、そのままスライドショー ...
  • Description: シンプルなLightbox系プラグインです。汎用的なデザインで使いやすく、カスタマイズもしやすそうです。 Sample: demo ...
  • Description: サムネイルを含めることが出来るクロスブラウザ対応のLightbox系プラグインです。多機能で画像やFlashだけでなく、YoutubeやVimeoな ...
  • Description: 全画面をギャラリーとして使うプラグイン。左サムネイルで大きな画像を切り替えます。マウスの動きに合わせてサイドスライド、全画面に画像を表示します。その ...