Monitor Reply

Support

Is there a possibility to add Slide In from Top and Slide in from Bottom?

Permalink Browser Info Environment June 19, 2013 at 11:21 AM

I have two slide shows on my home page. One of the slide shows I have the images slide in from the left - thus I am using the option SlideIn Left.

the second slide show I wanted the images to slide in from the top. This would make the image move vertically instead of horizontally but there is no Slide IN from the top nor a slide in from the Bottom. Any possibility of adding the vertical slide in options for the slide functionality.

thanks again for a great product!!!

Type:	Discussion
Status:	New

shahroq replied on Jun 19, 2013 at 12:42 pm Permalink Reply 1 Attachment

Hello,
slideInUp and slideInDown effects are not included at the nivo slider default effect list.
http://dev7studios.com/nivo-slider/#/documentation... (plugin usage section).
But you can easily create these two effect by modifying 'slidInLeft' effect. This is a guideline for adding new effects:

1- First add these two effect to the list of effect at the block editing interface, open \whale_nivo_slider\blocks\whale_nivo_slider\controller.php, at line 25 add these effect into the $effects array:

public $effects = array('random','fold','fade',
                  'sliceDown','sliceDownLeft','sliceUp','sliceUpLeft','sliceUpDown',
                  'sliceUpDownLeft','slideInRight','slideInLeft',
                  'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse'
                  ,'slideInUp','slideInDown'
                  );

now when you open the block editing UI, you should see new effect added to the effects combobox.

2- Open \whale_nivo_slider\blocks\whale_nivo_slider\js\jquery.nivo.slider.js file, at line 510 before

} else if(currentEffect === 'boxRandom'){

insert these lines of code:

//////Begin:
            } else if(currentEffect === 'slideInDown'){
                createSlices(slider, settings, vars);
                firstSlice = $('.nivo-slice:first', slider);
                firstSlice.css({
                    'width': '100%',
                    'opacity': '1',
               'top': slider.height()
                });
                firstSlice.animate({ top: '0px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
            } else if(currentEffect === 'slideInUp'){
                createSlices(slider, settings, vars);
                firstSlice = $('.nivo-slice:first', slider);
                firstSlice.css({
               'width': '100%',

Viewing 15 lines of 29 lines. View entire code block.

 
//////Begin:
            } else if(currentEffect === 'slideInDown'){
                createSlices(slider, settings, vars);
 
                firstSlice = $('.nivo-slice:first', slider);
                firstSlice.css({
                    'width': '100%',
                    'opacity': '1',
               'top': slider.height()
                });
 
                firstSlice.animate({ top: '0px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
            } else if(currentEffect === 'slideInUp'){
                createSlices(slider, settings, vars);
 
                firstSlice = $('.nivo-slice:first', slider);
                firstSlice.css({
               'width': '100%',
                    'height': '0px',
                    'opacity': '1',
                    'top': '',
                    'bottom': '0px'
                });
 
                firstSlice.animate({ height: slider.height() + 'px' }, (settings.animSpeed*2), '', function(){ 
                    // Reset positioning
                    firstSlice.css({
                        'top': '0px',
                        'bottom': ''
                    });
                    slider.trigger('nivo:animFinished'); 
                });
//////End.

Just bare in mind the js nivo plugin i used at the package is pack version, you can download the original one (ver 3.2) form nivo slider site and replace that with packed one.
I also attached the modified js file to this post too. you can easily remove jquery.nivo.slider.pack.js and copy this modified version to js folder.

Whale Nivo Slider

Support

Is there a possibility to add Slide In from Top and Slide in from Bottom?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post