Streaming live at 10am (PST)

CMS Slideshow JS: zoom in, then fade/cross dissolve transition


#1

I believe for a seasoned developer it should be a relatively quick tweak (1-1.5hrs). Let me know if your pricing. The slideshow exists but only has a zoom effect when it first appears and when scrolls into view. I need the zoom/fade on every slide in the slideshow.

I’ll be looking for a developer moving forward for future projects. Usually translate designs to live sites and/or design and develop a final website project. I just don’t have the time anymore to dedicate, but will likely be finding more clients that have a need for website development work. You can see some of my past work: www.Zen-Creative.com

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>

![unknown.png](blob:https://forum.webflow.com/411ef058-b113-45e9-bb6f-f8b8505492f2)

![unknown_1.png](blob:https://forum.webflow.com/18a6cbf1-baed-4fbe-b3ec-c77d5027a3f9)

#2

@jawtab

Hi,

I can help.

You can reach me on Skype: cisin.justin or Email: justin@cisinlabs.com so that we can discuss this further.

Justin
+14074139057