Pregunta ¿Hay alguna manera de pasar una función de inicialización a una presentación de diapositivas de Orbit?


Resolví mi problema original, pero me pregunto si hay una solución más elegante. Estoy usando la Órbita de la Fundación para crear una presentación de diapositivas. Esta no es una presentación de diapositivas simple, es una presentación de diapositivas en la que cada diapositiva tiene un subtítulo de datos definido, y dentro de este subtítulo de datos hay un HTML que necesita cargar un cuadro de diálogo modal.

Si está utilizando Foundation, inmediatamente piensa en utilizar la biblioteca Reveal para mostrar un diálogo modal, y yo lo haría, pero los requisitos requieren el uso de prettyPhoto. (Esos son los requisitos). Bueno, el problema es que los elementos en el subtítulo de datos no se ven afectados por la llamada de inicialización original a:

$("a[rel^='prettyPhoto']").prettyPhoto();

Lo que tengo que hacer es asegurarme de inicializar cada título de datos a medida que se carga. Bueno, aquí está el problema. He resuelto esto para las transiciones de diapositivas mediante el uso del evento afterSlideChange, pero el problema es la primera diapositiva. Necesito llamar a este método para la primera diapositiva que se muestra.

Aquí está el código que resuelve este problema:

<script type="text/javascript">
$(window).load(function () {
    $('#featured').orbit({
        afterSlideChange:function () {
            $("a[rel^='prettyPhoto']").prettyPhoto({
                default_width:640,
                default_height:500,
                theme:'light_square'
            });
        }, // empty function
        fluid:true                         // or set a aspect ratio for content slides (ex: '4x3')
    });
    $("a[rel^='prettyPhoto']").prettyPhoto({
        default_width:640,
        default_height:500,
        theme:'light_square'
    });
});
</script>

¿Hay una mejor manera de hacerlo sin tener que duplicar ese código? ¿Debo definir un evento de "initializeSlide", o hay alguna respuesta que me falta?


11
2018-04-12 03:02


origen


Respuestas:


El control deslizante Órbita no expone tantos métodos. Afortunadamente, hay algunas soluciones simples.

Por ejemplo, podrías configurarlo así:

$(window).load(function () {
    var sliderChanged = (function sliderChanged(prevActive, active) {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            default_width: 640,
            default_height: 500,
            theme: 'light_square'
        });
        return sliderChanged;
    }());
    jQuery('#featured').orbit({
        afterSlideChange: sliderChanged,
        fluid: true
    });
});

3
2018-05-24 12:26



aquí creo que puedes usar load event desde jquery

 <script type="text/javascript">
  $(window).load(function () {
      $('#featured').orbit({fluid:true});
      $("a[rel^='prettyPhoto']").load(function(){
        $(this).prettyPhoto({
          default_width:640,
          default_height:500,
          theme:'light_square'
        });
      });
  });
 </script> 

1
2018-05-29 19:46



Estás usando After Slide Change

referirse a Orbit documentación

'afterSlideChange function(){}, //Empty Function for you to use after slide change'

Entonces esta llamada vaciará la función y tendrá que llamarla una y otra vez.

Ahora, mi pregunta es por qué estás haciendo esto, ¿alguna razón en particular? Si no, simplemente quítalo.

y según mi percepción, la respuesta de Rohit anterior hará el resto ...

Espero que esto vaya :)


0
2018-05-31 09:32



Con la actualización de Foundation 4, ahora hay una orbit:ready evento. El evento se dispara cuando se carga el control deslizante.


0
2017-09-05 19:24