アニメーションがかっこいいjQueryフォトギャラリー「flipGallery」

「flipGallery」はアニメーションがかっこいい、オシャレなフォトギャラリーを実装できるjQueryプラグインです。

flipGallery

screenshot248

パラパラとしたアニメーションで写真が表示されます。オシャレな感じですね。写真をツリー状に構成できるのも特徴です。例えば上記画像の左下、スケッチのような画像をクリックしてみます。すると同じようなスケッチ画像が表示されました。

screenshot250

 

ツリーの最下層までたどり、画像をクリックすればフルサイズで表示されます。ページネーションも機能します。

screenshot249

 

それではツリー構成となる「flipGallery」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

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

 

HTMLはギャラリーを設置したい箇所に以下のようにマークアップします。

<div id="flipGallery"></div>

 

JavaScriptは以下のように実装します。かなり長いですが、中身は写真のパス指定とオプション設定のみです。オプションはデフォルトのままでもよいですし、英語ではありますがコメントで説明がなされているのでパラメータのいじり方はわかるかと思います。

var fg_my_content = {
  content_master: {
    gallery_master_folder: '../x-demo-images',
    main_menu_title: 'Multi Gallery Demo',
  },
  gallery_1: {
    cover_thumb: '1.gif',
    gallery_title: 'Gallery 1',
    image_1: {
      thumb: '1.gif',
      enlarged: '1.gif',
      text: ''
    },
    image_2: { thumb: '2.gif', enlarged: '2.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_3: { thumb: '3.gif', enlarged: '3.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_4: { thumb: '4.gif', enlarged: '4.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_5: { thumb: '5.gif', enlarged: '5.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_6: { thumb: '6.gif', enlarged: '6.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
  },
  gallery_2: {
    cover_thumb: '2.gif',
    main_menu_title: 'Gallery 2',
    image_1: { thumb: '1.gif', enlarged: '1.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_2: { thumb: '2.gif', enlarged: '2.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_3: { thumb: '3.gif', enlarged: '3.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_4: { thumb: '4.gif', enlarged: '4.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_5: { thumb: '5.gif', enlarged: '5.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_6: { thumb: '6.gif', enlarged: '6.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
  },
  gallery_3: {
    cover_thumb: '3.gif',
    main_menu_title: 'Gallery 3',
    image_1: { thumb: '1.gif', enlarged: '1.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_2: { thumb: '2.gif', enlarged: '2.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_3: { thumb: '3.gif', enlarged: '3.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_4: { thumb: '4.gif', enlarged: '4.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_5: { thumb: '5.gif', enlarged: '5.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
    image_6: { thumb: '6.gif', enlarged: '6.gif', text: '<b>Example Title</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem vitae lacus sollicitudin lacinia. <a href="http://flipgallery.net/" target="_blank" style="color: #000;">Example Link</a>' },
  },
};

// MODE SETTINGS
// -------------
var fg_mode_settings = {
  edit_mode: 1,
}

// VISUAL SETTINGS
// ---------------
var fg_visual_settings = {
  position_property: 'margin:auto; position:relative;',
  gallery_navigation_bar_margin_top: 10, // (pixels)
  gallery_navigation_bar_height: 30, // (pixels)
  thumbnail_columns: 3, 
  thumbnail_rows: 2, 
  thumbnail_width: 280, // (pixels)
  thumbnail_height: 230, // (pixels)
  thumbnail_space_top: 5, // (pixels)
  thumbnail_space_left: 5, // (pixels)
  thumbnail_space_right: 5, // (pixels)
  thumbnail_space_bottom: 5, // (pixels)
  lightbox_background_opacity: 0.8,
  lightbox_border_width: 10, // (pixels)
  lightbox_border_color: '#fff'
}

// SPEED SETTINGS
// --------------
var fg_speed_settings = {
  thumbnail_flip_speed: 800,
  initial_time_gap_between_thumbnails: 50,
  normal_time_gap_between_thumbnails: 50

}

// TEXT SETTINGS
// -------------
var fg_text_settings = {
  gallery_title_text_style: 'font-size: 18px; color: #000; font-weight: bold;',
  return_to_main_gallery_text: '&lsaquo;&lsaquo; Back To Main Gallery',
  return_to_main_gallery_text_style: 'font-size: 14px; color: #333; font-weight: bold; text-decoration: none;',
  next_gallery_text: 'Next &rsaquo;&rsaquo;',
  back_gallery_text: '&lsaquo;&lsaquo; Back',
  next_and_back_text_style: 'font-size: 14px; color: #333; font-weight: bold; text-decoration: none;',
  page_number_page: 'Page',
  page_number_of: 'of',
  page_number_text_style: 'font-size: 13px; color: #999;',
  lightbox_text_style: 'text-align: left; font-size: 14px; line-height: 1.4; color: #000; text-align: center;',
  lightbox_text_background_style: 'background-color: #fff; opacity:0.8;',
  next_image_text: 'Next &rsaquo;&rsaquo;',
  back_image_text: '&lsaquo;&lsaquo; Back',
  next_and_back_image_text_style: 'color: #000; font-weight: bold; color: #000;',
  image_number_page: 'Image',
  image_number_of: 'of',
  image_number_text_style: 'color: #999;',
  loading_text_color: '#333',
  loading_text_opacity: '0.3'
}

 

するとこのようにギャラリーを作ることができました。

screenshot251

 

フルサイズ画像の表示はこのような感じです。

screenshot252

 

細かなパラメータをいじりだすとなかなか大変かと思いますが、デフォルトでよいのであれば実装はとても簡単です。かつオシャレ!フォトギャラリーを検討されている方は参考にどうぞ。

 

Home > JavaScript > アニメーションがかっこいいjQueryフォトギャラリー「flipGallery」

Return to page top