Hi
Bin gerade mit einer Galerie beschäftigt, welche ich nun mit einem Filter ausstatten möchte.
Also z.B. 4 Links auf die man klicken kann, und nach dem Klick werden nur noch Bilder angezeigt welche eine Referenz oder ähnliches (was es benötigt) auf diesen Link haben.
Ich arbeite mit Bootstrap 4 und wäre um jede Hilfe dankbar!
Hier meine Galerie:
Code
<div class="container gallery-container">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Bridge">
</a>
</div>
<div class="col-sm-12 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Tunnel">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Coast">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Rails">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Traffic">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Rocks">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Benches">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" data-toggle="modal" data-target="#product_view">
<img src="http://via.placeholder.com/350x350" alt="Sky">
</a>
</div>
</div>
</div>
</div>
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Produkttitel</h3>
<button style="background:#f27cff;border-color:#f27cff;" class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 product_img">
<img src="http://via.placeholder.com/350x350" class="img-responsive">
</div>
<div class="col-md-6 product_content">
<h4>Produkt: <span>Test</span></h4>
<div class="rating">
(10x gekauft von anderen Personen.)
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 3500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<h3 class="cost"><span class="glyphicon glyphicon-usd"></span> 60.00.- <small class="pre-cost"><span class="glyphicon glyphicon-usd"></span> 75.00.-</small></h3>
<div class="space-ten"></div>
<div class="btn-ground">
<button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Kaufen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Alles anzeigen