Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Utilizar la libreria fancybox en wordpress sin plugin

Estas en el tema de Utilizar la libreria fancybox en wordpress sin plugin en el foro de WordPress en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/10/2016, 14:03
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
utilizar la libreria facybox en wordpress

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
  #2 (permalink)  
Antiguo 23/10/2016, 23:20
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 13 años, 10 meses
Puntos: 1146
Respuesta: utilizar la libreria facybox en wordpress

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.
  #3 (permalink)  
Antiguo 24/10/2016, 03:45
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
Respuesta: utilizar la libreria facybox en wordpress

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.
  #4 (permalink)  
Antiguo 24/10/2016, 15:02
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 13 años, 10 meses
Puntos: 1146
Respuesta: utilizar la libreria facybox en wordpress

coloca la ruta absoluta al video y asegurate que este exista.
  #5 (permalink)  
Antiguo 25/10/2016, 05:27
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
Respuesta: utilizar la libreria facybox en wordpress

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
  #6 (permalink)  
Antiguo 13/11/2016, 04:38
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
Utilizar la libreria fancybox en wordpress sin plugin

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
  #7 (permalink)  
Antiguo 13/11/2016, 06:42
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
script para abrir videos .mp4 en fancybox

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
  #8 (permalink)  
Antiguo 14/11/2016, 13:34
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 8 años, 4 meses
Puntos: 39
Respuesta: Utilizar la libreria fancybox en wordpress sin plugin

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...
__________________
velarde23.com - Soluciones Web
  #9 (permalink)  
Antiguo 14/11/2016, 13:38
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 8 años, 4 meses
Puntos: 39
Respuesta: script para abrir videos .mp4 en fancybox

¿Qué tal si modificas la propiedad type:swf? ¿Has revisado la documentación de la librería?
__________________
velarde23.com - Soluciones Web
  #10 (permalink)  
Antiguo 15/11/2016, 12:45
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
Respuesta: script para abrir videos .mp4 en fancybox

eso fué lo primero que probé pero nada, no funciona
  #11 (permalink)  
Antiguo 15/11/2016, 12:46
 
Fecha de Ingreso: mayo-2011
Mensajes: 282
Antigüedad: 10 años, 8 meses
Puntos: 3
Respuesta: Utilizar la libreria fancybox en wordpress sin plugin

mil gracias

Etiquetas: fancybox, libreria, mp4, plugin, videos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:36.