Przejdź do zawartości

Strona główna forum ‹ Wsparcie ‹ Tutoriale ‹ Dodawanie Lightbox'a do Magento

Dodawanie Lightbox'a do Magento

Czyli zrób to sam, krok po kroku...
Odpowiedz

Dodawanie Lightbox'a do Magento

Post 13 lis 2008, o 16:02
jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

witam,
Poniżej znajduję się sposób na dodanie Lightbox'a w wersji 2.04 do Magento 1.1.6

1. Ściągamy Lightbox'a ver. 2.04 (do pobrania tu: Lightbox ver. 2.04, po ściągnięciu archiwum należy rozpakować).

2. Otwieramy lightbox2.04/css/lightbox.css i znajdujemy:
Kod: Zaznacz cały
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

zamieniamy na:
Kod: Zaznacz cały
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

Zmieniony plik wrzucamy na serwer do katalogu /skin/frontend/default/twoj_styl/css/

3. Otwieramy lightbox2.04/js/lightbox.js i znajdujemy:
Kod: Zaznacz cały
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

powyższy kod zamieniamy na:
Kod: Zaznacz cały
    fileLoadingImage:        SKIN_URL + 'images/lightbox/loading.gif',     
    fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif',

Tu można też zamienić zmienne: labelImage: "Image", labelOf: "of" na polskie odpowiedniki czyli na labelImage: "Zdjęcie nr", labelOf: "z". Tak przygotowany plik wrzucamy do /skin/frontend/default/twoj_styl/js/lightbox/ (katalog lightbox należy wpierw utworzyć).

4. W /skin/frontend/default/twoj_styl/images/ również tworzymy katalog "lightbox" i wrzucamy tam zawartość katalogu lightbox2.04/images/ z naszego wcześniej rozpakowanego archiwum.

5. Otwieramy /app/design/frontend/default/twoj_styl/template/page/html/head.phtml, gdzie pod:
Kod: Zaznacz cały
    var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
    var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';

umieszczamy:
Kod: Zaznacz cały
    var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';

Tak zmieniony head.phtml wysyłamy z powrotem na serwer.

6. W pliku /app/design/frontend/default/twoj_styl/layout/page.xml zaraz za:
Kod: Zaznacz cały
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>

dodajemy linijkę:
Kod: Zaznacz cały
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>

Następnie szukamy:
Kod: Zaznacz cały
<action method="addCss"><stylesheet>css/menu.css</stylesheet></action>

i za tą linijką dodajemy:
Kod: Zaznacz cały
<action method="addItem"><type>skin_css</type><name>css/lightbox.css</name></action>

Po tych zmianach zapisujemy page.xml i wysyłamy na serwer.

7. Ostatni już krok to otwarcie /app/design/frontend/default/twoj_styl/template/catalog/product/view/media.phtml gdzie fragment:
Kod: Zaznacz cały
<?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(120); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
<?php endforeach; ?>

zamieniamy na:
Kod: Zaznacz cały
<?php foreach ($this->getGalleryImages() as $_image): ?>
       <li>
       <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
       <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(120); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
       </a>
       </li>
<?php endforeach; ?>

Oczywiście zapisujemy zmiany dokonane w media.phtml i wysyłamy plik na serwer. Odświeżamy cache i wszystko powinno działać.

Dodawanie Lightbox'a do Magento

PostTeraz jest 23 lis 2024, o 10:21
Google

Posty: 427
Lokalizacja: Internet

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 13 lis 2008, o 18:24

Posty: 74
Gadu-Gadu: 0

Nareszcie konkrety :-)

Zrobiłam wszystko jak należy i działa lightbox, pytanie tylko mam - jak i co zrobić, żeby nie tylko to małe zdjęcie otwierało się w lightboxie, ale to główne też ?
Uśmiechnij się - jutro możesz nie mieć zębów ...

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 13 lis 2008, o 19:34
jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

witam,
w pliku media.phtml możesz zamienić:
Kod: Zaznacz cały
<p class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p>

na:
Kod: Zaznacz cały
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" rel="lightbox[rotation]" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><p class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p></a>

tyle, że jest to dość mało eleganckie rozwiązanie ze względu na składnie :/ jak będę miał czas podam jakieś lepsze rozwiązanie problemu.

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 13 lis 2008, o 21:22

Posty: 74
Gadu-Gadu: 0

Wielkie dzięki, nareszcie mam lightbox, :-) będę czekała cierpliwie :-)
Uśmiechnij się - jutro możesz nie mieć zębów ...

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 13 lis 2008, o 22:48

Posty: 49
Lokalizacja: Bydgoszcz
Gadu-Gadu: 3970064

Super - działa bez żadnych problemow.
Projekty domów http://duomo.pl

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 14 lis 2008, o 17:15
jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

witam,
Zgrabniejsze i zgodne z xhtml rozwiązanie pozwalające na wyświetlanie base image'a za pomocą lightbox'a (niestety nie ma wtedy możliwości bawienia sie zoom'em na zdjęciu) to zamiana w media.phtml fragmentu:
Kod: Zaznacz cały
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p>
<p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>

<div class="image-zoom" id="track_outer">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    </div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
</script>
<?php else: ?>
    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php endif; ?>

na:
Kod: Zaznacz cały
<?php // if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<!-- <p class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p>
<p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>

<div class="image-zoom" id="track_outer">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    </div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
/*    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    }); */
</script> -->
<?php // else: ?>
    <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image');?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
    <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<?php // endif; ?>

Jedyne co potem pozostaje to zmienić tylko napis o podwójnym kliknięciu :)

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 30 lis 2008, o 20:47

Posty: 74
Gadu-Gadu: 0

Czy to samo można zastosować w wersji 1.1.8?
Uśmiechnij się - jutro możesz nie mieć zębów ...

Re: Dodawanie Lightbox'a do Magento 1.1.6

Post 1 gru 2008, o 10:46
jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

witam,
Powyższy sposób na Lightbox'a działa bez problemu w Magento 1.1.6, 1.1.7 i 1.1.8

Re: Dodawanie Lightbox'a do Magento

Post 12 mar 2009, o 01:27

Posty: 116
Gadu-Gadu: 0

Niestety w wersji 1.2.1.2 nie działa :(
Dobry hosting pod Magento? A może sklep KQS? Tak dla kontrastu...

Re: Dodawanie Lightbox'a do Magento

Post 12 mar 2009, o 20:17

Posty: 1575
Gadu-Gadu: 0

Głupoty pleciesz Lesiu, właśnie zainstalowałem i działa :]
hosting-magento.pl / magentohosting.eu - szybki hosting Magento
https://www.mage24.pl/ - twój sklep Magento 2 w 5 minut

Następna strona
Odpowiedz

Powrót do Tutoriale



© Absolution design by Christian Bullock for Accountants Cardiff.


Powered by phpBB® Forum Software © phpBB Group