Merge pull request #23 from pengmaradi/feature/tailwind

chore: changed glightbox options
pengmaradi · Sep 11, 2024 · c208333 · c208333
2 parents a15911a + 3085b0a
commit c208333
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 58 deletions.
diff --git a/_data/ceramic.yml b/_data/ceramic.yml
@@ -5,13 +5,13 @@
 
 - name: Geisterkopf
   src: https://lh3.googleusercontent.com/pw/AP1GczOQ6CQ3maTbx9i3lbHHgwcws0r8CUy0IWy_NDs8CnL93XiNc0HO6zeO8UsSY2hiTFsleCO5hXym52IFxW4wqJqZot_iiO008zNId_tH6EmIlZ5hQbl4=
-  description: Geist ...
+  description: "Geisterhafte Begegnungen: Diese ausdrucksstarken Keramikköpfe laden zu einer faszinierenden Reise in eine andere Welt ein. Ihre einzigartigen Gesichtszüge und die raue Oberfläche verleihen ihnen eine geheimnisvolle Aura."
   lightbox: true
 
 - name: Krebs
   src: https://lh3.googleusercontent.com/pw/AP1GczOL30ZKcawQUaZLHT75uDPd3PvgrY3ho-R-jizrDvTVvcQsdnUeI9T4pLKx8U54bgUNoLxMvnwv8jp0Rvy59-QcBhdHG58I3Q6FuBENt1VMy_dRecAi=
-  description: Porzellan Auf Glasur, über 1200°C
-  lightbox: false
+  description: "Diese zarte Porzellanplatte besticht durch ihre detailreiche Darstellung von Krabben, die mit Pickment auf Glasur gemalt wurden."
+  lightbox: true
 
 - name: grüne Vase
   src: https://lh3.googleusercontent.com/pw/AP1GczPsVJCXh1sdQB0DT6LSnF1oBkUmUxPLLEAbVeWt64SwC2RJZO9SMbMXM18v1Lf9d8I5-4e2HkranFl5udk9YbK3HfVvOj1noFeVzgpa9moYuvwn1DT4=
@@ -30,20 +30,20 @@
 
 - name: Kücken
   src: https://lh3.googleusercontent.com/pw/AP1GczPkPlUeG3ZENnZkHB9NlEYMtxcpRwKv0K79BBALm-QoqunheX2UnEsVw68f_g4mWq1dRKLPt7NXHujkav5dRS9ISHTV07J2bYXE5Sq9L3-XYBQIS_Ri=
-  description: xiao ji
+  description: Kücken
   lightbox: false
 
 - name: Fisch
   src: https://lh3.googleusercontent.com/pw/AP1GczP5A3NF1jQhvvyCBJaIdyJbeO4K9u0Da76lMLq70UbHU75ma64pixxJ-cBp4j70ClwEzb7bWvmlKyH_dCc6m7n8U2I0hTPkgT0I0w2ZYPuvQaKahTnR=
-  description: yu
+  description: Fisch
   lightbox: false
 
 - name: Krähen
   src: https://lh3.googleusercontent.com/pw/AP1GczP9r_OP9dnmUN8G8csiAULujYUMbhalM8PihemCWKgsVPP7-jjLh31bZSzXRn0X-cH82cePqzF3Wxr6yr0vrTwwl8Gp3YIk1be-FhyesGAiYrTU5Fqz=
-  description: wu ya
+  description: Krähen
   lightbox: false
 
 - name: Orchideen
   src: https://lh3.googleusercontent.com/pw/AP1GczNqm9x5iZvv1VC1KeaCm677EdMMxsTcIoRt3np4TDOeaRlw4_mW_khMAKNY61ljcgJR5sGVZ-Kix_tZz1LkdvL5hqiJEINij7a_YV9Svj8XRaqLzks9=
-  description: lan hua
+  description: Cambria Orchidee
   lightbox: false
diff --git a/_includes/ceramic.html b/_includes/ceramic.html
@@ -1,19 +1,20 @@
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
     <div class="mb-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
-        x-data="glightbox">
+        x-data="gLightbox">
         {% for item in site.data.ceramic %}
         {% if item.lightbox %}
         <a class="glightbox cursor-zoom-in group duration-1000 transition-all transform border rounded p-2"
-            x-intersect="$el.classList.add('fadeInUp')" href="{{ item.src }}w800">
+            x-intersect="$el.classList.add('fadeInUp')" href="{{ item.src }}w800"
+            data-glightbox="title: {{item.name}}; description: {{ item.description }};">
             {% else %}
             <div class="group duration-1000 transition-all transform border rounded p-2 relative"
                 x-intersect="$el.classList.add('fadeInUp')">
                 {% endif %}
                 <h5 class="mb-2 text-center group-hover:text-gray-200">{{ item.name }}</h5>
-                <div class="relative h-52 w-full">
+                <div class="relative h-52 w-full overflow-hidden">
                     <img src="{{ item.src }}w500" class="hidden h-auto w-full group-hover:sepia rounded" width="400"
                         height="500" alt="{{ item.name }}" title="{{ item.description }}" />
-                    <div class="absolute inset-0 w-full h-full"
+                    <div class="absolute inset-0 w-full h-full transition duration-500 hover:scale-125"
                         style="background: url({{ item.src }}w500);background-size: cover; background-position: center;">
                     </div>
                 </div>

diff --git a/assets/main.css b/assets/main.css
diff --git a/assets/main.js b/assets/main.js
diff --git a/src/index.pcss b/src/index.pcss
@@ -115,6 +115,10 @@ body {
   @apply mt-4;
 }
 
+.gslide-desc {
+    @apply dark:text-black;
+}
+
 .dark svg.fill-current {
   fill: #ffffff; /* White for dark mode */
 }

diff --git a/src/js/Glightbox.js b/src/js/Glightbox.js
@@ -2,55 +2,17 @@ import Alpine from "alpinejs"
 import GLightbox from 'glightbox'
 import 'glightbox/dist/css/glightbox.css'
 
-Alpine.data('glightbox', () => ({
+Alpine.data('gLightbox', () => ({
   lightbox: null,
-  gallery: [
-    {
-        type:'image',
-        video: '',
-        img: 'https://mdbcdn.b-cdn.net/img/new/slides/086.webp',
-        alt: 'the first image',
-        tite: 'hallo welt',
-        description: 'this is about glightbox',
-    },
-    {
-        type:'video',
-        video: 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
-        img: 'https://mdbcdn.b-cdn.net/img/new/slides/006.webp',
-        alt: 'the second test',
-        tite: 'hallo welt again',
-        description: 'this is about glightbox',
-    },
-    {
-        type:'image',
-        video: '',
-        img: 'https://mdbcdn.b-cdn.net/img/new/slides/087.webp',
-        alt: 'the first image',
-        tite: 'hallo nina',
-        description: 'this is about glightbox',
-    },
-    {
-        type:'image',
-        video: '',
-        img: 'https://mdbcdn.b-cdn.net/img/new/slides/088.webp',
-        alt: 'the first image',
-        tite: 'hallo youtube',
-        description: 'this is about glightbox',
-    },
-    {
-        type:'video',
-        video: 'https://vimeo.com/115041822',
-        img: 'https://mdbcdn.b-cdn.net/img/new/slides/007.webp',
-        alt: '007',
-        tite: '007',
-        description: 'just testing',
-    }
-  ],
+  gallery: [],
   init() {
     this.$nextTick(() => {
       GLightbox({
-          loop: true, 
-          autoplayVideos: true
+        openEffect: 'fade',
+        //width: '100%',
+        touchNavigation: true,
+        type: 'image',
+        zoomable: true,
       })
     })
   }