Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Tutorial - Aggiungere lightbox a Magento, pienamente funzionante
 
brk
Jr. Member
 
Total Posts:  20
Joined:  2009-10-03
 

Ciao a tutti, dopo aver dannato ore intere per aggiungere lightbox a Magento ed essermi scontrato con mille problemi ho deciso di scrivere un mini how-to e lasciarlo qui nel forum sperando che possa essere utile a tutti. Ho usato la versione 1.3.2.4 di Magento.

Molto importante, usate lightbox 2.03.3 e non il 2.04, in caso contrario Explorer 7 ed 8 daranno errori nei prodotti con opzioni personalizzate.

La presente guida è frutto di modifiche a tutorial preesistenti in rete, grazie alle variazioni apportate sarà possibile integrare in breve tempo Lightbox nella propria pagina prodotto di Magento Commerce

Modificare in lightbox.js le righe:

fileLoadingImage: “images/lightbox/loading.gif”,
fileBottomNavCloseImage: “images/lightbox/closelabel.gif”,

in

fileLoadingImage: SKIN_URL + “images/lightbox/loading.gif”,
fileBottomNavCloseImage: SKIN_URL + “images/lightbox/closelabel.gif”,

Mettere il file lightbox.js nella cartella /js presente nelle root dell’installazione di Magento (Attenzione, non nella cartella della skin).

Nel file /page/html/head.phtml modificare le righe

var BLANK_URL = ‘<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>’;
var BLANK_IMG = ‘<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>’;

in

var BLANK_URL = ‘<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>’;
var BLANK_IMG = ‘<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>’;
var SKIN_URL = ‘<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>’;

Ora in catalog.xml aggiungere in:

<catalog_product_view>

….

<reference name=”head”>

le righe

<action method="addItem"><type>js</type><name>lightbox/lightbox.js</name></action>
<action method="addItem"><type>skin_css</type><name>css/lightbox.css</name></action>

In lightbox.css cambiare tutti i path delle immagini in modo che siano:

url(../images/lightbox/image.gif)

Mettere ora lightbox.css nella cartella tuo_tema/css

Caricare tutte le immagini nella cartella tuo_tema/images/lightbox (creare la cartella lightbox appositamente)

Ora aprire il file tuo_tema/template/catalog/product/view/media.phtml e modificare le righe

<ul>
<?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(48, 48); ?>” width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>” title="<?php echo $this->htmlEscape($_image->getLabel()) ?>” /></a>
</li>
<?php endforeach; ?>
</ul>

in

<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>” rel="lightbox" title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(50, 50); ?>” width="50" height="50" alt=""/>
</a>
</li>
<?php endforeach; ?>
</ul>

Fatto, ora tutte le thumbs presenti nella scheda prodotto avranno abilitato l’effetto lightbox.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top