wdrożenia PrestaShop

Thickbox / FancyBox w treści stron CMS

  • 0 Odpowiedzi
  • 2354 Wyświetleń

0 użytkowników i 1 Gość przegląda ten wątek.

*

Offline Dzidzia_2

  • Nowy
  • *
  • 6
  • 0
Thickbox / FancyBox w treści stron CMS
« dnia: Luty 20, 2013, 10:32:14 pm »
Witam!
Przedstawiam sposób na powiększanie zdjęć za pomocą ThickBoxa / FancyBoxa na stronach CMS. Bardzo tego potrzebowałem i szukałem rozwiązania ponad pół dnia, więc mam nadzieję, że komuś się też to przyda. Niestety nie jestem autorem tego rozwiązania i nie mogę odnaleźć strony z której to zerżnąłem :(

Działa na mojej Preście 1.4.7.2 na innych pewnie też.

Przykład:
http://s-shop.pl/content/14-jaki-wibrator-kupic-czyli-wszystko-o-wibrujacych-przyjacielach

Sposób:
Pobieramy poniższy plik, rozpakowujemy i kopiujemy go na nasz serwer do katalogu: /override/controllers/
Plik pobieramy ze strony:
http://s-shop.pl/CMScontroller.rar

Lub tworzymy plik samodzielnie:




<?php
class CmsController extends CmsControllerCore {
    public function 
setMedia() {
        
parent::setMedia();
        
Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css''screen');
        
Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
                           
_PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',
                           
_THEME_JS_DIR_.'product.js'));
        if (
Configuration::get('PS_DISPLAY_JQZOOM') == 1) {
            
Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css''screen');
            
Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
        }
    }
}



Użycie Thickboxa / Fancyboxa:
Podczas tworzenia CMSa otwieramy widok HTML i wklejamy poniższy kod:


<a class="thickbox" rel="gal1" href="/img/cms/big/001.jpg" title="Picture Title">
<img src="/img/cms/thumbnail/001.jpg" alt="Thumbnail Alt" /></a>



Gdzie:
rel="gal1" - Można ten fragment usunąć. Ma on za zadanie połączyć obrazy w taki sposób aby było możliwe przewijanie ich na następny i poprzedni obraz. Po usunięciu nie będzie możliwości przesuwania obrazków.

href="/img/cms/big/001.jpg - parametr, który opisuje gdzie znajduje się DUŻY obrazek, który będzie wyświetlany po kliknięciu miniaturki.

title="Picture Title" - Nazwa obrazka (widoczna po najechaniu myszką, oraz przy powiększeniu zdjęcia)

src="/img/cms/thumbnail/001.jpg - Ścieżka dostępu do miniaturki powiększanego obrazka.

Wady:
- Miniaturki trzeba zrobić samodzielnie.
- Przy powiększeniu zdjęcia widoczna jest cienka kreseczka koło x , który wyłącza zdjęcie. Idzie przeżyć ;)

Ma ktoś jakieś pomysły jak wyeliminować ostatnią wadę?

Plik nie powoduje żadnych szkodliwych zmian na stronie, jeśli jednak coś zaczęłoby się wyświetlać nie tak jak trzeba to wystarczy usunąć wcześniej wgrany plik CMScontroller z katalogu override/controllers/

Pozdrawiam!