Page Text: 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.
?
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 LIVE DEMO
HTML + HUBL
{% for item in module.images_gallary %} {% if item.big_image.src %}
{% if item.thumb_image.src %} 
{% endif %} {% endif %} {% endfor %}
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); });
ADDITIONAL FILES