アクセスの度にランダムに画像を表示し、その外部htmlをモーダルウィンドウで表示
- 評価
- クリップ 0
- VIEW 311
カード占いのコンテンツを作成しています。
目指していること
①そのページにアクセスする度に何枚かあるカード画像から、3枚ランダムにピックアップされる
②そのカード画像には各々別htmlのリンクが貼られており、クリックするとモーダルウィンドウで表示される
（カードの画像サイズは、W:160px H:255px）
参考にしたサイト
▼①複数の画像の中から複数の画像をランダムに表示
https://oshiete.goo.ne.jp/qa/1811513.html?from=rfqa_no
※アクセスの度に画像を３枚ランダム表示
▼②外部HTMLをポップアップする
https://style01.net/1105/
※外部HTMLをポップアップ表示する（そしてそれをスライダーのように見れる）
とりあえず２つくっつけたHTML
<head></head>のところに入っているのが、ランダムに画像を表示させた上、該当のHTMLにリンク対応させたjsで、
ページ下部に記載されているjsがモーダルウィンドウのjsです。
（自分が内容を確認しやすいよう、便宜上そのようにしています。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>占い</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script language="javascript">
<!--//
var arrImage = new Array(
"img/01.png",
"img/02.png",
"img/03.png",
"img/04.png",
"img/05.png",
"img/06.png",
"img/07.png",
"img/08.png",
"img/09.png");
var arrLink = new Array(
"0.html",
"1.html",
"2.html",
"3.html",
"4.html",
"5.html",
"6.html",
"7.html",
"8.html",
"9.html");
var arrFlag = new Array(999,999,999);
function Show(){
document.imgNumber1.src = arrImage[StartRandom(0)];
document.links[0].href = arrLink[nTemp];
document.imgNumber2.src = arrImage[StartRandom(1)];
document.links[1].href = arrLink[nTemp];
document.imgNumber3.src = arrImage[StartRandom(2)];
document.links[2].href = arrLink[nTemp];
}
var nTemp, nLoop;
function StartRandom(nIndex){
nLoop = 0;
nTemp = Math.round(Math.random()*(arrImage.length-1));
if (nIndex != 0){
for (nLoop = 0; nLoop < nIndex ; nLoop++){
if (nTemp == arrFlag[nLoop]){
StartRandom(nIndex);
}
}
}
arrFlag[nIndex] = nTemp;
return nTemp;
}
function Show(){
document.imgNumber1.src = arrImage[StartRandom(0)];
document.getElementById('link1').href = arrLink[nTemp];
document.imgNumber2.src = arrImage[StartRandom(1)];
document.getElementById('link2').href = arrLink[nTemp];
document.imgNumber3.src = arrImage[StartRandom(2)];
document.getElementById('link3').href = arrLink[nTemp];
}
//-->
</script>
</head>
<body onLoad="Show()">
<div class="container">
<h1>外部htmlをポップアップする</h1>
<ul class="link_list">
<li id="link1"><img name="imgNumber1" src="img/01.png" width="160" height="255" border="0"></li>
<li id="link2"><img name="imgNumber2" src="img/02.png" width="160" height="255" border="0"></li>
<li id="link3"><img name="imgNumber3" src="img/03.png" width="160" height="255" border="0"></li>
</ul>
<div class="box">
<div class="box_inner">
<!-- ↓ここに.load_xxが入る -->
<ul class="box_load">
</ul>
<!-- ↑ここに.load_xxが入る -->
<div class="close">
閉じる
</div>
<ul class="arrows">
<li class="arrow_left"><span class="arrow_span">←</span></li>
<li class="arrow_rigth"><span class="arrow_span">→</span></li>
</ul>
</div>
</div>
<div class="box_cover">
</div>
</div>
</body>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var box =$('.box'),
link = $('.link_list li '),
box_cover = $('.box_cover'),
close=$('.close'),
box_load = $('.box_load'),
box_load_li = $('.box_load>li'),
arrow_left =$('.arrow_left>.arrow_span'),
arrow_rigth =$('.arrow_rigth>.arrow_span');
// box_load内に要素を入れる
// ①新しい配列all_linkを作る
// ②link_listの中のliがいくつあるのか取ってきてforで回す
// ③配列all_linkにbox0.html、box1.html・・・のような感じで値を格納する
// ④box_loadの中にlink_listのliの数だけ'<li class="load_'+i+'"></li>を増やす
// ⑤<li class="load_'+i+'"></li>に配列all_link[i]をloadする
// ※load_0に対応するのはall_link[0](←配列の1番目。配列は0から始まります)
var all_link=new Array(),
links = $('.link_list').find('li'),
dr='<?php echo get_template_directory_uri(); ?>';
for(var i=0;i<links.length;i++){
all_link[i]= +i+'.html';
box_load.append('<li class="load_'+i+'"></li>');
$('.load_'+i).load(all_link[i]);
}
//一度box_load>liを非表示にする
$('.box_load>li').hide();
// linkをクリックしたとき
link.on('click',function(){
//link.index(this)で、クリックされたliを指定する
var li_index =link.index(this);
$('.box_load>li').removeClass('active');
$('.load_'+li_index).addClass('active');
$('.box_load>li').hide();
$('.box_load >li.active').show();
//もし.boxに「active」というクラスがあったら
if(box.hasClass('active')){
box.removeClass('active');
box_cover.removeClass('active');
close.removeClass('active');
$('.box_load>li').removeClass('active');
}else{
// もしないなら
box.addClass('active');
box_cover.addClass('active');
close.addClass('active');
}
});
//box_coverをクリックしたとき
box_cover.on('click',function(){
box.removeClass('active');
box_cover.removeClass('active');
close.removeClass('active');
$('.box_load>li').removeClass('active');
});
//closeをクリックしたとき
close.on('click',function(){
box.removeClass('active');
box_cover.removeClass('active');
close.removeClass('active');
$('.box_load>li').removeClass('active');
});
// 矢印をクリックした時
// fade_speedは切り替わりの速さ
var fade_speed = 300;
arrow_rigth.on('click',function(){
var load_active = $('.box_load >li.active'),
// [right].box_load >li.activeの次のli、それがない場合は最初のliに戻る
right = load_active.next('li').length?load_active.next('li'):$('.box_load >li:first');
// .box_load >li.activeをfaceOutしてクラスを削除、
// [right]をfadeInしてクラスを付ける
$('.box_load >li.active').fadeOut(fade_speed).removeClass('active');
right.fadeIn(fade_speed).addClass('active');
});
arrow_left.on('click',function(){
var load_active = $('.box_load >li.active'),
// [left].box_load >li.activeの前のli、それがない場合は最後のliに戻る
left = load_active.prev('li').length?load_active.prev('li'):$('.box_load >li:last');
$('.box_load >li.active').fadeOut(fade_speed).removeClass('active');
left.fadeIn(fade_speed).addClass('active');
});
});
</script>
</html>これをうまくくっつければ、希望通りの動きができると思っているのですが…
お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。
※一部タグを修正しました。（不要な文言削除）
all_link[i]='oraclecard_'+i+'.html';
↓
all_link[i]= +i+'.html';-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
こんなふうにするとラクです
<script>
var arrImage = [
{src:"img/00.png",href:"0.html",sort:Math.random(),},
{src:"img/01.png",href:"1.html",sort:Math.random(),},
{src:"img/02.png",href:"2.html",sort:Math.random(),},
{src:"img/03.png",href:"3.html",sort:Math.random(),},
{src:"img/04.png",href:"4.html",sort:Math.random(),},
{src:"img/05.png",href:"5.html",sort:Math.random(),},
{src:"img/06.png",href:"6.html",sort:Math.random(),},
{src:"img/07.png",href:"7.html",sort:Math.random(),},
{src:"img/08.png",href:"8.html",sort:Math.random(),},
{src:"img/09.png",href:"9.html",sort:Math.random(),},
];
arrImage.sort(function(x,y){
return x.sort-y.sort;
});
console.log(arrImage[0].src);
console.log(arrImage[1].src);
console.log(arrImage[2].src);
</script>組み込み
<script>
window.addEventListener('DOMContentLoaded', function(e){
var arrImage = [
{src:"img/00.png",href:"0.html",sort:Math.random(),},
{src:"img/01.png",href:"1.html",sort:Math.random(),},
{src:"img/02.png",href:"2.html",sort:Math.random(),},
{src:"img/03.png",href:"3.html",sort:Math.random(),},
{src:"img/04.png",href:"4.html",sort:Math.random(),},
{src:"img/05.png",href:"5.html",sort:Math.random(),},
{src:"img/06.png",href:"6.html",sort:Math.random(),},
{src:"img/07.png",href:"7.html",sort:Math.random(),},
{src:"img/08.png",href:"8.html",sort:Math.random(),},
{src:"img/09.png",href:"9.html",sort:Math.random(),},
];
arrImage.sort(function(x,y){
return x.sort-y.sort;
});
[].forEach.call(document.querySelectorAll('.link_list li'),function(x,y){
x.querySelector('a').setAttribute("href",arrImage[y].href);
x.querySelector('img').setAttribute("src",arrImage[y].src);
x.querySelector('img').setAttribute("alt",arrImage[y].src);
});
});
</script>
<ul class="link_list">
<li><a href="01.html" id="link1"><img name="imgNumber1" src="img/01.png" alt="" width="160" height="255" border="0"></a></li>
<li><a href="02.html" id="link2"><img name="imgNumber2" src="img/02.png" alt="" width="160" height="255" border="0"></a></li>
<li><a href="03.html" id="link3"><img name="imgNumber3" src="img/03.png" alt="" width="160" height="255" border="0"></a></li>
</ul>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.21%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/01/23 19:39
無知で申し訳ないのですが、そのようにアトランダムに書きだされた要素を、どのようにhtml内に組み込めばよいでしょうか？
また、ランダムに書きだされたものを、例にあげたモーダルウィンドウと組み合わせるにはどうしたらよいでしょうか？
たぶん、ページの下部に書いてある、javascriptのリストタグを生み出すスクリプトにその要素をうまく組み合わせればよいのだと思いますが……
申し訳ございませんが、もう少々教えていただければ幸いです。
2019/01/23 19:49 編集
document.links[0].href = arrLink[nTemp];
↓↓↓
document.imgNumber1.src = arrImage[0].src;
document.links[0].href = arrImage[0].href;
としてください（元ソースもちょっとかえました）
実際にはもう少し工夫したほうがよいですが・・・
2019/01/24 12:36
以下のようにしてみました。
■ ページ上部javascript ■
<script>
var arrImage = [
{src:"img/00.png",href:"0.href",sort:Math.random(),},
{src:"img/01.png",href:"1.href",sort:Math.random(),},
{src:"img/02.png",href:"2.href",sort:Math.random(),},
{src:"img/03.png",href:"3.href",sort:Math.random(),},
{src:"img/04.png",href:"4.href",sort:Math.random(),},
{src:"img/05.png",href:"5.href",sort:Math.random(),},
{src:"img/06.png",href:"6.href",sort:Math.random(),},
{src:"img/07.png",href:"7.href",sort:Math.random(),},
{src:"img/08.png",href:"8.href",sort:Math.random(),},
{src:"img/09.png",href:"9.href",sort:Math.random(),},
];
arrImage.sort(function(x,y){
return x.sort-y.sort;
});
console.log(arrImage[0].src);
console.log(arrImage[1].src);
console.log(arrImage[2].src);
var arrFlag = new Array(999,999,999);
function Show(){
document.imgNumber1.src = arrImage[0].src;
document.links[0].href = arrImage[0].href;
document.imgNumber2.src = arrImage[1].src;
document.links[1].href = arrImage[1].href;
document.imgNumber3.src = arrImage[2].src;
document.links[2].href = arrImage[2].href;
}
var nTemp, nLoop;
function StartRandom(nIndex){
nLoop = 0;
nTemp = Math.round(Math.random()*(arrImage.length-1));
if (nIndex != 0){
for (nLoop = 0; nLoop < nIndex ; nLoop++){
if (nTemp == arrFlag[nLoop]){
StartRandom(nIndex);
}
}
}
arrFlag[nIndex] = nTemp;
return nTemp;
}
</script>
■ 該当部分html ■
<ul class="link_list">
<li><a href="01.html" id="link1"><img name="imgNumber1" src="img/01.png" width="160" height="255" border="0"></a></li>
<li><a href="02.html" id="link2"><img name="imgNumber2" src="img/02.png" width="160" height="255" border="0"></a></li>
<li><a href="03.html" id="link3"><img name="imgNumber3" src="img/03.png" width="160" height="255" border="0"></a></li>
</ul>
しつこくて申し訳ないのですが、
こちらをページ下部のjavascriptとマージする方法がわかりません。
もし、お分かりになれば、教えていただければ幸いです。
2019/01/24 12:50
2019/01/25 13:25
問題なく、望む動きをしました。
（モーダルウィンドウ部分は、jQueryのColorboxを使用してみました。）