Bienvenue, Invité
Merci de vous identifier ou de vous inscrire.    Mot de passe perdu?

la lightbox sur les images
(1 lecteur(s)) (1) Invité(s)
Aller en basPage: 12
SUJET:

la lightbox sur les images

*
#12143
khalil_ha
Fresh Boarder
Messages: 13
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

la lightbox sur les images

Il y a 9 Années
Karma: 1  
La solution consiste à utiliser le script Lightbox.js (vous pouvez voir des exemples sur le site : Lightbox 2).
Un très bon article de Sebastian Enders nous explique comment faire sur le wiki de Magento.

Je vais donc vous fournir ci-dessous une traduction de ces explications avec quelques modifications :

Commencez par télécharger la version zippé de lightbox et à la décompresser.

Copie des fichiers de lightbox dans Magento

Commencez par créer un répertoire lightbox dans le dossier js de Magento et copiez le fichier lightbox.js que vous venez de décompresser dans ce répertoire.

Copiez ensuite le fichier lightbox.css dans le répertoire /skin/frontend/votre package/default/css/ de Magento.


example1: /skin/frontend/default/default/css/

example2: /skin/frontend/blank/default/css/


Créez un répertoire /skin/frontend/votre package/default/images/lightbox/ dans Magento et copiez dedans tous les fichiers que vous trouverez dans le dossier images du dossier lightbox décompressé.

Modification des fichiers js de lightbox


Ouvrez ensuite : /magento/js/lightbox/lightbox.js, recherchez et remplacez :

Code :

var fileLoadingImage = “images/loading.gif”;


Code :

var fileBottomNavCloseImage = “images/closelabel.gif”;


par :

Code :

var fileLoadingImage = “/skin/frontend/default/votre package/images/lightbox/loading.gif”;

var fileBottomNavCloseImage = “/skin/frontend/votre package/default/images/lightbox/closelabel.gif”;



Insérez l’appel aux fichiers javascript et feuille de style de lightbox dans Magento

Ouvrez le fichier : /magento/app/design/frontend/votre package/votre theme/layout/page.xml et insérez entre :

Code :

 <block type=“page/html_head” name=“head” as=“head”>
….
</block>



les 2 lignes suivantes :
Code :


<action method=”addJs”><script>lightbox/lightbox.js</script></action>
<action method=”addCss”><stylesheet>css/lightbox.css</stylesheet></action>



Insertion de l’appel à lightbox dans une fiche produit
Ouvrez le fichier :

/magento/app/design/frontend/votre package/votre theme/template/catalog/product/view/media.phtml
si le fichier n existe vous deviez le crée
et metre de dans :

Code :

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category   design_blank
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php $_product = $this->getProduct() ?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
    <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</p>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?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') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
//]]>
</script>
<?php else: ?>
<p class="product-image">
    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</p>
<?php endif; ?> 

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h3><?php echo $this->__('More Views') ?></h3>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
                                                                                                                                                          
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(),'image',$_image->getFile())?>" rel="lightbox[roadtrip]" title=" <?php echo $this->htmlEscape($_product->getName()) ?><?/*php echo $this->htmlEscape($_image->getLabel())*/ ?>" >
            <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>
</div>
<?php endif; ?>

 
L'administrateur a désactivé l'accès public en écriture.
#12148
Boutik Circus
Nicolas Trossat
Platinum Boarder
Messages: 672
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin boutik-circus Boutik Circus nicolas.trossat@boutik-circus.fr Lieu: Var Date anniversaire: 18/04

Re:la lightbox sur les images

Il y a 9 Années
Karma: 21  
Merci pour ce tuto!

Petite précision, si vous souhaitez qu'un groupe d'image soit accessible avec les boutons "suivant/précédent", il faut mettre l'attribut rel="lightbox[roadtrip] comme indiqué sur le tuto
Code :

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

Et si vous voulez qu'une seule image soit accessible sans les boutons "suivant/précédent", il faut mettre l'attribut rel="lightbox"
Code :

<a href="images/image-3.jpg" rel="lightbox">image #3</a>


A noter également qu'il suffit de mettre le lien avec l'attribut sur n'importe quelle image de votre site pour que ca marche. Une fois installé, c'est pas plus compliqué que ca ;)
 
L'administrateur a désactivé l'accès public en écriture.
#12632
fredisap
Platinum Boarder
Messages: 349
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin Lieu: Lecques (30) Date anniversaire: 21/03

Re:la lightbox sur les images

Il y a 8 Années, 12 Mois
Karma: 0  
Bonjour,
est il possible de combiner la lightbox avec la derniere version de magiczoomplus.
c'est à dire avoir le rendu lightbox lorsqu'on clique sur l'image ?
 
L'administrateur a désactivé l'accès public en écriture.
#12633
Boutik Circus
Nicolas Trossat
Platinum Boarder
Messages: 672
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin boutik-circus Boutik Circus nicolas.trossat@boutik-circus.fr Lieu: Var Date anniversaire: 18/04

Re:la lightbox sur les images

Il y a 8 Années, 12 Mois
Karma: 21  
Le seul moyen de savoir est d'essayer

Il faut installer la lightbox, et ajouter un lien dans l'image avec rel="lightbox" dans media.phtml.
 
L'administrateur a désactivé l'accès public en écriture.
#12636
Gabriiiel
I love Magento.
Expert Magento
Messages: 4118
graph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin gabriel.bouhatous Formation Magento Audit Conseil gabriel.bouhatous Ask me :) Lieu: Paris

Re:la lightbox sur les images

Il y a 8 Années, 12 Mois
Karma: 112  
Ca ne suffira pas à mon avis...
 
Expert Magento @ The e-Commerce Academy

L'administrateur a désactivé l'accès public en écriture.
#12639
fredisap
Platinum Boarder
Messages: 349
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin Lieu: Lecques (30) Date anniversaire: 21/03

Re:la lightbox sur les images

Il y a 8 Années, 12 Mois
Karma: 0  
Voici le code media.phtml fourni avec magiczoomplus,
si cela peut aider. Par contre Où mettre le lien cité ?
Code :

<?php 

    if(!defined('__MAGICZOOMPLUS_INCLUDED')) {
        require_once(BP . DS . 'app' . DS . 'etc' . DS . 'magictoolbox' . DS . 'core' . DS . 'magiczoomplus.module.core.class.php');
        $tool = new MagicZoomPlusModuleCoreClass();
        
        // allow to use different ini files for different themes
        // get ini file from current theme folder by default
        $iniFile = dirname(__FILE__) . str_repeat(DS . '..', 4) . DS . 'magiczoomplus.settings.ini';
        if(!file_exists($iniFile)) {
            // if we can't found ini file for current theme we should get default ini file
            $iniFile = BP . DS . 'app' . DS . 'etc' . DS . 'magictoolbox' . DS . 'magiczoomplus.settings.ini';
        }
        // load INI
        $tool->params->loadINI($iniFile);
        
        $GLOBALS["magictoolbox"]["magiczoomplus"] = & $tool;
        
        echo $tool->headers($this->getSkinUrl('js'), $this->getSkinUrl('css'));
        echo $tool->addonsTemplate($this->getSkinUrl('images'));

        define('__MAGICZOOMPLUS_INCLUDED',1);
    }
    
    if(!function_exists('magicToolboxResizer')) {
        function magicToolboxResizer($product = null, $subdir = 'image', $s = null, $imageFile = null) {
            if($product == null) return false;

            $helper = Mage::helper('catalog/image')->init($product, $subdir, $imageFile);
            
            $model = Mage::getModel('catalog/product_image');
            $model->setDesctinationSubdir($subdir);
            if($imageFile == null) {
                $model->setBaseFile($product->getData($subdir));
            } else {
                $model->setBaseFile($imageFile);
            }
            
            $img = $helper->__toString();
            if($s == null) return $img;
            
            $size = getimagesize($model->getBaseFile());
            $w = $s;
            $h = round($s * $size[1] / $size[0]);
            if($h > $s) {
                $h = $s;
                $w = round($s * $size[0] / $size[1]);
            }

            $helper->resize($w, $h);
            $thumb = $helper->__toString();
            return array($img, $thumb);
        }
    }
    
    $_product = $this->getProduct();
    
    if ($_product->getImage() != 'no_selection' && $_product->getImage()) {
        // we have main image. parce it and print out with Magic Zoom Plus settings.
        $title = $this->htmlEscape($_product->getName());
        $description = $this->htmlEscape($_product->getDescription());
        $shortDescription = $this->htmlEscape($_product->getShortDescription());
        
        if($tool->params->checkValue("caption_source", "Short description")) {
            $description = $shortDescription;
            $tool->params->set("caption_source", "Description");
        }
        
        if(!isset($GLOBALS["magictoolbox"]["image_num"])) $GLOBALS["magictoolbox"]["image_num"] = 1;
        $id = 'magictoolbox' . $GLOBALS["magictoolbox"]["image_num"]++;
        
        list($img, $thumb) = magicToolboxResizer($_product, 'image', $tool->params->getValue("thumb_size"));
        
        echo $tool->template(compact("id", "title", "description", "img", "thumb"));
        
    } else {
        //product has no main image. print magento default image
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getName()).'" />';
        echo $this->helper('catalog/output')->productAttribute($_product, $_img, 'image');
    }
    
    if (count($this->getGalleryImages()) > 1) {
        // print more images
        ?>
            <div class="more-views">
                <h4>More Views</h4>
                <ul>
                    <?php 
                        foreach($this->getGalleryImages() as $_image) { 
                            list($img, $medium) = magicToolboxResizer($_product, 'image', $tool->params->getValue("thumb_size"), $_image->getFile());
                            list($img, $thumb) = magicToolboxResizer($_product, 'image', $tool->params->getValue("selector_size"), $_image->getFile());
                            $a = $tool->subTemplate(compact("id", "img", "thumb", "medium"));
                            if($tool->params->checkValue('ignore_magento_css', 'Yes')) {
                                $a = str_replace("<a ", "<a style=\"width:auto; height:auto;\" ", $a);
                            }
                            echo "<li>{$a}</li>";
                        }
                    ?>
                </ul>
            </div>
        <?php    
    }
?>

 
L'administrateur a désactivé l'accès public en écriture.
#12642
Gabriiiel
I love Magento.
Expert Magento
Messages: 4118
graph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin gabriel.bouhatous Formation Magento Audit Conseil gabriel.bouhatous Ask me :) Lieu: Paris

Re:la lightbox sur les images

Il y a 8 Années, 12 Mois
Karma: 112  
Vue la tête de l'intégration...

Pourquoi faire simple quand on peut faire compliqué...

Alors que MagicZoom demande 2 éléments dans le phtml ils ont tout changé...

A priori rel=lightbox se met dans un lien, peut-être celui des dernières lignes.
 
Expert Magento @ The e-Commerce Academy

L'administrateur a désactivé l'accès public en écriture.
#12648
Boutik Circus
Nicolas Trossat
Platinum Boarder
Messages: 672
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin boutik-circus Boutik Circus nicolas.trossat@boutik-circus.fr Lieu: Var Date anniversaire: 18/04

Re:la lightbox sur les images

Il y a 8 Années, 12 Mois
Karma: 21  
Il faut regarder ce que renvoi précisément $tool->template() mais à priori, c'est ca qu'il faut mettre dans le contenu de ton lien.

Ceci dit j'ai jamais touché à ce plugin, il faut tester quoi...
 
Dernière édition: 26/04/09 à  03:04 Par Boutik Circus.
L'administrateur a désactivé l'accès public en écriture.
Revenir en hautPage: 12
Modérateur: Gabriiiel, ILOA, zuiko