WEB-PARK.ORG

次は縦移動！スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介

Javascript

2010.05.11

前回作成したjquery.easySlideGallery.jsはスライドでしたが今度は縦にスライドする画像ギャラリープラグインを作成しました。

サンプル

前回と同じサンプル内容を掲載しました。

導入方法

ほとんど前回と同じです。id名とpagenation名を変更しています。

Javascript

まずはjqueryを読み込ませその次にイージースライドギャラリーのプラグインを読み込ませます。
他のプラグインと衝突させないためjQuery.noConflict();を指定してますので引数に($)が必要です。

view sourceprint?
1.<script type="text/javascript" src="js/lib/jquery.js"></script>
2.<script type="text/javascript" src="js/lib/jquery.easyScrollGallery.js"></script>
3.<script type="text/javascript">
4.jQuery(function($){
5.    $("#gallery").easyScrollGallery();
6.});
7.</script>

HTML

view sourceprint?
01.<div id="gallery">
02.    <ul id="scrollImg">
03.        <li><a href="#"><img src="../img/001.jpg" /></a></li>
04.        <li><a href="#"><img src="../img/002.jpg" /></a></li>
05.        <li><a href="#"><img src="../img/003.jpg" /></a></li>
06.        <li><a href="#"><img src="../img/004.jpg" /></a></li>
07.    </ul>
08.    <div class="pagenation">
09.        <p class="up">up</p>
10.        <p class="down">down</p>
11.    </div>
12.</div>

CSS

CSSは下記ソースが必須になります。

view sourceprint?
01.#scrollGallery {
02.    position: relative;
03.    margin: 0 auto;
04.    width: 967px;
05.    height: 544px;
06.    background: url(../img/bg.jpg) no-repeat;
07.}
08. 
09.#scrollImg {
10.    position: relative;
11.    margin: 0 auto;
12.    width: 100%;
13.    height: 100%;
14.}
15. 
16.#scrollImg li {
17.    position: absolute;
18.    width: 300px;
19.    height: 250px;
20.}
21. 
22.#scrollImg li.a {
23.    width: 400px;
24.    height: 300px;
25.}
26. 
27.#scrollImg li a {
28.    position: absolute;
29.}
30. 
31..pagenation {
32.    position: absolute;
33.    width: 967px;
34.    height: 544px;
35.    top: 0;
36.    left: 483px;
37.    z-index: 100;
38.}
39. 
40..pagenation p {
41.    padding: .5em;
42.    background: #ccc;
43.}
44. 
45..up {
46.    position: absolute;
47.    top: 0;
48.    cursor: pointer;
49.}
50. 
51..down {
52.    position: absolute;
53.    bottom: 0;
54.    cursor: pointer;
55.}

ダウンロード

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. 次は縦移動！スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介
オススメ本（既読）
読んでみたい本（未読）

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT PLEASE!!

トラックバック

「次は縦移動！スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/easyscrollgallery100510.html/trackback
about me