Depot43-Unterlagen - Modal-Images-Gallery

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>
  	<h2>Galerie mit Modal-Fenster zeigen</h2>
	 <div data-toggle="modal" data-target="#myGallery">
		 <img class="thumb" src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Bild" />
	</div>

	<div class="modal fade" id="myGallery" role="dialog">
	<div class="modal-dialog closed" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></div>
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
		
		<div class="carousel-inner" role="listbox">
			<div class="item active">
			  <img src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Brunnen Gitschen">
			</div>

			<div class="item">
			  <img src="https://depot43.ch/unterlagen/assets/gallery/oberaxen.jpg" alt="Oberaxen Sisikon">
			</div>

			<div class="item">
			  <img src="https://depot43.ch/unterlagen/assets/gallery/sisikonsteg.jpg" alt="Schiffsteg in Sisikon">
			</div>

			<div class="item">
			  <img src="https://depot43.ch/unterlagen/assets/gallery/wegderschweiz.jpg" alt="Weg der Schweiz">
			</div>
		      </div>

		      <!-- Left and right controls -->
		      <a class="left carousel-control" href="/unterlagen/boot/gallerys/#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		      </a>
		      <a class="right carousel-control" href="/unterlagen/boot/gallerys/#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		      </a>
		</div>
	</div>
</div>

</body>
</html>


 

            

Mehrere modale Fenster,
modale die Galerie:

Das modale Fenster wird erstellt:

<div class="modal fade" id="myGallery" role="dialog">
...
</div>

Die Galerie darin eingefügt:

<div class="modal fade" id="myGallery" role="dialog">
   ...
   <div class="carousel-inner" role="listbox">
   ...
   </div>
</div>

Um die Galerie zu schliessen wird ein zusätzlicher Bitton eingebaut:

<div class="modal-dialog closed" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></div>

Mit CSS wird noch die Darstellung geschönt: ".thumb" verkleinert das Vorschaubild, "#myCarousel" wird auf Bildergrösse reduziert, ".closed" wird der Steuerung entsprechend formatiert.

Modal-Images-Gallery

Mehrere modale Fenster,modale die Galerie:

Mehrere modale Fenster,
modale die Galerie: