HubSpot CMS

Responsive Image Gallary

You create the most beautiful gallery in a few minutes and enjoy the result. Just add images,and make your website attractive and good-looking to attract the attention of visitors and just give elegance to your site.Image Gallery is based on the "custom simple lightbox". You can Add unlimited images on your HubSpot sites, lightbox image preview layout, it also provides masonry effect to adjust your image size according to the screen resolution.Images are can be added, previewed and re-ordered by drag and drop.

Created by: BitCot

Tags: Galleries

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

3 Recommendations

View on:

GitHub

HTML + HUBL
<div class="gallery masonryeffectcontent{{ module.show_grid_layout }}"> 
{% for item in module.images_gallary %}
	{% if item.big_image.src %}		
    <a href="{{ item.big_image.src }}" class="big masonry_item">
      {% if item.thumb_image.src %}
        <img src="{{ item.thumb_image.src }}" alt="{{ item.thumb_image.alt }}" title="{{ item.thumb_image.alt }}">
      {% endif %}
    </a>
	{% endif %}
{% endfor %}  
</div>

          
        
CSS
          
            .masonryeffectcontent { /* Masonry container */

  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
   margin: 1.5em;
    padding: 0;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    font-size: .85em;
}
.masonryeffectcontent3 {
  -webkit-column-count: 3;
  -moz-column-count:3;
  column-count: 3;
}

.masonryeffectcontent4 {
  -webkit-column-count: 4;
  -moz-column-count:4;
  column-count: 4;
}

.masonryeffectcontent5 {
  -webkit-column-count: 5;
  -moz-column-count:5;
  column-count: 5;
}

.masonryeffectcontent6 {
      -webkit-column-count: 6;
  -moz-column-count:6;
  column-count: 6;
}
.masonry_item {
    display: inline-block;
    background: #fff;
    padding: 5px;
    margin: 0 0 10px;
    width: 100%;
    -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.masonry_item img{max-width:100%; width: 100%}

@media only screen and (max-width: 320px) {
    .masonryeffectcontent, .masonryeffectcontent3, .masonryeffectcontent4, .masonryeffectcontent5, .masonryeffectcontent6 {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 321px) and (max-width: 768px){
     .masonryeffectcontent, .masonryeffectcontent3, .masonryeffectcontent4 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
  
  .masonryeffectcontent5, .masonryeffectcontent6 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonryeffectcontent, .masonryeffectcontent3, .masonryeffectcontent4 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
  
  .masonryeffectcontent5, .masonryeffectcontent6 {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
@media only screen and (min-width: 1201px) {
    .masonryeffectcontent3 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    .masonryeffectcontent4 {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
  
   .masonryeffectcontent5 {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
  
   .masonryeffectcontent6 {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }
}
          
        
JS
          
            jQuery( document ).ready( function() {
  setTimeout( function() {
    var gallery = jQuery('.gallery a').simpleLightbox();
 }, 1200);
});
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Responsive Image Gallary


Description:

You create the most beautiful gallery in a few minutes and enjoy the result. Just add images,and make your website attractive and good-looking to attract the attention of visitors and just give elegance to your site.Image Gallery is based on the "custom simple lightbox". You can Add unlimited images on your HubSpot sites, lightbox image preview layout, it also provides masonry effect to adjust your image size according to the screen resolution.Images are can be added, previewed and re-ordered by drag and drop.

Template Usage code:

{% module "module_158030027704455" path="/Responsive Image Gallary with Masonry", label="Responsive Image Gallary with Masonry" %}

Features:

  • Responsive and touch-friendly.
  • Image preloading and loading spinner.
  • CSS3 powered animations.
  • Keyboard / Touch swipe navigation.
  • Custom image aspect ratio.
  • Multiple Column Layouts
  • LightBox Pop-up Style
  • Images Order Setting Like Ascending, Descending & Shuffle
  • Easy To Implement Anywhere Into Hubspot
  • Easily Customization
  • Multi-Language supporting (Russian, Spanish, English, English-UK)

Support:

If you find any issue or need help, please ask us. We are active in https://help.hubspot.com/ Support Forum.

 
3 Recommendations

BitCot

www.bitcot.com

BitCot delivers digital products for all businesses by building mobile apps, Web tools, SaaS platforms to drive digital growth for success.

View BitCot’s Gallery (5 Entries)

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co