Galerías con fancybox en CMS Prestashop 1.6
Hola amigos, en esta ocasión explicaré como implementar la herramienta Fancybox, para visualizar las imágenes de una manera más elegante en las paginas cms de una tienda Prestashop.
Con este tutorial básicamente lograremos visualizar las imágenes de las paginas cms tal como se pueden ver las imágenes en las paginas de producto de nuestra tienda, algo como lo que se muestra en la siguiente imagen.
Es posible que ya lo hayan probado, sucede que cuando agrego una imagen con su respectivo link a una pagina cms, si doy clic a esta, me mostrara la imagen original en una pestaña nueva o en su defecto en la misma, sacándome de la tienda. Logrando nuestro cometido podremos obtener galerías de imágenes con la opción de pasar todas como si fuera un "slider".
Los cambios que debemos hacer son pocos, primero ubicaremos el archivo global.js, este se encuentra ubicado en la carpeta js que a su vez esta ubicada en carpeta de la plantilla que estés utilizando.
Ruta de ejemplo con plantilla por defecto: themes/default-bootstrap/js/global.js
Teniendo el archivo global.js abierto ubicaremos la siguiente línea: $(document).ready(function(){
Justo dentro de esta función copiaremos y pegaremos el siguiente código
CÓDIGO PARA ARCHIVO global.js
$(".fancybox").attr('rel', 'gallery').fancybox({openEffect: 'elastic',prevEffect: 'fade',});
Mismo código en vertical
$(document).ready(function(){
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'elastic',
prevEffect: 'fade',
});
ESTRUCTURA PARA LLAMADO DE LA IMAGEN CON FANCYBOX
<a href="URL_DE_LA_IMAGEN" class="fancybox"> <img src="URL_DE_LA_IMAGEN"/></a>
Código ejemplo
<a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" class="fancybox"> <img src="https://img-cdn.prestashop.com/logo.png"/></a>
O bien si ya tienes imágenes insertadas con su link respectivo agrégale la clase fancybox class="fancybox" y con esto bastará.
A continuación dejo el código para crear una galería de 3x3, te invito a que lo mejores y le des tu toque. También puedes ver este mismo tutorial en video para que lo entiendas mejor, lo dejo al final.
<div class="section"> <div class="container"> <div class="row"> <div class="col-md-12"><!-- Títutlo de la Galeria --> <h1 class="text-center">Gallery</h1> </div> </div> <!-- Fila 1 de 3 imagenes --> <div class="row"><!-- <div class="col-md-4"><a href="URL_DE_LA_IMAGEN" class="fancybox" title="TÍTULO QUE SE DESEE DAR A AL IMAGEN (NO OBLIGATORIO)"> <img class="URL_DE_LA_IMAGEN_LA_MISMA" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto; " /></a></div> --> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> </div> <!-- Fila 2 de 3 imagenes --> <div class="row"> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> </div> <!-- Fila 3 de 3 imagenes --> <div class="row"> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> <div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-12"><hr /></div>
