人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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ややり方を教えて頂けたら幸いです。

よろしくお願いします。


●質問者: mune0628
●カテゴリ:ウェブ制作
✍キーワード:JavaScript URL エラー クリック サイト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Mook
●100ポイント

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

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

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


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

不要な部分は省略しましたが、下記のようで一応 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";
}

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

◎質問者からの返答

>Mook様

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

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

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

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

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

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


2 ● backupper
●30ポイント

以下でどうでしょう?

<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を変更すれば増減可能です。

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

◎質問者からの返答

>backupper様

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ