質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • HTML

    8696questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6549questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5596questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

jQuery Zoom で同じ動きを複数画像対応にしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 293

salamKAR

score 3

 前提・実現したいこと

Jqueryのプラグインで下記のjQuery Zoomというのを利用して画像を拡大しようとしています。
プラグイン自体は設置できてデモの通りの場合は動くのですが、同じページ内で、同じ動きを複数画像に対応する方法がわかりません。

ソース

デモ

例えば1枚目の犬のマウスオーバーの動きを、
ページ内全ての画像に対応させたいが、
今のソースのまま、html内で<span class="zoom" id="ex1">を並べても1箇所しか動かないので、どこを直したら複数画像に当てられるかご教授頂けないでしょうか。

ページ内に何百枚も画像があり、それ全てにこの動きを対応させたいのですが、
素人のため、複雑な事がわかりません。
ex1の動きのみを全ての画像に対応させたいのです。

そもそもこのJqueryが同動きの複数画像には対応してないのでしょうか。
jqueryの方を直さないと動かないものであれば、大人しく設置は諦めます。

 該当のソースコード

$(document).ready(function(){
    $('#ex1').zoom();
    $('#ex2').zoom({ on:'grab' });
    $('#ex3').zoom({ on:'click' });          
    $('#ex4').zoom({ on:'toggle' });
});
<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>

 試したこと

<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/01 19:27

    これであってますでしょうか(><)  > OKです。対応ありがとうございます。

    キャンセル

  • salamKAR

    2018/05/01 19:35

    とりあえず、該当デモのソースをそのまま貼り付けております。ex1だけで良いのでex2以降は無くても動きました。

    キャンセル

  • mts10806

    2018/05/01 19:36

    分かりました。色々と説明が必要そうなので少々お待ちください。

    キャンセル

回答 1

checkベストアンサー

+4

回答としてはコードは1行で済む内容ですが、
おそらく色々と説明して理解していただかないと今後も同じような件でお悩みになりそうなので、説明をした上で回答としたいと思います。
※なので、その説明が理解できて「解決済み」としてもらえると今後困らなくてすみます。

まず、「試したこと」が動かない理由です。

<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>

コメントで書いた通り、「html上に存在していい同じidは1つのみ」というところです。

idは様々な場面で使われると思いますが、
例えば、学校に教室内おいて、同じクラスの中に同じ出席番号の人はいませんよね?
会社において同じ社員番号の人もいません。
マイナンバーも同じ人はいません。
つまり「特定できなければならない固有の情報」である必要があります。

プログラミングにおいてもID指定が複数の要素にあった場合、javascriptでは特定ができず、正常に動作しない といったことになります。

 第1段階

ということで、まず第1段階として、「別々のIDを指定して、それぞれにプラグインを当てる」という対応ができます。

例:
id ex1が複数あるので2つ目をex2とする

<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex2">
    <img src="img/daisy.jpg" width="555" height="320">
</span>

ex2 にもプラグインをあてる。

$(function(){
    $('#ex1').zoom();
    $('#ex2').zoom();
})    

※$(document).ready(function(){ の省略形で書いています。

 第2段階

もちろん第1段階のやり方でも可能ですが、もしかしたらお気づきかもしれません。
「プラグインをあてたい要素が増えたらその分、js側に処理を追加する必要があるのでは?」

1行で済むとはいえ、もし何百もあった場合、追加忘れがあるかもしれませんし、管理が面倒ですよね。

実際に質問には「ページ内に何百枚も画像があり、それ全てにこの動きを対応させたい」というのが要件としてあります。

最初の方で「idは1ページで1つ」と申し上げました。
複数にあてられるやり方が必要ですね。
例えばcssでこういう記述を見たことがありませんか?

<p class="text_red">test</p>
<p class="text_blue">test</p>
<p class="text_red">test</p>
.text_red{color:red;}
.text_blue{color:blue;}

つまりclassは1ページに複数指定できる わけですね。

これを利用すると、おそらく今のところzoomというclassをあてていっているように見受けられます。
もし、個別の動作や装飾を施すのではなくて、全てに同じ対応をするのであれば、下記で充分です。

$(function(){
    $('.zoom').zoom();
});

個別指定をしなくなるので、現在htmlで指定しているid属性も不要となります。
※個別に装飾や動作を実現させたい場合は別途対応が必要となりますのでご注意ください。

蛇足:
デモで利用されている#exというのはおそらくexampleの略だと思うので、
場面にあった任意の名前を付けられた方が良いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/02 09:30

    大変細かくわかりやすい説明を頂き、ありがとうございました!
    無事動かすことができました。
    cssはある程度理解していたのですが(なので第1段階は実はやってみていたのですが、数が多いと無理だなぁ…と)、javascriptはさっぱりわからなかったので本当に助かりました。
    デモは各種別々の動きはidに割り当てていて、そもそもの拡大する動きは.zoomだから、script内で.zoom自体を呼び出せば良かったという理解をしたのですが合ってたら幸いです。
    もう少しjavascriptも勉強しないと駄目ですね^^;
    この度は丁寧でわかりやすい回答をありがとうございました。

    キャンセル

  • 2018/05/02 15:02

    > デモは各種別々の動きはidに割り当てていて、

    そうですね。正確には「オプションを個別で見せるために別々のIDを割り当てた」というところですね。

    >そもそもの拡大する動きは.zoomだから

    違います。
    実はzoomというクラス名である必要はありません。
    プラグインの意味合いを直感的に表現するためにzoomという名前が使われただけです。
    デモにはcssの指定があると思いますが、何も指定しないとちょっと癖のある動きをするので、デモでは一律に同じ状態にするためにzoomというクラスを用意して全てにあてただけだと思います。

    >script内で.zoom自体を呼び出せば良かった

    これはその通りです。ただ回答にも書いたように「任意のクラス名をzoomプラグインをあてたい箇所には全てあてる」というのが前提条件です。


    ひとまず、解決および理解が進んだようで何よりです。
    今回のポイントを押さえておくと、おおよそ一般的なjQueryプラグインは利用できるようになるので、できることの幅が一気に広がると思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8696questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6549questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5596questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。