「SpaceGallery」プラグインを使った画像ギャラリーの作り方

「SpaceGallery」は画像を奥から前にスライドして切り替えることができるプラグインです。

ギャラリーの設置と設定についてはこちらをご覧ください。

javascript

スクリプトを正常に動作させるために画像ギャラリーを含むhtmlファイルに以下のように記述します。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>

初期化用スクリプトは外部jsファイルに記述します。

$('document).ready(function(){
    $('#myGallery').spacegallery({loadingClass: 'loading'});
    $('#myGallery img').show();
});

3行目のスクリプトは「myGallery」というidのついた<div>を初期化しています。
すべての画像はcssで非表示にされているので、「SpaceGallery」を読み込んだ後で.show()メソッドを使って表示させています。

$('#myGallery img').show();

html

以下にhtmlの記述例を示します。

&lt;div id=&quot;myGallery&quot; class=&quot;spacegallery&quot;&gt;
    &lt;img src=&quot;images/slide6.png&quot; alt=&quot;&quot; /&gt;
    &lt;img src=&quot;images/slide5.png&quot; alt=&quot;&quot; /&gt;	
    &lt;img src=&quot;images/slide4.png&quot; alt=&quot;&quot; /&gt;
    &lt;img src=&quot;images/slide3.png&quot; alt=&quot;&quot; /&gt;
    &lt;img src=&quot;images/slide2.png&quot; alt=&quot;&quot; /&gt;
    &lt;img src=&quot;images/slide1.png&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;

idに「myGallery」、classに「spacegallery」を設定した<div>の中にすべての画像を配置します。

css

cssファイルには以下のようなスタイルが記述されています。

.spacegallery {
    position:relative;
    overflow:hidden;
}
.spacegallery img {
    position:absolute;
    left: 50%;
    display:none;
}
.spacegallery a {
    position:absolute;
    z-index:10;
    display:block;
    top:0;
    left:0;
    width:650px;
    height:100%;
    background:url(images/blank.gif);
}
#myGallery {
    width:650px;
    height:415px;
    position:absolute;
    top:48px;
    left:185px;
}
a.loading {
    background:url(images/ajax_small.gif) no-repeat center;
}

Comments are closed.