Depot43-Unterlagen - Modale-Images

HTML Elemente

            
            

<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>Bootstrap CDN</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    
    </style>

</head>
<body>

<div class="container">
  <h2>Die Vorschaubilder werden mit Klick einzeln geöffnet</h2>
	 <div data-toggle="modal" data-target="#brunnen">
		 <img class="thumb" src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Bild" />
	</div>
	<div data-toggle="modal" data-target="#bootsteg">
		 <img class="thumb" src="https://depot43.ch/unterlagen/assets/gallery/bootsteg.jpg" alt="Bild" />
	</div>
	<div data-toggle="modal" data-target="#badeplaetzli">
		 <img class="thumb" src="https://depot43.ch/unterlagen/assets/gallery/badeplaetzli.jpg" alt="Bild" />
	</div>
	

	<div class="modal fade" id="brunnen" role="dialog">
		<div class="modal-dialog" data-dismiss="modal">
			<img src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Bild" />
		</div>
	</div>
	<div class="modal fade" id="bootsteg" role="dialog">
		<div class="modal-dialog" data-dismiss="modal">
			<img src="https://depot43.ch/unterlagen/assets/gallery/bootsteg.jpg" alt="Bild" />
		</div>
	</div>
	<div class="modal fade" id="badeplaetzli" role="dialog">
		<div class="modal-dialog" data-dismiss="modal">
			<img src="https://depot43.ch/unterlagen/assets/gallery/badeplaetzli.jpg" alt="Bild" />
		</div>
	</div>
</div>
<script> 

</script>
</body>
</html>

</body>
</html>


 

            

Drei Vorschaubilder:

Jedes Vorschaubild braucht einen definierten data-target="meinZiel".

 <div data-toggle="modal" data-target="#brunnen">
         <img ... />
    </div>
    <div data-toggle="modal" data-target="#bootsteg">
         <img ... />
    </div>
    <div data-toggle="modal" data-target="#badeplaetzli">
         <img ... />
    </div>

Der Inhalt im modalen Fenster

Jedes platzierte Bild muss als Ziel für den gewünschten Auslöser über seine ID definiert werden.

<div class="modal fade" id="brunnen" role="dialog">
        ...
    </div>
    <div class="modal fade" id="bootsteg" role="dialog">
        ...
    </div>
    <div class="modal fade" id="badeplaetzli" role="dialog">
        ...
    </div>