Snippets

Bluleadz Super Cool HUBDB Image Gallery

Updated by Chad Pierce
View revision

File super-cool-hubdb-image-gallery.html Modified

  • Ignore whitespace
  • Hide word diff 
+{% require_css %}
 <!-- Gallery CSS -->
-
 <style>
     
-    .gallery {
+    {# Make Gallery Three Wide and add padding arround it. #}
+    .gallery { 
         padding: 2em;
         columns: 3;
         width: 100%;
-    }
+    } 
     
     .gallery__image {
         display: block;
         max-width: 100%;
         margin-bottom: 1em;
     }
-    
+    {# Make sure the gallery overlay takes up the entire screen and sites on top of evenrything. #}
     .gallery__overlay {
         position: fixed;
         top: 0;
         background: rgba(0,0,0,.8);
         z-index: 100000;
     }
+    {# Close Button #}
     .gallery__overlay .close {
         position: absolute;
         top: 2rem;
         color: #fff;
         font-size: 2rem;
     }
+    {# Center the image and text in one fell swoop. We use translate to ensure the image is always centered. #}
     .gallery__image--wrapper {
         position: absolute;
         top: 50%;
         color: #fff; 
     
     }
-    
 </style>
+{% end_require_css %}
 
 <!-- Gallery Markup -->
 
 <div class="gallery">
+    {# Pull the gallery hubdb from hubspot and set it as a variable called  gallery. #}
     {% set gallery = hubdb_table_rows('677222') %}
+    {# loop over the info and create a linked image with the image url and  #}
     {% for scimg in gallery %}
-        <a class="gallery__image" href="{{ scimg.image.url|replace('/hubfs/','/hs-fs/hubfs/')}}?width=1200" title="{{ scimg.image_description }}">
-            <img src="{{ scimg.image.url|replace('/hubfs/','/hs-fs/hubfs/')}}?width=550" width="550" alt="{{ scimg.image_description }}">
+        <a class="gallery__image" href="{{ scimg.image.url }}" title="{{ scimg.image_description }}">
+            <img src="{{ scimg.image.url }}" width="550" alt="{{ scimg.image_description }}">
         </a>
     {% endfor %}
     
 </div>
     
     
-
 {% require_js %}
+{# reqquire_js is to ensure the javascript gets added to the footer #}
 <!-- Gallery JS -->
 <script>
     $(function(){
-        
+        // If you click the gallery image
         $('.gallery__image').on('click', function(e){
+            // dont let the link go anywhere
             e.preventDefault();
-            
+            // grab the url of the link clicked as well as the title
             var url = $(this).attr('href'),
                 title = $(this).attr('title');
-            
+            // create and append a image popup with the url and title that we grabed.
             $('body').append('<div class="gallery__overlay"><button class="close">close</button><siv class="gallery__image--wrapper"><img src="' + url + '" alt=""><p>' + title + '</p></div></div>');
-            
-            
         });
-        
+        // When you click the close button
         $('body').on('click', 'button.close', function(e){
+            // dont let the close button link anywhere
             e.preventDefault();
-            
+            // Hide the overlay and then remove it from the DOM.
             $('.gallery__overlay').hide('400', function(){
                $(this).remove(); 
-            });
-            
+            });  
         });
-        
     });
-</script>
+</script>
+{% end_require_js %}
Created by Chad Pierce
View revision

File super-cool-hubdb-image-gallery.html Added

  • Ignore whitespace
  • Hide word diff 
+<!-- Gallery CSS -->
+
+<style>
+    
+    .gallery {
+        padding: 2em;
+        columns: 3;
+        width: 100%;
+    }
+    
+    .gallery__image {
+        display: block;
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
+    
+    .gallery__overlay {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,.8);
+        z-index: 100000;
+    }
+    .gallery__overlay .close {
+        position: absolute;
+        top: 2rem;
+        right: 2rem;
+        background: transparent;
+        color: #fff;
+        font-size: 2rem;
+    }
+    .gallery__image--wrapper {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+    
+        transform: translate(-50%, -50%);
+        width: 100%;
+        max-width: 1000px;
+    
+        color: #fff; 
+    
+    }
+    
+</style>
+
+<!-- Gallery Markup -->
+
+<div class="gallery">
+    {% set gallery = hubdb_table_rows('677222') %}
+    {% for scimg in gallery %}
+        <a class="gallery__image" href="{{ scimg.image.url|replace('/hubfs/','/hs-fs/hubfs/')}}?width=1200" title="{{ scimg.image_description }}">
+            <img src="{{ scimg.image.url|replace('/hubfs/','/hs-fs/hubfs/')}}?width=550" width="550" alt="{{ scimg.image_description }}">
+        </a>
+    {% endfor %}
+    
+</div>
+    
+    
+
+{% require_js %}
+<!-- Gallery JS -->
+<script>
+    $(function(){
+        
+        $('.gallery__image').on('click', function(e){
+            e.preventDefault();
+            
+            var url = $(this).attr('href'),
+                title = $(this).attr('title');
+            
+            $('body').append('<div class="gallery__overlay"><button class="close">close</button><siv class="gallery__image--wrapper"><img src="' + url + '" alt=""><p>' + title + '</p></div></div>');
+            
+            
+        });
+        
+        $('body').on('click', 'button.close', function(e){
+            e.preventDefault();
+            
+            $('.gallery__overlay').hide('400', function(){
+               $(this).remove(); 
+            });
+            
+        });
+        
+    });
+</script>
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.