アクセスの度にランダムに画像を表示し、その外部htmlをモーダルウィンドウで表示

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 311

カード占いのコンテンツを作成しています。

目指していること

①そのページにアクセスする度に何枚かあるカード画像から、3枚ランダムにピックアップされる
②そのカード画像には各々別htmlのリンクが貼られており、クリックするとモーダルウィンドウで表示される
(カードの画像サイズは、W:160px H:255px)

参考にしたサイト

▼①複数の画像の中から複数の画像をランダムに表示
https://oshiete.goo.ne.jp/qa/1811513.html?from=rfqa_no

※アクセスの度に画像を3枚ランダム表示

▼②外部HTMLをポップアップする
https://style01.net/1105/

※外部HTMLをポップアップ表示する(そしてそれをスライダーのように見れる)

とりあえず2つくっつけた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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

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>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 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

    組み込みまで追記しました(hrefがおかしかったので直しました)

    キャンセル

  • 2019/01/25 13:25

    ご丁寧にありがとうございました。
    問題なく、望む動きをしました。
    (モーダルウィンドウ部分は、jQueryのColorboxを使用してみました。)

    キャンセル

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

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