Skip to content

Prestashop 1.6 – Adicionando uma galeria de imagens Fancybox as páginas CMS

Este tutorial explica como inserir uma galeria de imagens dentro de uma página CMS do Prestashop 1.6, utilizando o FancyBox. Abaixo, um pequeno exemplo de como a galeria ficará após configurada:

1. Pré requisitos

Prestashop 1.6

2. Alterações de código

2.1 Modificação no controlador CMS

O primeiro passo, é editar o controlador do CMS (controller/front/CMSController.php). Dentro do controlador, existe uma função chamada “setMedia”. Essa função inclui um css e um js para as páginas CMS. O que precisamos fazer aqui, é incluir o plugin do Fancybox.

Por padrão, a função se parece com a abaixo:

public function setMedia()
{
parent::setMedia();

if ($this->assignCase == 1) {
$this->addJS(_THEME_JS_DIR_.'cms.js');
}

$this->addCSS(_THEME_CSS_DIR_.'cms.css');
}

Inclua ao final da função, as duas linhas abaixo que estão em destaque.

public function setMedia()
{
    parent::setMedia();
 
    if ($this->assignCase == 1) {
        $this->addJS(_THEME_JS_DIR_.'cms.js');
    }
 
    $this->addCSS(_THEME_CSS_DIR_.'cms.css');
     
     
    $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
    $this->addJqueryPlugin('fancybox');
}

2.2 Inicialização do Fancybox nas páginas CMS

Para inicializar o Fancybox nas páginas CMS, precisamos editar o arquivo “themes/seu_tema/js/cms.js” e adicionar as seguintes linhas dentro da função “$(document).ready”:

	$('#center_column .rte a:has(img)').each(function() {
		$(this).attr('rel','MyGallery');
	});
	$("#center_column .rte a:has(img)").fancybox();

O código ficará parecido com o abaixo:

$(document).ready(function(){
	if (typeof ad !== 'undefined' && ad && typeof adtoken !== 'undefined' && adtoken)
	{
		$(document).on('click', 'input[name=publish_button]', function(e){
			e.preventDefault();
			submitPublishCMS(ad, 0, adtoken);
		});
		$(document).on('click', 'input[name=lnk_view]', function(e){
			e.preventDefault();
			submitPublishCMS(ad, 1, adtoken);
		});
	}

	$('#center_column .rte a:has(img)').each(function() {
		$(this).attr('rel','MyGallery');
	});
	$("#center_column .rte a:has(img)").fancybox();

});

3. Conteúdo da página CMS

Acesse a página Admin do seu Prestashop, vá em Preferências -> CMS e crie ou edite a página CMS aonde quer incluir a galeria Fancybox.

Para começar a criar a galeria, primeiramente temos que criar uma tabela, aonde serão inseridas as miniaturas das imagens. No exemplo abaixo, foi criado uma tabela de 4×2.

Depois de criado a tabela, clique novamente na ferramenta de tabela, e clique em “Table properties”. Defina o “width” para 100%.

Inserindo as imagens nas células das tabelas

Clique em uma das células da tabela e depois clique em “image”. Você verá uma popup conforme a abaixo. Faça o upload da imagem e defina a altura e largura da imagem para criar a miniatura.

Clique na miniatura que deseja adicionar o efeito o Fancybox, clique em “link” e adicione o link para a imagem original.

Acesse o código fonte da sua publicação, clicando no botão exibido na imagem abaixo:

Dentro do código fonte, localize todos os Itens “<a>“, que são os links que adicionamos para as imagens e adicione a classe “fancybox” para esses elementos. Ficará parecido com o código abaixo:

<td><a class="fancybox" href="/img/cms/20170424_125846.jpg"><img src="/img/cms/20170424_125846-mini.jpg" width="200" height="158" alt="20170424_125846.jpg" /></a></td>

Pronto! Se tudo deu certo, ao abrir a sua página CMS sua galeria já estará funcionando.

Referências:

CMS Fancybox gallery for PS 1.6

Published inPrestashop

One Comment

  1. Danielle R Danielle R

    Obrigada! Tutorial simples e rápido. Me ajudou a solucionar o problema do fancybox em CMS. 🙂

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *