Modularize carousel

luost26 · Sep 30, 2024 · 15bfb4e · 15bfb4e
1 parent e17d57a
commit 15bfb4e
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 40 deletions.
diff --git a/_includes/widgets/carousel.html b/_includes/widgets/carousel.html
@@ -0,0 +1,31 @@
+<div>
+    <div id="{{ include.id | slugify }}" class="carousel slide" data-ride="carousel">
+        <ol class="carousel-indicators">
+            {% for item in include.images %}
+            <li data-target="#{{ include.id | slugify }}" data-slide-to="{{ forloop.index0 }}" {% if forloop.index == 1 %}class="active"{% endif %}></li>
+            {% endfor %}
+        </ol>
+        <div class="carousel-inner" style="height: {{ include.height }};">
+            {% for item in include.images %}
+            <div class="carousel-item {% if forloop.index == 1 %}active{% endif %}">
+                {% if item.link %}<a href="{{ item.link }}" target="_blank">{% endif %}
+                <div class="lazy d-block rounded-sm" data-src="{{ item.src }}" style="height: {{ include.height }};">
+                </div>
+                <div class="carousel-caption d-none d-md-block">
+                    <h5>{{ item.title }}</h5>
+                    <p>{{ item.desc }}</p>
+                </div>
+                {% if item.link %}</a>{% endif %}
+            </div>
+            {% endfor %}
+        </div>
+        <div class="carousel-control-prev" type="button" data-target="#{{ include.id | slugify }}" data-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+        </div>
+        <div class="carousel-control-next" type="button" data-target="#{{ include.id | slugify }}" data-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+        </div>
+    </div>
+</div>
diff --git a/_showcase/photo_collection.md b/_showcase/photo_collection.md
@@ -2,44 +2,16 @@
 show: true
 width: 4
 date: 2018-09-12 00:01:00 +0800
+height: 300px
+images:
+- src: https://picsum.photos/seed/first1111/800/800
+  title: Photo 1
+  desc: Description 1.
+  link: https://picsum.photos/
+- src: https://picsum.photos/seed/second22/800/800
+  title: Photo 2
+  desc: Description 2
+- src: https://picsum.photos/seed/third33/800/800
 ---
 
-<!--
-Don't forget to change all the occurences of "carouselExampleCaptions".
-Otherwise, if there are multiple carousels on the same page, they will not work.
--->
-
-
-<div>
-    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
-    <div class="carousel-inner" style="height: 300px;">
-        <div class="carousel-item active">
-            <div class="d-block rounded-sm" style="height: 300px; overflow: hidden">
-                <img data-src="https://picsum.photos/seed/first111/800/800" class="lazy d-block w-100" src="{{ '/assets/images/empty_300x200.png' | relative_url }}">
-            </div>
-            <div class="carousel-caption d-none d-md-block">
-                <h5>Photo Collection</h5>
-                <p>You can even put a photo carousel here!</p>
-            </div>
-        </div>
-        <div class="carousel-item">
-            <div class="d-block rounded-sm" style="height: 300px; overflow: hidden">
-                <img data-src="https://picsum.photos/seed/second2/800" class="lazy d-block w-100" src="{{ '/assets/images/empty_300x200.png' | relative_url }}">
-            </div>
-        </div>
-        <div class="carousel-item">
-            <div class="d-block rounded-sm" style="height: 300px; overflow: hidden">
-                <img data-src="https://picsum.photos/seed/third33/800" class="lazy d-block w-100" src="{{ '/assets/images/empty_300x200.png' | relative_url }}">
-            </div>
-        </div>
-    </div>
-    <div class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-    </div>
-    <div class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-    </div>
-    </div>
-</div>
+{% include widgets/carousel.html id=page.id images=page.images height=page.height %}
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -51,6 +51,14 @@ img.lazy {
     min-height: 80px;
 }
 
+div.lazy {
+    background-image: url('images/loading.gif');
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: 50px 50px;
+    min-height: 80px;
+}
+
 .badge-publication {
     font-size: 100%;
 }

diff --git a/assets/js/common.js b/assets/js/common.js
@@ -1,6 +1,17 @@
 // aHR0cHM6Ly9naXRodWIuY29tL2x1b3N0MjYvYWNhZGVtaWMtaG9tZXBhZ2U=
 $(function () {
-    $('.lazy').Lazy({
+    $('img.lazy').Lazy({
+        scrollDirection: 'vertical',
+        effect: 'fadeIn',
+        effectTime: 300,
+        visibleOnly: true,
+        placeholder: "",
+        onError: function(element) {
+            console.log('[lazyload] Error loading ' + element.data('src'));
+        },
+    })
+
+    $('div.lazy').Lazy({
         scrollDirection: 'vertical',
         effect: 'fadeIn',
         effectTime: 300,
@@ -9,7 +20,12 @@ $(function () {
         onError: function(element) {
             console.log('[lazyload] Error loading ' + element.data('src'));
         },
+        afterLoad: function(element) {
+            // set the style to background-size: cover; 
+            element.css('background-size', 'cover');
+        },
     })
+
     $('[data-toggle="tooltip"]').tooltip()
 
     var $grid = $('.grid').masonry({