モーダルにナビゲーションボタン（前後）を追加する方法

イメージサムネイルを作成し、そのサムネイルを次のコードを使用してリンクしました。モーダルにナビゲーションボタン（前後）を追加する方法

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t \t <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' /> 
 
\t \t 
 
</head> 
 
<body> 
 

 
\t \t <!--thumbnail section--> 
 
\t \t <section class="container"> 
 
\t \t \t <div class="row add-bottom text-center"> 
 
\t \t \t \t <a href="#migrant" class="thumbnail" data-toggle="modal"> 
 
\t \t \t \t \t <img src=".." alt="Project Image" class="img-responsive center-block"> 
 
\t \t \t \t </a> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <a href="#water" class="thumbnail" data-toggle="modal"> 
 
\t \t \t \t \t <img src=".." alt="Project Image1" class="img-responsive center-block"> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </section> 
 
\t \t 
 
\t \t <!--Modal Content--> 
 
\t \t <div class="modal fade" id="migrant" role="dialog"> 
 
\t \t \t <div class="modal-dialog"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <h3>Migrants</h3> 
 
\t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t <div class="modal-footer txt_center"> 
 
\t \t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t \t <img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently when Steinbeck was awarded the Nobel Prize in 1962 
 
\t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t <button class="btn" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="modal fade" id="water" role="dialog"> 
 
\t \t \t <div class="modal-dialog"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t <h3>Water</h3> 
 
\t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t <div class="modal-footer txt_center"> 
 
\t \t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t \t <img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, they are one of the two largest families of flowering 
 
\t \t \t \t \t \t \t \t plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera 
 
\t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t <button class="btn" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</body> 
 
</html>

今、私は画像を記述する段落と一緒に画像を表示するモーダルウィンドウに（前後の）ナビゲーションボタンを追加したいです。モーダルウィンドウが表示されたら、ウィンドウを閉じてサムネイル画像に何度も何度も戻ってくる必要はありません。モーダルウィンドウが表示されたら、目的の画像を探したいナビゲーションボタンをその説明と共に追加します。これはどうすれば可能でしょうか？

出典

2016-05-09 d.d.

あなたがjQueryをどの程度快適に使っているかわかりませんが、これはJavascript/jQueryのほんの少しで実現できます。最善の方法は、ある種のデータオブジェクトのイメージとテキストから始めることです。オリジナルのコードに基づいたサンプルを含むPlunkerリンクがあります。

https://plnkr.co/edit/Fq9pFzrgE9VOOLmljlXw?p=preview

はそれで、私は、Javascriptのオブジェクトの基本的な配列を使用してデータセットを作成しました。

var data = [ 
    { src: "https://placehold.it/150x150?text=Image1", title: "Image 1", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a est mauris. Sed non sollicitudin lacus. Sed maximus facilisis purus, et blandit lectus vehicula in." }, 
    { src: "https://placehold.it/150x150?text=Image2", title: "Image 2", description: "Aenean accumsan metus ipsum, id vehicula felis semper sed. Sed hendrerit pulvinar porttitor. Etiam id tortor leo. Integer ex dui, vulputate vel iaculis sit amet, laoreet eu sem." }, 
    { src: "https://placehold.it/150x150?text=Image3", title: "Image 3", description: "Vivamus luctus est at sapien sollicitudin, nec mattis arcu condimentum. Vivamus sed varius diam. Nulla varius, tortor vel tempus feugiat, libero felis pellentesque mi, sit amet sagittis lacus massa et erat. " }, 
    { src: "https://placehold.it/150x150?text=Image4", title: "Image 4", description: "Vestibulum eu ex ac nunc pretium hendrerit vel in quam. Morbi imperdiet imperdiet pharetra." } 
    ];

次に、ナビゲーションリンクを無効にする必要があるかどうかを確認するなど、モーダルナビゲーションを管理する簡単な機能をいくつか作成しました。また、javascriptトリガを使用してモーダルを開くので、クリックすると適切なアイテムを読み込むことができます。

var currentItem = 0; 

function prevImg() { 
    if (currentItem > 0) { 
    currentItem--; 
    } 
    loadData(); 
} 

function nextImg() { 
    if (currentItem < data.length - 1) { 
    currentItem++; 
    } 
    loadData(); 
} 

function loadData() { 
    $("#modalTitle").html(data[currentItem].title); 
    $("#modalImg").attr("src", data[currentItem].src).attr("alt", data[currentItem].title); 
    $("#modalText").html(data[currentItem].description); 

    // enable/disable nav buttons 
    $("#navPrev").removeAttr("disabled"); 
    $("#navNext").removeAttr("disabled"); 

    if (currentItem == 0) { 
    $("#navPrev").attr("disabled", "disabled"); 
    } 
    else if (currentItem == data.length - 1) { 
    $("#navNext").attr("disabled", "disabled"); 
    } 
} 

function openModal(idx) { 
    currentItem = idx; 
    loadData(); 
    $("#modal").modal(); 
}

データを読み込むために、データセットをループして、サムネイルにHTMLを追加しました。これはもっと複雑ですが、まだひどいものではありません。

$(document).ready(function() { 
    var $thumbs = $(".thumbnails"); 

    // dynamically add thumbnails to page 
    for (var i = 0; i < data.length; i++) { 
    $thumbs.append('<a href="#" onclick="openModal(' + i + ')" class="thumbnail" data-toggle="modal" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block" /></a>'); 
    } 
});

これで、1つのモーダルダイアログを使用してHTMLを減らすことができます。また、フッターにボタンを使用する代わりに、本体内にナビゲーションリンクを追加しました。

<body> 
    <!--thumbnail section--> 
    <section class="container"> 
    <div class="row add-bottom text-center thumbnails"> 
    </div> 
    </section> 
    <!--Modal Content--> 
    <div id="modal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 id="modalTitle" class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
      <div class="col-xs-1"> 
       <a id="navPrev" href="#" onclick="prevImg()"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a> 
      </div> 
      <div class="col-xs-10"> 
       <img id="modalImg" src="" alt="" class="pull-right" /> 
       <span id="modalText"></span> 
      </div> 
      <div class="col-xs-1"> 
       <a id="navNext" href="#" onclick="nextImg()"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

最後に、ナビゲーションリンクをフォーマットするための簡単なスタイルをいくつか示します。

#navPrev, #navNext { 
    color: #333; 
    font-size: 2em; 
} 

#navPrev:hover, #navNext:hover { 
    color: red; 
} 

#navPrev[disabled], #navNext[disabled] { 
    color: #cdcdcd; 
    cursor: default; 
}

出典

2016-05-09 16:51:30 WonderGrub

を私は上記のコードが、私を試してみましたPlunker.Moreoverに表示される結果と同じではない、いくつかの望ましくない結果（複数のサムネイルとモーダルが一度に表示されています）が発生しています。また、Plunkerにおいても、指定されたサムネ対応するモーダルが表示されていない場合は、デフォルトで最初のモーダルが表示されます。最初/最後のモーダルに達すると前/次のボタンを消したい。モーダルフッタにボタンを持つ代わりにモーダルボディのナビゲーション矢印を使用する方法は、前/次のモーダルにリダイレクトされますか？ –

私は、他の機能を追加するための回答を更新して、それが常にクリックの最初の項目を示した問題を修正しました。コードをそのまま使用すると、動作します。 jQueryとBootstrapについて理解を深めるためにオンラインでいくつかのコースを探すことをお勧めします。 – WonderGrub

javascriptモーダルAPIを使用すると、現在のモーダルを非表示にして、必要なウォッシャーを表示できます。

例えば、私はそれを行うにはモーダルのボタンに機能を関連付けられた：

<body> 

    <!--thumbnail section--> 
    <section class="container"> 
    <div class="row add-bottom text-center"> 
     <a href="#migrant" class="thumbnail" data-toggle="modal"> 
     <img src=".." alt="Project Image" class="img-responsive center-block"> 
     </a> 
     <br /> 
     <br /> 
     <a href="#water" class="thumbnail" data-toggle="modal"> 
     <img src=".." alt="Project Image1" class="img-responsive center-block"> 
     </a> 
    </div> 
    </section> 

    <!--Modal Content--> 
    <div class="modal fade" id="migrant" role="dialog"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
     <div class="modal-header"> 

      <h3>Migrants</h3> 
      <button type="button" class="close" data-dismiss="modal">x</button> 
     </div> 
     <div class="modal-body"> 
      <div class="modal-footer txt_center"> 
      <p> 
       <img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently 
       when Steinbeck was awarded the Nobel Prize in 1962 
      </p> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" onclick="showModal('water')">Next</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="modal fade" id="water" role="dialog"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
     <div class="modal-header"> 
      <h3>Water</h3> 
      <button type="button" class="close" data-dismiss="modal">x</button> 
     </div> 
     <div class="modal-body"> 
      <div class="modal-footer txt_center"> 
      <p> 
       <img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, 
       they are one of the two largest families of flowering plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera 
      </p> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" onclick="showModal('migrant')">Previous</button> 

      </div> 
     </div> 
     </div> 
    </div> 
    </div> 


    <script> 
    function showModal(id) { 
     $(".modal").modal('hide'); 
     $("#" + id).modal(); 
    } 

    </script> 
</body>

https://jsfiddle.net/vegdyf48/

ジャバスクリプトAPI： https://getbootstrap.com/javascript/#via-javascript

出典

2016-05-09 17:22:05 JSierra

複数のサムネイルに対して同じ方法を実装するにはどうすればよいですか？ –

ボタン上の 'onclick'イベントのコールバックとしてサンプル関数" showModal "を使用し、表示したいサムネイルのIDを渡します。 – JSierra

このようにすれば、コードは非常に長くなり、複数のサムネイルでは実装が難しくなります。ですから、サムネイルを配列に入れたいと思います。これを実装する方法は？ –

モーダルにナビゲーションボタン（前後）を追加する方法

答えて

関連する問題