This is the current Webflow preview site which it needs to be integrated:
The hero slideshow should behave as follows:
- Loading - Wait until image is loaded
- Image Start - bigger photo (130%) (ease out
- Image End - Scale to fit (100%) ease in
- 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>