añadir nuevo efecto zoom a vinaora nivo slider

Para añadir un nuevo efecto a vinaora nivo slider, seguiremos unos pasos. El efecto que voy a añadir es un zoom sobre la imagen total, no un zoom sobre la imagen como he visto en algunos plugins sino sobre el recuadro y la imagen total, no se si me explico bien lo mejor es verlo, y aqui teneis el enlace de la página:

http://victorcabralvida.esy.es/

No es muy común ya que he buscado y no he encontrado mucho, solo en una página y no era con el plugin nivo slider, estaba hecho con transiciones el paso de las imágenes, en nivo slider esta hecho con display, creo que es así, tampoco llevo mucho tiempo programando y no soy un entendido.

Bueno, empecemos con los pasos:

1-añadir este código en el archivo situado en /public_html/media/mod_vt_nivo_slider/js/jquery.nivo.slider.js en tu servidor externo,
entre las lineas 399 y 617, entre alguno de los efectos que vienen por defecto en el nivo slider, o al final en la linea 617 después de la llave "}" de cierre del último else if.

Código a copiar:

 else if(currentEffect === 'zoomIn'){//efecto creado por victor
                createSlices(slider, settings, vars);
                
                    var slice = $('.nivo-slice:first, .nivo-caption .nivo-heading, .nivo-caption > div',slider);
                    
                    slice.css({
                    'animation-name': 'zoom',
                    'animation-iteration-count': '1',
                    'animation-duration': '6s'
                    }); 
                    var main_image = $('.nivo-main-image', slider);
                    main_image.css({
                    'visibility': 'hidden'
                    });
                  
                        slice.hover(
                                function(){
                                    $(".nivo-main-image").css('visibility', 'visible');
                                    $(".nivo-slice:first").css('visibility', 'hidden');
                                }
                                ,function(){
                                    $(".nivo-main-image").css("visibility", "hidden");
                                    $(".nivo-slice:first").css('visibility', 'visible');
                                });
                    slice.animate({ opacity: '1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
                
            }

2-Ahora vamos al archivo situado  en: /public_html/modules/mod_vt_nivo_slider/helper.php y en la linea 112:

en la función addNivoScript cambiamos la ruta, en vez del archivo jquery.nivo.slider.min.js ponemos el archivo que se ve en la imagen en total la ruta queda así: 'media/mod_vt_nivo_slider/js/jquery.nivo.slider.js'.

3-Ahora vamos al archivo que esta en la ruta:  /public_html/modules/mod_vt_nivo_slider/language/en-GB/en-GB.mod_vt_nivo_slider.ini 

.Y entre la linea 127 y 142 o en una nueva linea (143), añadimos el código que se ve en la imagen en la linea 144:

MOD_VT_NIVO_SLIDER_OPTION_EFFECT_ZOOMIN="zoomIn".

4-Ahora vamos al archivo que esta en la ruta: /public_html/modules/mod_vt_nivo_slider/mod_vt_nivo_slider.xml. Y añadimos el siguiente código entre las lineas 58 y 73 o en una nueva linea (74), dentro de la etiqueta <field></field> donde están agrupadas las otras opciones:

<option value="zoomIn">MOD_VT_NIVO_SLIDER_OPTION_EFFECT_ZOOMIN</option>

5-Y por último vamos a crear las dos clases CSS que vamos a utilizar en el paso 1. Si la plantilla tiene para añadir CSS en la página introducimos ahí el código, si no vamos a la ruta:  /public_html/templates/txzmash/css , en vez de txzmash accedemos a la plantilla (protostar, etc...) que estemos usando para el sitio web. Y en el archivo templates.css introducimos el código.

@keyframes zoom{

0%{

opacity: 0;

transform: scale3d(.3,.3,.3);

}

50%{

transform: scale3d(1,1,1);

opacity: 1;

}

}

Y ya esta, ya tenemos el efecto incluido, y la opción de elegirlo entre las opciones que ofrece el módulo Vinaora Nivo Slider.