Webflow Workshop - Beyond basics: Advanced components customization

Community resources Webflow events
10

thanks to @Anna_Kelian for the awesome gallery of tricks :slight_smile:

https://preview.webflow.com/preview/components-and-elements?preview=3b154932ded3b59038a81dbd3d0019d9

Dynamic Embed code for the dynamic lightbox gallery:

<div style="display:none;">
  <span class="full-photo">(photo dynamic field goes here)</span>
  <span class="photo-caption">(caption dynamic field goes here)</span>
</div>

<script>

	var fullPhoto = "",
  		fullCaption = ""; 

	$('.photo-thumb').on('click', function(){
  	$('body').addClass('modalOpen');
  	fullPhoto = $(this).find('.full-photo').text()
    fullCaption = $(this).find('.photo-caption').text()
    $('.gallery-modal-photo').attr('src',fullPhoto);
    $('.full-caption').text(fullCaption);
  	$('.gallery-modal').fadeIn();
  })
  
  $('.close-modal').on('click', function() {
  	$('.gallery-modal').fadeOut();
    $('body').removeClass('modalOpen');
  });

</script>
2 Likes