Utilizar la libreria fancybox en wordpress sin plugin

[boryi]

Hola buenas,

Estoy intentando utilizar la libreria Fancibox en wordpress, la cuestion es que en un documento html5 me sale bien, pero luego lo voy a implementarla en wordpress y ya no funciona.

Lo que hago en el htm5 es:

1. pongo las rutas a los archivos en el head:

<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen">

lo cual pongo luego en el function.php para integrarlo en wordpress,no??, pongo esto en el function.php:

// cargar estilos y scripts para Lightbox
function add_lightbox() {

wp_enqueue_script('jquery');

wp_enqueue_script( 'mousewheel', get_stylesheet_directory_uri() . '/fancybox/jquery.mousewheel-3.0.4.pack.js', array( 'jquery' ), '3.0.4' );

wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox-1.3.4.pack.js', array( 'jquery' ), '1.3.4' );

wp_enqueue_style( 'lightbox-style', get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox-1.3.4.css' );

}
add_action( 'wp_enqueue_scripts', 'add_lightbox' );

Luego en el html5 tengo el script:

<!--class para abrir cargar un vdeo en el fancybox-->
<script type="text/javascript">
$(document).ready(function(){
$(".video").fancybox({
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 1250,
'height' : 850,
'type' : 'iframe'
});
});
</script>
<!--fin-->

Que para pasarlo a wordpress lo pondria en el documento script.js que tengo dentro de la carpeta js

y por ultimo pongo en el html5 el link al video:

<a class="video" href="videos/video1.mp4">Abrir video</a>

que luego en el wordpress lo pongo en el backend, en su respectiva pagina.


pero en wordpress no me funciona el fancybox, que estoy haciendo mal??, si algien me podria ayudar le estaria muy agradecido.

Gracias

[ArturoGallegos]

casi seguro que es por la forma en que invocas las funciones javascript

debes hacer uso de noConflict() para prevenir problemas de compatibilidad.

Revisa la consola en firefox o chrome para ver que se esten cargando todos los archivos js y css que se necesitan, asi como para ver los errores que se producen en el javascript.

[boryi]

Muchas gracias Arturo, efectivamente era el noConflict.

Ahora abre bien el Facybox, pero no lo cierra, lo recarga cada vez que lo quiero cerrar, y en vez de cargarme el video en él me carga la página de error 404, página no encontrada, no lo entiendo, la verdad.

[ArturoGallegos]

coloca la ruta absoluta al video y asegurate que este exista.

[boryi]

eso ya lo he hecho, si el archivo me lo abre bien, lo que pasa es que no me lo abre en un fancibox, no fona, no se porque.

En el .js he puesto el noConflict, y antes no me lanzaba ningun error, ahora me lanza esto:

TypeError: jQuery(...).fancybox is not a function

jQuery('.video').fancybox({

En el js tengo:

$ = jQuery.noConflict();

$(document).ready(function(){


//abrir un video en fancybox
$('.video').fancybox({
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 1250,
'height' : 850,
'type' : 'iframe'
});
});

y la verdad, no se poque antes no me lanzaba ningun error con el noConflict y ahora si

[boryi]

Hola buenas, alguien sabe si es posible utilizar la libreria fancybox en wordpress sin necesidad de instalar ningun plugin??, porque en un documento html la utilizo sin ningun problema, pero luego la quiero usar en wordpress y ya no me funciona.

Alguien ha conseguido que le funcione??, porque llevo dias con esto y me esta desesperando.

Gracias

[boryi]

Hola buenas, tengo este script para abrir videos swf en fancybox, como lo podria modificar para abrir archivos mp4??

$(document).ready(function() {

$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});

Mil gracias

[siddartha23]

No he usado fancybox pero sí he usado muchas otras librerías: box-slider, colorbox, masonry, isotope, velocity, scrollmagic, etc, etc, etc y todas ellas funcionan sin ningún problema. El proceso para implementarlas es casi siempre el mismo: incluir los archivos js y css usando wp_enqueue_script, añadir las etiquetas/clases/id's/data-attributes necesarios en el html e instanciar el objeto de la librería dentro del método ready en tu archivo js principal.

Algunos de esos pasos no lo estas realizando correctamente, no te desesperes...

[siddartha23]

¿Qué tal si modificas la propiedad type:swf? ¿Has revisado la documentación de la librería?

[boryi]

eso fué lo primero que probé pero nada, no funciona

[boryi]

mil gracias