facing problems while linking thumbnails to modals

Question

I am trying to link thumnails I have created using bootstrap framework(javascript) modals using the following code.

<html>

<head>
  <link href="E:\bootstrap\css\bootstrap.min.css">
</head>

<body>

  <!--thumbnail section-->
  <section class="container">
    <div class="row add-bottom text-center">
      <a href="#migrant" class="thumbnail thumbnailstyle" data-toggle="modal">
        <img src="E:\Images\migrant100.jpg" alt="Project Image" class="imgStyle img-responsive center-block">
      </a>
      <br/>
      <br/>
      <a href="#water" class="thumbnail thumbnailstyle" data-toggle="modal">
        <img src="E:\Images\water.jpg" alt="Project Image1" class="imgStyle img-responsive center-block" id="img2">
      </a>
    </div>
  </section>

  <!--Modal-->
  <div id="migrant" class="modal fade hide" tabindex="-1">


    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">x
        <button>
          <h3>Migants</h3>
    </div>

    <div class="modal-body">
      <p>
        <img src="E:\Images\migrant100.jpg" alt="migrant01" class="pull-right">The Grapes of Wrath is an American realist 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 class="modal-footer">
      <button class="btn" data-dismiss="modal">Close</button>
    </div>

  </div>


  <div id="water" class="modal hide fade" tabindex="-1">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h3>Water</h3>
    </div>

    <div class="modal-body">
      <p>
        <img src="E:\Images\water.jpg" 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 class="modal-footer">
      <button class="btn" data-dismiss="modal">Close</button>
    </div>
  </div>

  <script src="E:\bootstrap\js\bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
  </script>
</body>

</html>

when I am clicking on the particular image thumbnail nothing is happening. I am new to start with framework like bootstrap,so I really don't know whether the modal classes I defined (modal,modal-header,modal-body etc.) also needed to be included with style in css file or not. I did that customization also.But, I am not getting any result.

Any suggestion is much appreciated.

you can't use `file system paths` to link anything in a webpage — Ankit Singh, May 06 '16 at 08:41
Then how am I supposed to link the modals to thumbnails for the above script? — d.d., May 06 '16 at 09:11
[see this](http://stackoverflow.com/questions/908765/how-to-link-html-pages-in-same-or-different-folders) and [this](http://www.w3schools.com/html/html_images.asp) to understand, it applies to all types of relative paths — Ankit Singh, May 06 '16 at 10:08

score 0 · Accepted Answer · answered May 06 '16 at 10:02

Inorder to make your bootstrap pop work, you basically need jquery library,bootstap js and bootstrap css. The below snippet will help you to achieve it..

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

Your thumbnail section should be:

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

Your Modal Content:

    <div class="modal fade" id="migrant" role="dialog">
    <div class="modal-dialog">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-content">
            <div class="modal-header">
                <h3>Migants</h3>
            </div>
            <div class="modal-body">
                <div class="modal-footer txt_center">
                    <p>
                        <img src="~/Images/migrant100.jpg" alt="migrant01" class="pull-right">The Grapes of Wrath is an American realist 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">
                <button class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="water" role="dialog">
    <div class="modal-dialog">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-content">
            <div class="modal-header">
                <h3>Water</h3>
            </div>
            <div class="modal-body">
                <div class="modal-footer txt_center">
                    <p>
                        <img src="~/Images/water.jpg" 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">
                <button class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I want to add next and previous button navigator for the modals created in the above example.I want to implement this along with the paragraph which was added in the modal.How would I do this? — d.d., May 08 '16 at 08:52

facing problems while linking thumbnails to modals

1 Answers1