Q&A
http://office-goto.info/javascript-jquery/zoom-plugin/ リンク先の記事にまんまやりたいことがコード付き、デモ付きで丁寧に書いてませんか？とりあえず、そのまんまやってみて出来なかった場合、分からなかった場合は書いたコード一式、不明点等を追記して下さい。
前提・実現したいこと
Jqueryのプラグインで下記のjQuery Zoomというのを利用して画像を拡大しようとしています。
プラグイン自体は設置できてデモの通りの場合は動くのですが、同じページ内で、同じ動きを複数画像に対応する方法がわかりません。
例えば１枚目の犬のマウスオーバーの動きを、
ページ内全ての画像に対応させたいが、
今のソースのまま、html内で<span class="zoom" id="ex1">を並べても１箇所しか動かないので、どこを直したら複数画像に当てられるかご教授頂けないでしょうか。
ページ内に何百枚も画像があり、それ全てにこの動きを対応させたいのですが、
素人のため、複雑な事がわかりません。
ex1の動きのみを全ての画像に対応させたいのです。
そもそもこのJqueryが同動きの複数画像には対応してないのでしょうか。
jqueryの方を直さないと動かないものであれば、大人しく設置は諦めます。
該当のソースコード
javascript
1$(document).ready(function(){ 2 $('#ex1').zoom(); 3 $('#ex2').zoom({ on:'grab' }); 4 $('#ex3').zoom({ on:'click' }); 5 $('#ex4').zoom({ on:'toggle' }); 6});
html
1<span class="zoom" id="ex1"> 2 <img src="img/daisy.jpg" width="555" height="320"> 3</span>
試したこと
html
1<span class="zoom" id="ex1"> 2 <img src="img/daisy.jpg" width="555" height="320"> 3</span> 4<span class="zoom" id="ex1"> 5 <img src="img/daisy.jpg" width="555" height="320"> 6</span>
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
申し訳ありません、デモ先に書いてある事は全てやってデモと同じ動きはできているのですが、ここから複数画像に対応する方法がわからないのです。素人で申し訳ありません、、、。
複数画像に対応するというのは、リンク先のこういうことではなくて？http://office-goto.info/demo/zoom/
そうでない場合、質問が不明瞭なので補足説明をされると良いかと思います。
とりあえず何も分かりませんレベルの素人さんである場合は、コード一式載せた上でこのコードでは◯◯だけど、そうではなく、●●にしたいと明確に質問した方が分かりやすくて回答もつきやすいと思います。丸投げ質問はこのサイトでは非推薦なので低評価つくかもしれませんが、優しい人が誰かしら回答してくれると思います。
対応ありがとうございます。こういう動きが別々のサンプルではなく、例えば①枚目の犬の「マウスオーバー」の動きを同ページ内で全ての画像の適用したいのですが、現状のソースのままですと画像１箇所にしか対応してないようなので、どこをどう修正すれば複数画像に同じ動きを充てられるかがわからないのです。
あ、時間差のコメントになってしまいましたね。上のコメント修正しましたので、確認の上、必要と感じれば対応なさってみて下さい。自分からは以上です。
コードはコードブロック```で囲ってください。
idは1ページにつき同じものは1つが原則です。別のIDにして調整した結果も教えてください。 https://w3g.jp/xhtml/dic/id
対応ありがとうございます。コードはコードブロック```で囲ってください。の意味がわかりません…。申し訳ありません。。。
素人かどうかは質問とは関係がなく、回答者にとってはノイズとなりえる部分となります。質問編集画面の質問タイトル横にある「初心者アイコン」をご活用ください。
コードブロックの意味が分からなければ、コード部分を選択状態にして<code>ボタンを押してください。「ここに言語を入力」のところにはjs,htmlなど言語名を入れると言語にあわせて適切にハイライトされます。質問編集画面ではリアルタイムでプレビューが表示されるのでそちらを確認しながら調整していってください。
これであってますでしょうか（＞＜）
確認です。現時点の質問の「該当のソースコード」には別々のオプションをあてられているように思いますが、これはどういうことでしょうか？色々なオプションをそれぞれにあてたいのでしょうか？それとも提示プラグインのページにある[script]項目部分を貼っただけでしょうか？
これであってますでしょうか（＞＜） ＞ OKです。対応ありがとうございます。
とりあえず、該当デモのソースをそのまま貼り付けております。ex1だけで良いのでex2以降は無くても動きました。
分かりました。色々と説明が必要そうなので少々お待ちください。
回答1件
0
ベストアンサー
回答としてはコードは1行で済む内容ですが、
おそらく色々と説明して理解していただかないと今後も同じような件でお悩みになりそうなので、説明をした上で回答としたいと思います。
※なので、その説明が理解できて「解決済み」としてもらえると今後困らなくてすみます。
まず、「試したこと」が動かない理由です。
html
1<span class="zoom" id="ex1"> 2 <img src="img/daisy.jpg" width="555" height="320"> 3</span> 4<span class="zoom" id="ex1"> 5 <img src="img/daisy.jpg" width="555" height="320"> 6</span>
コメントで書いた通り、「html上に存在していい同じidは1つのみ」というところです。
idは様々な場面で使われると思いますが、
例えば、学校に教室内おいて、同じクラスの中に同じ出席番号の人はいませんよね？
会社において同じ社員番号の人もいません。
マイナンバーも同じ人はいません。
つまり「特定できなければならない固有の情報」である必要があります。
プログラミングにおいてもID指定が複数の要素にあった場合、javascriptでは特定ができず、正常に動作しない といったことになります。
第1段階
ということで、まず第1段階として、「別々のIDを指定して、それぞれにプラグインを当てる」という対応ができます。
例：
id ex1が複数あるので2つ目をex2とする
html
1<span class="zoom" id="ex1"> 2 <img src="img/daisy.jpg" width="555" height="320"> 3</span> 4<span class="zoom" id="ex2"> 5 <img src="img/daisy.jpg" width="555" height="320"> 6</span>
ex2 にもプラグインをあてる。
js
1$(function(){ 2 $('#ex1').zoom(); 3 $('#ex2').zoom(); 4})
※$(document).ready(function(){ の省略形で書いています。
第2段階
もちろん第1段階のやり方でも可能ですが、もしかしたらお気づきかもしれません。
「プラグインをあてたい要素が増えたらその分、js側に処理を追加する必要があるのでは？」
1行で済むとはいえ、もし何百もあった場合、追加忘れがあるかもしれませんし、管理が面倒ですよね。
実際に質問には「ページ内に何百枚も画像があり、それ全てにこの動きを対応させたい」というのが要件としてあります。
最初の方で「idは1ページで1つ」と申し上げました。
複数にあてられるやり方が必要ですね。
例えばcssでこういう記述を見たことがありませんか？
html
1<p class="text_red">test</p> 2<p class="text_blue">test</p> 3<p class="text_red">test</p>
css
1.text_red{color:red;} 2.text_blue{color:blue;}
つまりclassは1ページに複数指定できる わけですね。
これを利用すると、おそらく今のところzoomというclassをあてていっているように見受けられます。
もし、個別の動作や装飾を施すのではなくて、全てに同じ対応をするのであれば、下記で充分です。
js
1$(function(){ 2 $('.zoom').zoom(); 3});
個別指定をしなくなるので、現在htmlで指定しているid属性も不要となります。
※個別に装飾や動作を実現させたい場合は別途対応が必要となりますのでご注意ください。
蛇足：
デモで利用されている#exというのはおそらくexampleの略だと思うので、
場面にあった任意の名前を付けられた方が良いです。
投稿2018/05/01 11:00
編集2018/05/01 11:03総合スコア80850
大変細かくわかりやすい説明を頂き、ありがとうございました！
無事動かすことができました。
cssはある程度理解していたのですが（なので第１段階は実はやってみていたのですが、数が多いと無理だなぁ…と）、javascriptはさっぱりわからなかったので本当に助かりました。
デモは各種別々の動きはidに割り当てていて、そもそもの拡大する動きは.zoomだから、script内で.zoom自体を呼び出せば良かったという理解をしたのですが合ってたら幸いです。
もう少しjavascriptも勉強しないと駄目ですね＾＾；
この度は丁寧でわかりやすい回答をありがとうございました。
> デモは各種別々の動きはidに割り当てていて、
そうですね。正確には「オプションを個別で見せるために別々のIDを割り当てた」というところですね。
＞そもそもの拡大する動きは.zoomだから
違います。
実はzoomというクラス名である必要はありません。
プラグインの意味合いを直感的に表現するためにzoomという名前が使われただけです。
デモにはcssの指定があると思いますが、何も指定しないとちょっと癖のある動きをするので、デモでは一律に同じ状態にするためにzoomというクラスを用意して全てにあてただけだと思います。
＞script内で.zoom自体を呼び出せば良かった
これはその通りです。ただ回答にも書いたように「任意のクラス名をzoomプラグインをあてたい箇所には全てあてる」というのが前提条件です。
ひとまず、解決および理解が進んだようで何よりです。
今回のポイントを押さえておくと、おおよそ一般的なjQueryプラグインは利用できるようになるので、できることの幅が一気に広がると思います。
あなたの回答
tips
プレビュー
