jQueryを使って画像スクロール、クリック後画像の切り替えをする

jQueryを使って画像スクロール、クリック後画像の切り替えをする

以前紹介した画像をスクロールさせる jquery.scrollable.jsのjquery.scrollable.jsとJavaScriptを使って画像の切り替え&LightBox使用で使ったスクリプトを使って、並んでる画像はスクロール、それをクリックしたら画像を切り替える画像ギャラリーを作ってみました。

demo page

…ここからが続き

使い方や解説

JSダウンロード

「jquery.scrollable.js」「jquery.mousewheel.js」をダウンロード。
詳しくは画像をスクロールさせる jquery.scrollable.jsをご覧下さい。

headタグ内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script src="js/jquery.scrollable.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/photo.js"></script>
<script>
	$(function() {
		$("#scrollable").scrollable({horizontal:true});
	});
</script>

画像やコンテンツサイズを変更する場合に書き換える箇所

メインとなる画像要素の部分
#imgMain	{
	width: 600px;
	background: #F4F4F4;
	padding: 10px;
	margin: 0 auto;
	border: 3px solid #D1D1D1;
	margin-bottom: 30px;
}
#imgMain img	{ border: 1px solid #D1D1D1; }
スクロール部分全体
#scrollable {
	width: 835px;
	background: #EFEFEF;
	border:1px solid #DDD;
	padding:10px 8px;
	height: 120px;
	margin: 0 auto 30px;
}
スクロール表示エリア
div.items {
	width: 788px;
	height: 120px;
	float:left;
	_margin-top: -12px;
}

/* 画像エリア */
div.items a {
	display:block;
	float:left;
	margin-right:8px;
	width: 150px;
	height: 120px;
}

div.items img	{ border: 1px solid #D1D1D1; }
サイドのボタン。一番上のアイコンみたないの
/* ボタンエリア */
a.prev, a.next {
	display:block;
	width: 30px;
	height: 30px;
	float: left;
	margin: 45px 0 0 0;
	_margin-top: 40px;
	cursor:pointer;
}
a.prev	{
	margin-right: 8px;
}

a.prev, a.next {
	background: url(../images/left.png) no-repeat 0 0;
	width: 18px;
	height: 18px;
}
a.next {
	background-image:url(../images/right.png);		
}
a.prev:hover {
	background-position:0 -18px;		
}
a.next:hover {
	background-position:0 -18px;		
}


/* .navi */
div.navi {
	position:relative;
	top: -490px;
	left: 460px;
	margin-left:-50px;
	width:50px;
	height:0;
}

div.navi span {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url(../images/dots.png) 0 0 no-repeat;     
	cursor: pointer;
	_font-size:7px;
}

div.navi span:hover {
	background-position:0 -8px;      
}

div.navi span.active {
	background-position:0 -16px;     
}

div.navi:after	{ 
	height:0;	
	visibility: hidden;	
	content: ".";	
	display: block;	
	clear: both;
}

この用になっているので、画像サイズを変えた場合は上記CSSの箇所の「width」「margin」「position」の調整を行って下さい。

※サイズ変更して使う場合はある程度知識がないと難しいかもしれないです><
まー根気よく数字を調整してくれれば大丈夫なはずですけどね...

Comments

MIYA

MIYA

ひかりさん

はじめまして^^画像の表示数を変更するからと言ってこれといってjsをファイルをいじる必要はないはずなんですね…

途中までスクロールするって事は表示上は問題ないですよね?
ちなみにどのブラウザでも同じ現象になりますか?

2009年07月14日 23:39

ひかり

ひかり

はじめまして。
まだまだ初心者ですが、参考にさせていだたいております。
ありがとうございます。

12個の画像をスライドさせたいのですが、
最初の一つしかスライドしません。

最初は3つ表示させており、4つ目まで進む・戻るボタンが利きますが、5つ目はスライドできません。

jsファイルでどこか変更する箇所があるのでしょうか。

教えていただけますと大変助かります。
どうぞよろしくお願いたします。

2009年07月14日 22:06

MIYA

MIYA

se3pさんはじめまして!

ありがとうございます!今後とも参考になれるような記事を書けるように頑張りたいと思います。

2009年04月17日 03:13

se3p

se3p

MIYAさんはじめまして!

いつもお手本にさせてもらってます!

このQueryはおおっ!!って思ったんで

参考にさせて頂きました!

これからもがんばってください!

2009年04月16日 15:26

MIYA

MIYA

了解致しました!

頑張ってくださいね^^

2009年04月09日 02:10

ゆう

ゆう

お返事ありがとうございます^^js側の設定は行っており<a href="1.jpg">画像</a>のようにリンク先に静的な画像を指定すると問題なく大きい画像が表示されるのでjs側の問題?と思っていたのですが逆のようでしたね^^;もう一度見直ししてみたいと思います!

2009年04月07日 03:21

MIYA

MIYA

ゆうさん。

現状聞いている限りですと画像のリサイズは関係ないと思われます。
画像クリック後にid=targetに表示するように指定してあるんですがそこはどうでしょうか?
jsの部分はこちらです。
.click( function() {
var changeSrc = this.src;
$("#target").fadeOut(
"slow",
function() {
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
return false;
});
もしかしたらphpでの他の要素が競合している可能性も考えられます。

2009年04月07日 01:11

ゆう

ゆう

こんにちは。
画像をphpで表示させており具体的には以下のソースで試したのですがなぜか常に小さいサイズの画像が#imgMainに表示されてしまいます。
パラメータはx=width,y=heightです。この数値に基づきphpでリサイズし表示させてます。

<a href="view.php?id=1&x=400&y=300">
<img src="view.php?id=1&x=133&y=100">
</a>

デモのソースを見ても同じ画像を単純にwidth,heightで縮小させているようでしたのでこれでいける?と思ったのですが大きいサイズの画像が表示されずうまくいきません。

jsならではのなにかなどあるのでしょうか?

2009年04月05日 15:36

MIYA

MIYA

「jquery」「mootools」「Prototype」は一緒に使とすれば競合し合います。
下記ソースを書き加えるとjqueryとmootoolsを一緒に使う事が出来るはずですよ。

script type="text/javascript" src="jquery.js"></script
script type="text/javascript"
jQuery.noConflict();
/script
script type="text/javascript" src="mootools.js"></script

※タグにしたら表示されないので、消えている部分の<>は自分で書きくわえて下さいね!

2008年11月22日 13:11

レグス

レグス

初めましてです。
こちらのブログで初めて知りましたが是非取り入れたく
やってみたのですがうまくいきません。
いろいろと試した結果mootools.jsと競合している?
ようです・・・
会員制サイトでログインにsexy-lightbox-2を使用
しておりそれにmootools.jsを使用しています。
http://www.coders.me/ejemplos/sexy-lightbox-2/

使用している理由は単純でクールだから・・・に
つきるのですがjqueryでも同様のものがあれば
切り替えて是非このスクロールを取り入れたいです!

jsは全く知識がないものでわからないのですが競合を
さけうまく動作させることなどは可能なものでしょうか?

2008年11月21日 23:55

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article