FEATURE: functional gallery template and lightbox

2016-04-05 19:26:56 +02:00
parent d17a0ec8ef
commit 54f0566ee2
3 changed files with 352 additions and 7 deletions
@@ -1,5 +1,48 @@
-<h1>{{$page->title}}</h1>
+@extendVisitor('defaultLayout')

-@foreach($images as $image)
-    <img src="{{config('app.upload_url')}}/{{$image->filename}}" alt="" />
-@endforeach
+@section('content')
+
+<div class="grey-wrapper m-t-25 clearfix">
+    <div class="row column gallert" id="gallery-images">
+        <h2 class="m-b-25">{{$page->title}}</h2>
+        @foreach($images as $index => $image)
+            <div class="column medium-3 small-6 gallery-image-holder" data-index="{{$index}}" data-img="" data-label="{{$image->description}}">
+                <img src="{{config('app.upload_url')}}/{{$image->filename}}" alt="{{$image->name}}">
+                <div class="gallery-item-data text-center">
+                    <h5>{{$image->name or "Název"}}</h5>
+                    <p>{{$image->description or "Popisek"}}</p>
+                    <p>počet ks</p>
+                    <p class="price">cena: 39,-Kč/ks</p>
+                </div>
+            </div>
+        @endforeach
+        <div class="clearfix"></div>
+        <script src="@asset('BLightBox.js')"></script>
+        <script type="text/javascript">
+            $('.gallery-image-holder').mouseenter(function() {
+                $(this).find('.gallery-item-data').animate({opacity: 1}, 100, 'swing');
+            }).mouseleave(function() {
+                $(this).find('.gallery-item-data').animate({opacity: 0}, 300, 'swing');
+            });
+
+            window.addEventListener('load', function() {
+                var lightbox = new BLightBox({
+                    invoker: '.gallery-image-holder',
+                    close_text: 'Zavřít'
+                }, true);
+
+                var gallery_links = document.querySelectorAll('.gallery-image-holder'),
+                    gallery_links_i = gallery_links.length;
+
+            });
+        </script>
+    </div>
+</div>
+<div class="green-wrapper clearfix">
+    <div class="row column text-center" id="questions">
+        <h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
+        <a href="#" class="button secondary m-t-25  large rounded">RYCHLÝ FORMULÁŘ</a>
+    </div>
+</div>
+
+@endsection