JavaScript 点数制限なしで切り替え対応させるにはどうすれば良いのでしょうか?



サイトリニューアルに伴い、以下の仕様に変えたいと思っています。
このスクリプト自体他の人が作ったものなのでよく理解できていません。。

以下ページにある「前の写真へ」「次の写真へ」のボタンをクリックするとサムネイルの枠線が移動し、
且つ、メインの大きい写真が変わるスクリプトを使用しています。

http://www.all-eyefulhomenavi.com/kamimura/urawa/example/0017/index.html

【現在のJavascriptの仕様】
A-E(5つ)の画像が切り替えられる仕様

「次へ」の仕様を実現するために、現在の仕様になっているのだと思いますが、
今の仕様ですと点数をきっちりいれないとエラーになるため、修正をしたいと思っています。


【新仕様】
1.a,b,c,dなど画像に番号をつけるのではなく1,2,3,4で番号をつける。

2.画像点数は1~点数制限なしで対応した切り替え記述


1.に関しては数字を変えるだけで問題なく動作しております。
2.の点数制限なしで切り替え対応させるにはどの様な記述をすれば良いのでしょうか?
何か参考になるurlややり方を教えて頂けたら幸いです。

よろしくお願いします。

回答の条件
  • 1人50回まで
  • 登録:2008/07/25 00:18:29
  • 終了:2008/07/25 22:57:04

回答(2件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912008/07/25 00:32:34

ポイント100pt

先の質問に回答しようとしていたのですが、質問をキャンセルされたのはなぜでしょうか。

はてなに慣れていらっしゃらないためかもしれませんが、まっとうな回答の付いた質問を

終了でなくキャンセルするのは、いかがなものかと思います。


せっかく書きましたので、一応回答します。

不要な部分は省略しましたが、下記のようで一応 IEとFFで動作確認をしました。


html の js フォルダと img フォルダのパスは適宜変更してください。

img 下に 1.jpg、2.jpg、.... n.jpg

これに対応する sum_1.jpg、sum_2.jpg、.... sum_n.jpg

がある前提です。

<html>
<head>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body onLoad="MM_init();">

<img src="img/1.jpg" alt=""  width="349" height="272" id="main" /><br><br>

<a href="javascript:void(0)" onmousedown="change('next');">次の写真へ</a>
<a href="javascript:void(0)" onmousedown="change('prev');">前の写真へ</a><br><br>

<a href="javascript:void(0)" onmousedown="change('1');"><img src="img/sum_1.jpg" name="mpics" border="0" /></a> 
<a href="javascript:void(0)" onmousedown="change('2');"><img src="img/sum_2.jpg" name="mpics" border="0" /></a> 
<a href="javascript:void(0)" onmousedown="change('3');"><img src="img/sum_3.jpg" name="mpics" border="0" /></a> 
<a href="javascript:void(0)" onmousedown="change('4');"><img src="img/sum_4.jpg" name="mpics" border="0" /></a>
</body>
</html>

// JavaScript Document

//function of preloadImages
var MM_p;
var cPic;

function MM_init() {
    MM_p = document.getElementsByName("mpics");
    cPic = 0;
}

function change( obj ) {
    var pPic = cPic;
	switch( obj ) {
		case 'next' : cPic = ( cPic + 1 ) % parseInt( MM_p.length ); break;
		case 'prev' : cPic = ( cPic + MM_p.length - 1 ) % MM_p.length; break;
		default : cPic = parseInt( obj ) - 1; break;
	}

	//boder color change
	
	os = navigator.userAgent.toUpperCase();
	str = navigator.appName.toUpperCase();
	if ( os.indexOf("WIN") >= 0 && str.indexOf("EXPLORER") >= 0) {//Case of Win IE
		MM_p[pPic].style.setAttribute("border","#FFFFFF solid 1px;");
		MM_p[cPic].style.setAttribute("border","#0099FF solid 1px;");
	} else {//Case of Other UA
		MM_p[pPic].setAttribute("style","border:#FFFFFF solid 1px;");
		MM_p[cPic].setAttribute("style","border:#0099FF solid 1px;");
	}
	//main image change 
	document.images["main"].src = "img/" + String( cPic + 1 ) + ".jpg";
}

コメントは有効にしてください。

id:mune0628

>Mook様

はてなの利用が初めてだったもので、不敏な思いをさせてしまい申し訳ありません。

質問の意図が伝わりづらいと思い再投稿させて頂きました。

ご回答ありがとうございます。

こちらのコードを今夜試してみます。

結果はまたご連絡します。

取り急ぎよろしくお願い致します。

2008/07/25 10:33:03
id:backupper No.2

backupper回答回数95ベストアンサー獲得回数102008/07/25 04:08:49

ポイント30pt

以下でどうでしょう?

<html>
<head><title>画像の切り替え</title></head>
<script type="text/javascript">
function Slide(viewer) {
  this.viewer = viewer;
  this.current = 0;
  this.images = [];
}
Slide.prototype.add = function(num) {
  var img = new Image();
  img.src = 'img/origin/o' + num.toString() + '.jpg';
  this.images.push(img);
  var obj = document.getElementById('thumb' + num.toString());
  var _self = this;
  obj.onclick = function() {
    _self.current = num;
    _self.show();
  }
}
Slide.prototype.attach_next = function(elem) {
  var _self = this;
  elem.onclick = function() {
    _self.next();
  }
}
Slide.prototype.attach_prev = function(elem) {
  var _self = this;
  elem.onclick = function() {
    _self.prev();
  }
}
Slide.prototype.show = function() {
  this.viewer.src = this.images[this.current].src;
  this.style();
}
Slide.prototype.next = function() {
  this.current++;
  if (this.images.length <= this.current) {
    this.current = 0;
  }
  this.show();
}
Slide.prototype.prev = function() {
  this.current--;
  if (this.current < 0) {
    this.current = this.images.length - 1;
  }
  this.show();
}
Slide.prototype.style = function() {
  var len = this.images.length;
  for (var i=0; i<len; i++) {
    document.getElementById('thumb' + i.toString()).className = (this.current == i) ? 'on' : 'off';
  }
}
</script>
<style type="text/css">
img.on {
  border-width: 1;
  border-style: solid;
  border-color: #00b2ee;
}
img.off {
  border-width: 1;
  border-style: solid;
  border-color: #ffffff;
}
</style>
<body>
<div>
<img src="img/origin/o0.jpg" width="349" height="272" alt="" id="view">
<ul>
<li><a href="javascript:void(0);" id="view_prev">前の写真へ</a></li>
<li><a href="javascript:void(0);" id="view_next">次の写真へ</a></li>
</ul>
</div>

<div>
<img src="img/thumb/t0.jpg" width="182" height="122" alt="" id="thumb0" class="on">
<img src="img/thumb/t1.jpg" width="182" height="122" alt="" id="thumb1" class="off">
<img src="img/thumb/t2.jpg" width="182" height="122" alt="" id="thumb2" class="off">
<img src="img/thumb/t3.jpg" width="182" height="122" alt="" id="thumb3" class="off">
<img src="img/thumb/t4.jpg" width="182" height="122" alt="" id="thumb4" class="off">
</div>
<script type="text/javascript">
var s = new Slide(document.getElementById('view'));
s.attach_prev(document.getElementById('view_prev'));
s.attach_next(document.getElementById('view_next'));
for (var i=0; i<5; i++) {
  s.add(i);
}
</script>
</body>
</html>

画像のパスや、id、画像のファイル名の規則(0からはじまるとか)をあわせておけば、s.add メソッドで数値を指定するだけです。下の方のi<5の5を変更すれば増減可能です。

比較的柔軟にカスタマイズも出来ると思います。

id:mune0628

>backupper様

ご回答ありがとうございます。

こちらのコードも参考にさせて頂きます。

今夜、作業してまたご連絡したいと思います。

取り急ぎ、よろしくお願い致します。

2008/07/25 10:34:32
  • id:mune0628
    >Mook様
    教えて頂いたスクリプトを早速実行してみた所問題なく動作を確認できました。
    今回は大変参考になるコードを教えて頂きありがとうございました。
    また機会がありましたらどうぞ宜しくお願い致します。

    >backupper様
    この度はご回答ありがとうございました。
    今回はMook様のスクリプトを利用させて頂きましたが、
    大変参考になりました。また機会がありましたら宜しくお願いいたします。

この質問への反応(ブックマークコメント)

トラックバック

  • 2008年7月25日(金) クライアントサイド技術 MOONGIFT: &#187; JavaScriptで実現するMVCフレームワーク「JavaScriptMVC」:オープンソースを毎日紹介 JavaScript 点数制限なしで切り替え対応させるにはどう
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません