Actualmente estoy tratando de integrar social botones de compartir en mi fancybox imagen de popups. Hay un JsFiddle que Fancybox ha creado para demostrar cómo puede hacer esto…pero estoy usando el «ayudante» > jquery.fancybox-buttons.js (ver aquí). ¿Cómo puedo combinar ambas soluciones personalizadas, de modo que cuando la fancybox de la imagen aparece que tiene el social botones de compartir debajo (como en el JSFiddle & tiene el botón de ayudantes?

He aquí un ejemplo de mi página HTML para el Fancybox Galería:

<div id="painting" class="content-pages">

<p>
    <a class="fancybox-buttons" href="painting/2011_b.jpg" data-fancybox-group="paintings" title="Sed vel sapien vel sem uno"><img src="painting/2011_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/beginnings-3_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings III"><img src="painting/beginnings-3_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-i_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings I "><img src="painting/t-beginnings-i_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-ii_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings II"><img src="painting/t-beginnings-ii_s.jpg" alt="" /></a>
</p>
</div>
InformationsquelleAutor Forb3s | 2013-02-05

1 Comentario

  1. 2

    Primera, usted necesita para cargar el js y css botón de ayudantes de archivos (que se encuentra en los ayudantes subdirectorio de la descarga).

    Segundo, añadir los botones de ayudante de opción a la secuencia de comandos personalizada. Es posible que desee deshabilitar el defecto close y arrows los botones, así que usted utilice los botones auxiliares sólo.

    Para que el código se tiene que agregar debería ser :

    //other options
    helpers: {
        title: {
            type: 'inside'
        }, //<-- add a comma to separate the following option
        buttons: {} //<-- add this for buttons
    },
    closeBtn: false, //disable default close
    arrows: false    //disable default arrows

    Ver la misma modificado JSFIDDLE.

    • En primer lugar, muchas gracias por su ayuda. Estoy cargando el JS & CSS para el botón de ayudantes de archivos…y estoy incluyendo adicionales JS & archivos CSS para los botones sociales (muy similares a los de su JSFiddle ejemplo), pero por alguna razón stil sin suerte. Podría tener que ver con los nombres de las clases que estoy usando? Yo creo que es un poco diferente a lo que el valor predeterminado de fancybox archivos de dictar. Mi clase para cada imagen es fancybox-button & también estoy usando data-fancybox-group="paintings" para separar cada tipo galería…aquí hay un enlace a la página que estoy trabajando en: teganwhitesel.com/#painting
    • Veo los botones, pero no veo en los medios de comunicación social código dentro de la title como en el jsfiddle
    • ¿Te refieres a los JS & CSS archivos que se cargan en el <header> etiqueta? El archivo con el código de la JS violín es titulado fancybox/fancybox-social-buttons.js
    • Así, la fancybox-social-buttons.js el archivo tiene los medios de comunicación social código, de hecho, pero que el código tiene que estar dentro de la .ready() método. Entonces usted tiene el archivo fancybox-jquery-plugin.js con este código $('.fancybox').fancybox(); que anula la anterior fancybox configuración. No complicar las cosas y establecer sólo las secuencias de comandos que usted necesita.
    • ok… #1. entonces, ¿cómo hago los medios de comunicación social código (que se celebra en la fancybox-social-buttons.js archivo) dentro de la .ready() método? #2 yo también he eliminado cualquier rastro de la fancybox-jquery-plugin.js porque parecía que era más de complicar las cosas? Se que la cosa derecha a hacer?

Dejar respuesta

Please enter your comment!
Please enter your name here