Právě je 23 črc 2019 11:18

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]




Odeslat nové téma Odpovědět na téma  [ Příspěvků: 15 ]  Přejít na stránku 1, 2  Další
Autor Zpráva
 Předmět příspěvku: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 09 zář 2014 13:34 
C4 zákazník

Registrován:
13 zář 2013 15: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ěď.


Přílohy:
fancyboxallpages.zip [4.2 KiB]
268 krát
Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 10 zář 2014 13:29 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7164
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>

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 10 zář 2014 17:07 
C4 zákazník

Registrován:
13 zář 2013 15: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.


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 10 zář 2014 18:15 
C4 zákazník

Registrován:
13 zář 2013 15: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ů?


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 10 zář 2014 21:15 
C4 zákazník

Registrován:
13 zář 2013 15: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ěď.


Přílohy:
presah.png
presah.png [ 3.63 KiB | Zobrazeno 3056 krát ]
Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 10 zář 2014 21:17 
C4 zákazník

Registrován:
13 zář 2013 15: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.


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 11 zář 2014 12:07 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7164
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.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 11 zář 2014 19:41 
C4 zákazník

Registrován:
13 zář 2013 15:02
Příspěvky:
187
Dobrý den,

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


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 17 říj 2014 19:44 

Registrován:
14 čer 2012 21:58
Příspěvky:
6
Zde je pěkný návod pro verzi 1.5

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


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Obrázek ve fancyboxu na stránce CMS
PříspěvekNapsal: 27 dub 2016 11:01 
C4 zákazník

Registrován:
13 zář 2013 15: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ěď.


Nahoru
 Profil  
 
Zobrazit příspěvky za předchozí:  Seřadit podle  
Odeslat nové téma Odpovědět na téma  [ Příspěvků: 15 ]  Přejít na stránku 1, 2  Další

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 1 návštěvník


Nemůžete zakládat nová témata v tomto fóru
Nemůžete odpovídat v tomto fóru
Nemůžete upravovat své příspěvky v tomto fóru
Nemůžete mazat své příspěvky v tomto fóru
Nemůžete přikládat soubory v tomto fóru

Hledat:
Přejít na:  
FTP Uploader
Staňte se naším zákazníkem!
Hledáme kolegy
PrestaShop partneři

Seznam všech partnerů

PrestaShop Hosting
Návody pro C4

© 2009-2019 ČESKÝ WEBHOSTING s.r.o. Kontaktní e-mail: forum@c4.cz
Diskuzní fórum využívá technologie: phpBB, phpBB-SEO.com, phpBB.cz