Plugins » Slider Factory 1.0.1

Zoom + fade out
Topic Closed
SHan
27 Posts

Hi

is it possibile to have an effect in this way: 

Zoom out + slide horizontally 

My customer wishes to see the picture going back (so we will see more details around, the inverse of the actual zoom) and slide horizontal at the end of the time.

I could modify the code too, if you tell to me where and how.

Thank you a loto

4 years ago#9804

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

The transition effects are in SliderFactory.min.js, which is minified and therefore almost impossible to edit, BUT:

The developer scripts are also bundled, so these are the steps to activate them:

 

1. Find your addon folder. If you installed the plugin from inside the CMS (remote intallation), it is in /data/_addoncode/[some random string]
You will have to zap throug the folders in /data/_addoncode to find the correct one. (If you installed it manually from downloaded ZIP archive, well it's /addons/SliderFactory)

 

2. Edit SliderFactory.php, lines 25-27
from

    // $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory.dev.js';
    // $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory_init.js';
    $page->head_js[] =  $addonRelativeCode.'/SliderFactory.min.js';

to

    $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory.dev.js';
    $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory_init.dev.js';
    // $page->head_js[] =  $addonRelativeCode.'/SliderFactory.min.js';

change the // comments and insert the missing .dev

3. Now the developer Javascripts will be used, which aren't minified hence easier to edit. The transitions are in [addon folder]/dev/SliderFactory.dev.js beginning with line 421. For performance and animation possibilities, SliderFactory uses Velocity.js for animations. Velocity,js gains part of it's speed from a technique called "force feeding" for certain animations, which relies on start- and end-conditions (contrary to jQuery animations, which always query the DOM for the start condition). That's somewhat unfamiliar if you're new to velocity.js. But give it a go.

4. Once you added your transition function ( e.g. zoomOutSlide : function(slideWrapper, $slides, opts) {...} ) you will need to register it in the editor. That's in [addon folder]/SliderFactory_edit.js from line 357 to 368. Add an option line like
+ '<option value="zoomOutSlide">zoom out + slide</option>'

Good luck!

 

BTW: When changing the plugin code I strongly recommend a manual installation: Uninstall the remote installed version -> download the ZIP -> unpack it into[Typesetter installation root]/addons directory. Open Addon.ini and comment the line Addon_Unique_ID = 310  to become  ;Addon_Unique_ID = 310  Then install it via Admin Toolbox -> Plugins -> Manage -> Available -> SliderFactory -> Install. This way, your code will be safe from future updates and even won't be deleted when you uninstall the plugin.

Edited: 4 years ago#9806

SHan
27 Posts

Thank you juergen for your help. I'm "playing" with it and I can see changements.

The problem is I'd like to obtain a Kenburns effect (zoom in 6 seconds and a slide to left).

 

Thank you.

Edited: 4 years ago#9809

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

The problem is I'd like to obtain a Kenburns effect (zoom in 6 seconds and a slide to left).

While it should be possible using a custom Velocity.js transition, I belive it is easier to do the pan+zoom thing with CSS animation classes and use SliderFactory's default crossfade transition.
Give me a few hours... I'll look into it later

4 years ago#9810

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Sorry for the delay.

A basic example for SliderFactory's responsive background default combo .
Add this to your theme stylesheet:

/* Kenburns */

@keyframes kenburns-in {
  0%   { transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { transform:scale3d(1.5, 1.5, 1.5) translate3d(-12.5%, -12.5%, 0); }
}
@-webkit-keyframes kenburns-in {
  0%   { -webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { -webkit-transform:scale3d(1.5, 1.5, 1.5) translate3d(-12.5%, -12.5%, 0); }
}

.gpSlideWrapper.kenburns .gpSlide-in .filetype-responsive_background,
.gpSlideWrapper.kenburns .gpSlide-active .filetype-responsive_background,
.gpSlideWrapper.kenburns .gpSlide-out .filetype-responsive_background {
  -webkit-animation:10s ease-out forwards kenburns-in;
  animation:10s ease-out forwards kenburns-in;
}

Then add the kenburns class to the Slider Factory's wrapper section, select crossfade as Transition Effect and use e.g. 8000 as Interval.

Alternating zoom/pan directions could be done by using multiple @keyframes rules with different translate3d() values and :nth-child() pseudo classes for the Slides, like
.gpSlideWrapper.kenburns .gpSlide-in:nth-child(odd) .filetype-responsive_background ...

Maybe I find time to make a tutorial on my addons page for that (and/or pack it into future versions of the plugin).
Nice effect.
 

edit: OH, and... no plugin code changes are needed here.

Edited: 4 years ago#9811

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Here is a tutorial how to add the effects tou your SliderFactory (with demos and CSS for 9 effect variants).

I'll likely include this in the next SliderFactory version.

Edited: 4 years ago#9812

SHan
27 Posts

Hi Juergen.

 

great job! I see it just now and I tried to add this on my website. It works... of course :)

I have only another question: if I see the website on a monitor 1920 pixel wide resolution, pictures are cutted in a way (top and bottom) that the kenburns effect doesn't show (doesn't enter) these zones.

If I resize the window to simulate another more little wide resolution, I see the cutted zones top/bottom and ken burns works on the entire picture. I don't know If I explained myself... I could send to you an online example, but I prefer it in anonymous way... an email?

thank you.

 

Edited: 4 years ago#9859

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register