質問編集履歴｜teratail（テラテイル）

3 誤字の修正

yoso score 27

2016/12/21 12:40 投稿

jQuery モダールウィンドウ内の画像表示内容をそれぞれに指定したい

素人ですがwordpressでホームページを作成しております。

動画ギャラリーとして、複数の動画のキャプチャ画像を並べ

クリックするとそれぞれのモダールウインドウが開きその中に

「iframeでyoutubeの埋め込み＋説明文書画像」が並んで表示されるよう

こちらで助けていただきjqueryを使用し作成しました。

```#modal-overlay {

z-index: 1;

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba( 255,255,255, 0.75 );

}

#modal-content {

width: 910px;

height: 360px;

margin: 0;

padding: 20px 20px;

border: 0px solid #aaa;

background: #fff;

position: fixed;

/*display: none;*/

}

.button-link {

color: #00f ;

text-decoration: underline;

}

.button-link:hover {

cursor: pointer ;

color: #f00 ;

}

.css_btn_class {

font-size:16px;

font-family:Arial;

font-weight:normal;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

border:1px solid #d83526;

padding:9px 18px;

text-decoration:none;

background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );

background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');

background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );

background-color:#fe1a00;

color:#ffffff;

display:inline-block;

text-shadow:1px 1px 0px #b23e35;

-webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;

-moz-box-shadow:inset 1px 1px 0px 0px #f29c93;

box-shadow:inset 1px 1px 0px 0px #f29c93;

}

.css_btn_class:hover {

background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );

background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');

background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );

background-color:#ce0100;

}

.css_btn_class:active {

position:relative;

top:1px;

}

```

```

</div>

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

```

```$(function() {

// modal-overlay内にmodal-contentを配置しているためイベントバブルにより、

// modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる

$("#modal-content").click(function(evt) {

evt.stopPropagation();

});

//リサイズされたら、センタリングをする

$(window).resize(centeringModalSyncer);

//ボタンのクリック(タッチ)イベント

$(".modal-syncer").click(function() {

//ボタンからフォーカスを外す

this.blur();

//プレイヤー(iframe)のsrcにYouTube動画のURLを設定

$("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=1");

$("#modal-overlay").fadeIn("fast");

// センタリング

centeringModalSyncer();

});

//[#modal-overlay]、または[#modal-close]をクリックしたら…

$("#modal-overlay, #modal-close").click(function() {

//[#modal-content]と[#modal-overlay]をフェードアウトした後に…

$("#modal-overlay").fadeOut("fast", function() {

$("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア

});

//センタリングを実行する関数

function centeringModalSyncer() {

//画面(ウィンドウ)の幅、高さを取得

var w = $(window).width();

var h = $(window).height();

//コンテンツ(#modal-content)の幅、高さを取得

var cw = $("#modal-content").outerWidth();

var ch = $("#modal-content").outerHeight();

//センタリングを実行する

$("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });

}

});

```

上記だと、動画はそれぞれ別のものが再生されますが

「説明文書画像」が同じものが常に表示されます。

もちろん原因はわかるのですが

・それぞれに個々の「説明文書画像」を表示させたいときはどのようにすればよいでしょうか？

「プレイヤー(iframe)のsrcにYouTube動画のURLを設定」と同様に設定すべきことは理解できるのですが

どうしても画像が表示されません。可能であれば、十先に追記すべき内容をご教授いただけませんでしょうか。

どうしても画像が表示されません。可能であれば、実際に追記すべき内容をご教授いただけませんでしょうか。

よろしくお願いいたします。

JavaScript

37543 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

13326 questions

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

2 質問内容の追記

yoso score 27

2016/12/21 12:23 投稿

jQuery モダールウィンドウ内の画像表示内容をそれぞれに指定したい

素人ですがwordpressでホームページを作成しております。

動画ギャラリーとして、複数の動画のキャプチャ画像を並べ

クリックするとそれぞれのモダールウインドウが開きその中に

「iframeでyoutubeの埋め込み＋説明文書画像」が並んで表示されるよう

こちらで助けていただきjqueryを使用し作成しました。

```#modal-overlay {

z-index: 1;

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba( 255,255,255, 0.75 );

}

#modal-content {

width: 910px;

height: 360px;

margin: 0;

padding: 20px 20px;

border: 0px solid #aaa;

background: #fff;

position: fixed;

/*display: none;*/

}

.button-link {

color: #00f ;

text-decoration: underline;

}

.button-link:hover {

cursor: pointer ;

color: #f00 ;

}

.css_btn_class {

font-size:16px;

font-family:Arial;

font-weight:normal;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

border:1px solid #d83526;

padding:9px 18px;

text-decoration:none;

background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );

background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');

background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );

background-color:#fe1a00;

color:#ffffff;

display:inline-block;

text-shadow:1px 1px 0px #b23e35;

-webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;

-moz-box-shadow:inset 1px 1px 0px 0px #f29c93;

box-shadow:inset 1px 1px 0px 0px #f29c93;

}

.css_btn_class:hover {

background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );

background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');

background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );

background-color:#ce0100;

}

.css_btn_class:active {

position:relative;

top:1px;

}

```

```

</div>

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

```

```$(function() {

// modal-overlay内にmodal-contentを配置しているためイベントバブルにより、

// modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる

$("#modal-content").click(function(evt) {

evt.stopPropagation();

});

//リサイズされたら、センタリングをする

$(window).resize(centeringModalSyncer);

//ボタンのクリック(タッチ)イベント

$(".modal-syncer").click(function() {

//ボタンからフォーカスを外す

this.blur();

//プレイヤー(iframe)のsrcにYouTube動画のURLを設定

$("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=1");

$("#modal-overlay").fadeIn("fast");

// センタリング

centeringModalSyncer();

});

//[#modal-overlay]、または[#modal-close]をクリックしたら…

$("#modal-overlay, #modal-close").click(function() {

//[#modal-content]と[#modal-overlay]をフェードアウトした後に…

$("#modal-overlay").fadeOut("fast", function() {

$("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア

});

//センタリングを実行する関数

function centeringModalSyncer() {

//画面(ウィンドウ)の幅、高さを取得

var w = $(window).width();

var h = $(window).height();

//コンテンツ(#modal-content)の幅、高さを取得

var cw = $("#modal-content").outerWidth();

var ch = $("#modal-content").outerHeight();

//センタリングを実行する

$("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });

}

});

```

上記だと、動画はそれぞれ別のものが再生されますが

「説明文書画像」が同じものが常に表示されます。

もちろん原因はわかるのですが

・それぞれに個々の「説明文書画像」を表示させたいときはどのようにすればよいでしょうか？

「プレイヤー(iframe)のsrcにYouTube動画のURLを設定」と同様に設定すべきことは理解できるのですが

どうしても画像が表示されません。可能であれば、十先に追記すべき内容をご教授いただけませんでしょうか。

よろしくお願いいたします。

JavaScript

37543 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

13326 questions

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

1 適切なタイトルへの変更

yoso score 27

2016/12/21 09:39 投稿

モダールウィンドウ内の画像表示内容をそれぞれに指定したい

jQuery モダールウィンドウ内の画像表示内容をそれぞれに指定したい

素人ですがwordpressでホームページを作成しております。

動画ギャラリーとして、複数の動画のキャプチャ画像を並べ

クリックするとそれぞれのモダールウインドウが開きその中に

「iframeでyoutubeの埋め込み＋説明文書画像」が並んで表示されるよう

こちらで助けていただきjqueryを使用し作成しました。

```#modal-overlay {

z-index: 1;

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba( 255,255,255, 0.75 );

}

#modal-content {

width: 910px;

height: 360px;

margin: 0;

padding: 20px 20px;

border: 0px solid #aaa;

background: #fff;

position: fixed;

/*display: none;*/

}

.button-link {

color: #00f ;

text-decoration: underline;

}

.button-link:hover {

cursor: pointer ;

color: #f00 ;

}

.css_btn_class {

font-size:16px;

font-family:Arial;

font-weight:normal;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

border:1px solid #d83526;

padding:9px 18px;

text-decoration:none;

background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );

background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');

background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );

background-color:#fe1a00;

color:#ffffff;

display:inline-block;

text-shadow:1px 1px 0px #b23e35;

-webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;

-moz-box-shadow:inset 1px 1px 0px 0px #f29c93;

box-shadow:inset 1px 1px 0px 0px #f29c93;

}

.css_btn_class:hover {

background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );

background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');

background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );

background-color:#ce0100;

}

.css_btn_class:active {

position:relative;

top:1px;

}

```

```

</div>

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

```

```$(function() {

// modal-overlay内にmodal-contentを配置しているためイベントバブルにより、

// modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる

$("#modal-content").click(function(evt) {

evt.stopPropagation();

});

//リサイズされたら、センタリングをする

$(window).resize(centeringModalSyncer);

//ボタンのクリック(タッチ)イベント

$(".modal-syncer").click(function() {

//ボタンからフォーカスを外す

this.blur();

//プレイヤー(iframe)のsrcにYouTube動画のURLを設定

$("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=1");

$("#modal-overlay").fadeIn("fast");

// センタリング

centeringModalSyncer();

});

//[#modal-overlay]、または[#modal-close]をクリックしたら…

$("#modal-overlay, #modal-close").click(function() {

//[#modal-content]と[#modal-overlay]をフェードアウトした後に…

$("#modal-overlay").fadeOut("fast", function() {

$("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア

});

//センタリングを実行する関数

function centeringModalSyncer() {

//画面(ウィンドウ)の幅、高さを取得

var w = $(window).width();

var h = $(window).height();

//コンテンツ(#modal-content)の幅、高さを取得

var cw = $("#modal-content").outerWidth();

var ch = $("#modal-content").outerHeight();

//センタリングを実行する

$("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });

}

});

```

上記だと、動画はそれぞれ別のものが再生されますが

「説明文書画像」が同じものが常に表示されます。

もちろん原因はわかるのですが

・それぞれに個々の「説明文書画像」を表示させたいときはどのようにすればよいでしょうか？

jQuery

13326 questions

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

JavaScript

37543 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン