エフェクトが選べる画像スライドAD Gallery

画像が切り替わる際のエフェクト（効果）が選べるスライドのスクリプトです。
使用するAjaxライブラリはjQuery。

カスタマイズする場合、実装にはちょっと手こずるかも知れません。

ダウンロードと修正

AD Gallery – Coffeescripter.com
Downloadsから「The whole kit and kaboodle」で一式ダウンロード、解凍してください。

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したjquery.ad-gallery.1.2.0フォルダに入れてください。

jquery.ad-gallery.cssに以下を追加します。
背景色（background）はお好みで指定してください。

#gallery {padding: 30px; background: #e1eef5;}

画像の表示サイズ変更はjquery.ad-gallery.cssの以下の赤字部分を修正。

.ad-gallery {
 width: 600px; /* 横幅 */
}
.ad-gallery, .ad-gallery * {
 margin: 0;
 padding: 0;
}
.ad-gallery .ad-image-wrapper {
 width: 100%;
 height: 400px; /* 高さ */
 margin-bottom: 10px;
 position: relative;
 overflow: hidden;
}

※サイトの基本CSSとの相性により、思い通りの表示にするためにjquery.ad-gallery.cssの修正が必要です。場合によってはIE用のCSSハックも必要になります。

エフェクト変更は、jquery.ad-gallery.jsの(function($)赤字部分を修正します。
デフォルトは横スクロール（slide-hori）なので、他のエフェクトに変更する場合は青字部分から選択して書き換えてください。

effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'

jquery.ad-gallery.jsの(function($)で画像読み込み時の画像URLをフルパスに修正。

loader_image: 'http://サイトURL/loader.gif'

実装手順

jquery.ad-gallery.1.2.0フォルダを丸ごとアップロード＋表示させる画像をアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<link rel"stylesheet" href"http://サイトURL/jquery.ad-gallery.1.2.0/jquery.ad-gallery.css" type"text/css" />
<script type="text/javascript" src="http://サイトURL/jquery.ad-gallery.1.2.0/jquery.ad-gallery.js"></script>
<script type="text/javascript" src="http://サイトURL/jquery.ad-gallery.1.2.0/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>

AD Galleryを表示させる場所に以下を記入。

<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
 <li><a href="http://画像01URL"><img src="画像01サムネイルURL" title="画像01タイトル" longdesc="画像01説明文" class="image0（画像番号）"></a></li>
 <li><a href="http://画像02URL"><img src="画像02サムネイルURL" title="画像02タイトル" longdesc="画像02説明文" class="image1（画像番号）"></a></li>
　・
（以下同様に）
　・
　・
</ul>
</div>
</div>
</div>

サイズ変更をする際などはCSSの修正に苦労を強いられることになると思います。
カスタマイズは根気強くがんばってください。

«
»

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment