{% require_css %}
<!-- Gallery CSS --><style>{#MakeGalleryThreeWideandaddpaddingarroundit.#}.gallery{padding:2em;columns:3;width:100%;}.gallery__image{display:block;max-width:100%;margin-bottom:1em;}{#Makesurethegalleryoverlaytakesuptheentirescreenandsitesontopofevenrything.#}.gallery__overlay{position:fixed;top:0;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:100000;}{#CloseButton#}.gallery__overlay.close{position:absolute;top:2rem;right:2rem;background:transparent;color:#fff;font-size:2rem;}{#Centertheimageandtextinonefellswoop.Weusetranslatetoensuretheimageisalwayscentered.#}.gallery__image--wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:1000px;color:#fff;}</style>{% end_require_css %}
<!-- Gallery Markup --><divclass="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 %}
<aclass="gallery__image"href="{{ scimg.image.url }}"title="{{ scimg.image_description }}"><imgsrc="{{ 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 anywheree.preventDefault();// grab the url of the link clicked as well as the titlevarurl=$(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 anywheree.preventDefault();// Hide the overlay and then remove it from the DOM.$('.gallery__overlay').hide('400',function(){$(this).remove();});});});</script>{% end_require_js %}
Comments (0)
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.