Añadir atribulo REL para FancyBox en WordPress

Galeria - Casa Rural Puerta de la Vera

Recientemente he tenido que adaptar une web estática realizada mediante HTML5, CSS3, JS y Jquery (aunque con cierto dinamismo en PHP) para montar una sección dedicada al Blog de la empresa en cuestión (cosas de la indecisión inicial del propietario, que no sabia si lo quería o no a la hora de realizar el estudio previo), es entonces cuando después de adaptar todo el diseño inicial de la web corporativa al blog (no sin ciertos problemillas) me vi en la tesitura de si mantener los códigos Javascripts que ya funcionaban en la web o si usar plugins de WordPress para hacer las mismas funciones. Después de pensarlo me dedique a intentar implementar el código actual a la estructura de WP y sin utilizar plugins ni estilos adicionales e innecesarios.

Una de las funciones a mantener era la de la galería visual Fancybox, la cual utilizo en la mayoria de mis proyectos y que me ha dado tan buen resultado. En wordpress por tanto hay que fijarse como funcionan las galerías fotográficas propias para saber la clase a utilizar para activar Fancybox que en este caso es “.gallery a”:

<div id=”gallery-1″ class=”gallery galleryid-82 gallery-columns-4 gallery-size-thumbnail”>
 <dl class=”gallery-item”>
   <dt class=”gallery-icon”>
    <a title=”Logotipo” href=”../inicio.jpg” rel=”galeria82″>
     <img class=”attachment-thumbnail” width=”190″ height=”97″ title=”Logotipo” alt=”Logotipo” src=”../inicio-190×97.jpg”>
    </a>
   </dt>
 </dl>
 <dl class=”gallery-item”>
 …
 </dl>
</div>

En el extracto vemos que los enlaces “a” no tienen clases definidas asi que usaremos la clase “gallery” del “DIV” padre asi podremos activar Fancybox para este tipo de galerías en el código Javascript encargado de ello:

$(“.gallery a”).fancybox({
 ‘transitionIn’: ‘elastic’,  
 ‘transitionOut’: ‘elastic’,  
 ‘titlePosition’: ‘over’,  
 ‘cyclic’: true,  
 ‘titleFormat’: function(title, currentArray, currentIndex, currentOpts) {  
  return ‘<span id=”fancybox-title-over”>Imagen ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘ &nbsp; ‘ + title : ”) + ‘</span>’;  
 }
});

Con esto ultimo conseguimos que las imágenes se desplieguen con el visor de imágenes de Fancybox, ahora nos queda poder recorrer mediante las flechas o cursores izquierda o derecha las imágenes de dicha galería, para ello Fancybox utiliza el atributo REL de los enlaces para conocer de antemano por que imágenes puede navegar; como esto no nos lo provee Wordpres de forma nativa hay que agregarlo manualmente en el archivo functions.php del tema WP que estemos usando (en este caso mi propio tema), así pues, hay que añadir el siguiente código al final de este archivo:

add_filter(‘wp_get_attachment_link’,’add_gallery_id_rel’);
function add_gallery_id_rel($link){
global $post;
return str_replace(‘<a href’, ‘<a rel=”galeria’. $post->ID .'” href’, $link);
}

Como podemos observar hemos remplazado la cadena original <a href con <a rel=”galeria’. $post->ID.'” href’ con lo que añadimos el atributo rel que contiene “galeria” y a este concatenamos el ID de la entrada que la contiene, con lo que así evitamos que naveguemos por todas las galerías, si es que se muestran varias en la misma pagina.

Fuentes de interés: wiki.jnestudi.com

Anuncios

11 thoughts on “Añadir atribulo REL para FancyBox en WordPress

  1. Pingback: Usar funcionalidades WordPress fuera de la raiz de WordPress « LuMiLuEd

  2. Pingback: Latino » Blog Archive » Usar funcionalidades WordPress fuera de la raiz de WordPress

  3. Pingback: Latino » Blog Archive » Usar funcionalidades WordPress fuera de la raiz de WordPress

  4. No entiendo como no ha tenido mas comentarios, algo tan simple pero a la vez tan útil porque no solo has dado herramientas para utilizar el jquery Fancybox si no que utilizando este método se puede utilizar cualquier otro jquery estilo Lightbox para las galerías de imágenes, sin instalar plugins adicionales en WordPress ni hacer grandes modificaciones en el archivo functions (los cambios sin mínimos)

    Felicidades, me encanta WordPress pero me encantaría aun mas poder tener la capacidad de solucionar por mi cuenta inconvenientes como este que si no es por tu ingenio no hubiera solucionado.

    Me gusta

      • Aprovechando el comentario. Ya he realizado el método con el Jquery Colorbox, ya esta funcionando, pero me esta dando un fallo que no se como solucionar y es el siguiente: Al hacer click en una imagen no carga la imagen en ventana nueva para que el Jquery cargue únicamente la imagen, si no que carga la pagina de archivos adjuntos aunque elija “archivo multimedia” de forma que el Jquery me carga la pagina de adjuntos incluida.

        ¿No hay forma de decirle a WordPress que tiene que cargar forzosamente la imagen nada mas sin cargar la pagina de archivos adjuntos en la galería? (en archivos independientes que no usan el shortcode gallery no sucede.)

        Saludos y gracias!

        Me gusta

      • Efectivamente, estaba pensado para los casos en los que las imágenes se cargan como parte de una galería. Deberíamos ver si existe la opción que tu das, intentare verlo con mas tiempo 😉 ________________________________ De: Lumilued Blog Enviado: 14/03/2013 1:32 Para: edcaarar@hotmail.com Asunto: [Lumilued Blog] Comentario: “Añadir atribulo REL para FancyBox en WordPress”

        Nuevo comentario a tu entrada “Añadir atribulo REL para FancyBox en WordPress” Autor : Xavier (IP: 187.188.166.61 , fixed-188-166-61.iusacell.net) Correo electrónico : xavier.ocampos@gmail.com URL : http://gravatar.com/xavierocampos Whois : http://whois.arin.net/rest/ip/187.188.166.61

        Me gusta

  5. He buscado tanto como he podido y finalmente la única solución que encontré fue de plano crear una pagina de attachment.php en blanco:

    A favor: Con algo de imaginación, un poco de CSS y un Jquery interesante puedes implementar el sistema de comentarios a las imágenes y hacer algo estilo WordPress.com o JetPack con las galerías.

    En contra: Un archivo funcionando en exclusiva para dicha función, preferiría evitarlo (igual son manías mías… soy de los que piensan que para ciertas cosas “menos es más”) pero en verdad no encontré otra forma…

    Me gusta

    • No lo he podido investigar mas a fondo, la verdad es que es una idea imaginativa. Pero como tu dices, no seria lo mas optimo… a ver si puedo verlo mas a fondo, aunque últimamente no tengo apenas tiempo, si tu ves algo al respecto comentalo. Un saludo!!

      Me gusta

  6. Pingback: Despidiendo el año 2013 | Lumilued Blog

  7. Pingback: Despidiendo el año 2014 | Lumilued Blog

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s