Streaming live at 10am (PST)

Cycle2 JS slideshow zoom and fade transition effects


#1

This is the current Webflow preview site which it needs to be integrated:

https://preview.webflow.com/preview/kwons?utm_source=kwons&preview=1af71086097d748be9de5c5b27c5f8ae

The hero slideshow should behave as follows:

  1. Loading - Wait until image is loaded
  2. Image Start - bigger photo (130%) (ease out
  3. Image End - Scale to fit (100%) ease in
  4. Transition - to next slide: fade / cross dissolve

(See this website for example: http://www.topkickonline.com )

Some advanced functions can be found here for Cycle2 script:

http://jquery.malsup.com/cycle/

http://jquery.malsup.com/cycle/adv.html

http://jquery.malsup.com/cycle2/

Script in footer code:

<!–– DYNAMIC GALLERIES ––>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js></script>

<script>

$(document).ready( function() {

// init Isotope

var $grid = $('.grid').isotope({

itemSelector: '.item'

});

// layout Isotope after each image loads

$grid.imagesLoaded().progress( function() {

$grid.isotope('layout');

});

// store filter for each group

var filters = {};

$('.filters').on( 'click', '.button', function() {

var $this = $(this);

// get group key

var $buttonGroup = $this.parents('.button-group');

var filterGroup = $buttonGroup.attr('data-filter-group');

// set filter for group

filters[ filterGroup ] = $this.attr('data-filter');

// combine filters

var filterValue = concatValues( filters );

// set filter for Isotope

$grid.isotope({ filter: filterValue });

});

// change is-checked class on buttons

$('.button-group').each( function( i, buttonGroup ) {

var $buttonGroup = $( buttonGroup );

$buttonGroup.on( 'click', 'button', function() {

$buttonGroup.find('.is-checked').removeClass('is-checked');

$( this ).addClass('is-checked');

});

});

});

// flatten object by concatting values

function concatValues( obj ) {

var value = '';

for ( var prop in obj ) {

value += obj[ prop ];

}

return value;

}

</script>

#2

#3