PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

Dobrý den,

chci se zeptat, jakým způsobem lze docílit, aby se zobrazil obrázek ve fancyboxu (stejně jako se zobrazí obrázek produktu) po kliknutí na jeho miniaturu na cms stránce. Potřebuji vytvořit malou galerii, ale pokaždé se velký obrázek zobrazí na prázdné stránce, což není příliš efektivní a vypadá to nevzhledně.

Našel jsem bezplatný modul, který by to měl umožnit. Zde odkaz na stránku autora modulu:
http://antonio-ventura.com/fancybox-in-all-pages/

Autor mi poradil, že musím vložit do souboru cms.tpl tento skript:

Kód:

$(document).ready(function () {
$(".fancybox5")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'elastic',
prevEffect: 'fade',
nextEffect: 'fade'
});
}); 

není mi však jasné, jak označit odkaz obrázku, na který odkazuje miniatura. Zkoušel jsem toto, ale velký obrázek se opět objeví na prázdné stránce.

Kód:

<a href="cesta-k-obrazku/velky.jpg" rel="gallery"><img src="cesta-k-obrazku/miniatura.jpg" alt="miniatura"></a>

Děkuji za jakoukoliv odpověď.

Radek Plašil · **Registrován:** 30 čer 2009 08:14 **Příspěvky:** 8689

Dobrý den,

mělo by stačit nastavit u odkazu styl/třídu fancybox5, takže např.:

Kód:

<a href="cesta-k-obrazku/velky.jpg" class="fancybox5"><img src="cesta-k-obrazku/miniatura.jpg" alt="miniatura"></a>

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

Dobrý den,

děkuji za odpověď, toto řešení jsem již zkoušel, ale bohužel bez úspěchu. Obrázek se vždy zobrazí na prázdné stránce.

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

Toto řešení funguje, na začátek každé cms stránky je nutné vložit tento skript:

Kód:

<script type="text/javascript">
   $('a.iframe').fancybox({
      'type' : 'iframe',
      'width':600,
      'height':600
   });
</script>

a každý odkaz na velký obrázek označit class="iframe"

Avšak když kliknu na miniaturu, obrázek se již zobrazí ve fancyboxu, avšak okno absolutně nerespektuje zadané velikosti 'width':600, a 'height':600. Neexistuje pro fancybox přímo vlastní css stylopis, ve kterém by toto šlo nastavit pomocí klasických css atributů?

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

css k fancyboxu lze najít na adrese doména/js/jquery/plugins/fancybox/jquery.fancybox.css, kde jsem nastavil pro tyto třídy

Kód:

.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp

vlastnosti max-width a max-height, bohužel však došlo k přesahu (viz příloha) se kterým si nevím rady, mohl byste mi prosím poradit? Děkuji za odpověď.

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

jde mi o to, aby se okno fancyboxu ideálně přizpůsobovalo velikosti velkého obrázku, který bude předem zmenšen na požadovaný rozměr.

Radek Plašil · **Registrován:** 30 čer 2009 08:14 **Příspěvky:** 8689

Dobrý den,

zbytečně to komplikujete. Ten skript z Vašeho prvního příspěvku Vám také musí fungovat, ale pravděpodobně jste v souboru cms.tpl pouze neobalil kód tagem script. Také je zbytečné zobrazovat obrázky pomocí iframe a nastavovat parametry width a height. Takže nyní Vám uvedu nejjednodušší postup. Do souboru cms.tpl vložte na konec tento kód:

Kód:

<script type="text/javascript">
{literal}
  $(".fancybox").attr('rel', 'gallery').fancybox();
{/literal}
</script>

Pro fancybox se použijí defaultní hodnoty (efekty, přizpůsobení velikosti obrázků atd.). A ke každému odkazu s třídou fancybox se automaticky přidá attribut rel s hodnotou gallery, takže půjde listovat na předchozí/další obrázky.

A nyní stačí do CMS stránky v aplikaci PrestaShop vložit pro každý obrázek následující kód:

Kód:

<a href="cesta-k-velkemu-obrazku" class="fancybox" title="Popis obrázku"><img src="cesta-k-miniature" alt="Popis obrázku" /></a>

Atribut title nemusíte zadávat, jedná se o popis obrázku, který se zobrazuje ve fancyboxu.

Samozřejmě pokud Vám standardní nastavení fancyboxu nevyhovuje, tak stačí přidat vlastní parametry (např. width, height, scale, openEffect atd.) do zdrojového kódu ve stránce cms.tpl:

Kód:

<script type="text/javascript">
{literal}
  $(".fancybox").attr('rel', 'gallery').fancybox({
      část pro parametry
   });
{/literal}
</script>

Také pokud byste měl na jedné stránce více obrázků a chtěl byste je zobrazovat jako samostatné galerie (např. 2 obrázky první galerie a další 2 jiná galerie), stačí ze zdrojového kódu v souboru cms.tpl odstranit část .attr('rel', 'gallery') a doplnit v CMS stránce do odkazů <a href ...> atribut rel s názvem galerie. Takže např. u všech odkazů první galerie budete mít rel="gallery1" a u druhé galerie rel="gallery2". Při této variantě ale musíte mít v administraci aplikace PrestaShop v sekci Konfigurace > Hlavní nastavenou volbu Use HTMLPurifier Library na Ne, jinak by docházelo k pročištění kódu CMS stránky a odstranění atributu rel.

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

Dobrý den,

děkuji za odpověď. Vaše řešení funguje skvěle, děkuji za pomoc.

martinl · **Registrován:** 14 čer 2012 20:58 **Příspěvky:** 6

Zde je pěkný návod pro verzi 1.5

http://mypresta.eu/en/art/developer/gal ... cybox.html

Hanz · **Registrován:** 13 zář 2013 14:02 **Příspěvky:** 187

Dobrý den,

aplikoval jsem do souboru cms.tpl na Prestashopu 1.6.1.0 tento kód:

Kód:

<script type="text/javascript">
{literal}
  $(".fancybox").attr('rel', 'gallery').fancybox();
{/literal}
</script>

ale konzole v chromu vyhazuje chybu

Kód:

Uncaught TypeError: $(...).fancybox is not a function
(anonymous function)

a fancybox nefunguje. Mohli byste mi poradit, jak danou funkci upravit aby fungovala na této verzi? Děkuji za odpověď.

Návody pro C4

Webhosting C4

PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS

Kdo je online

FTP Uploader

PrestaShop partneři

PrestaShop Hosting