[plugin] Product_Popup

Messagepar j4k » Jeu 19 Jan 2006, 01:15

voila comment installer lightbox à la place du popup sur la page produit.

Téléchargez tous les fichiers (pour la dernière version : http://www.huddletogether.com/projects/lightbox/), et placez les comme suit :

/templates/montemplate/lightbox_plus.js
/templates/montemplate/images/overlay.png
/templates/montemplate/images/blank.gif
/templates/common_img/expand.gif
/templates/common_img/loading.gif
/templates/common_img/shrink.gif

Dans votre page template.php, ajoutez dans les balise <head> :
Code: Tout sélectionner
<script type="text/javascript" charset="UTF-8" src="<?php echo 'templates/'.$template.'/'?>lightbox_plus.js"></script>

Ajoutez dans stylesheet.css :
Code: Tout sélectionner
/*------------lightbox------------*/
#lightbox {
 background-color: #eee;
 padding: 10px;
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
}
#overlay {
  background-image: url(images/overlay.png);
}
* html #overlay {
  background-color: #000;
 background-image: url(images/blank.gif);
  filter: Alpha(opacity=50);
}
/*------------lightbox------------*/

Editez le fichier lightbox_plus.js pour indiquer le chemin vers les images à la fin du fichier
Code: Tout sélectionner
// === main ===
addEvent(window,"load",function() {
  var lightbox = new LightBox({
   loadingimg:'/templates/common_img/loading.gif',
   expandimg:'/templates/common_img/expand.gif',
   shrinkimg:'/templates/common_img/shrink.gif'
  });
});

et pour finir dans la page /includes/content/product_info.php :

remplacez
Code: Tout sélectionner
 document.write('<?php echo '<p><a href="javascript:popupWindow(\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></p>'; ?>');

par
Code: Tout sélectionner
document.write('<?php echo '<a href="' . DIR_WS_IMAGES . $product_info['products_image'] . '" rel="lightbox" class="horizontal">'.tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT).'</a>'; ?>');

voila, normalement, c'est tout, pour voir le résultat http://www.boutique-medievale.com et clic sur les produits

si l'image est plus grande, il y a un redimensionnement avec possibilité de zoomer, et un petit logo de chargement pour les images lourdes.
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar domallia » Sam 21 Jan 2006, 20:20

Je l'ai installé et c'est génial !

Merci
domallia
Membre actif
 
Messages: 43
Inscription: Mer 19 Oct 2005, 22:51
Localisation: Savoie

Messagepar j4k » Mar 24 Jan 2006, 17:27

the last version of this tuto is now on wiki : http://wiki.oscss.org/doku.php?id=osc:p ... duct_popup

use this topic for any suggestions or comments
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar stepibou » Mar 24 Jan 2006, 18:31

hello j4k!

Merci pour cette belle contrib!

Est il possible que le fond ne soit pas grisé?
English : Is it possible for the background , not to be darker?

Perso, je pense qu'elle ne conviendra pas forcement à tous,
Et qu'on peut laisser le choix de l'installer ou pas, vu qu'elle est rapide à installer.
Ou encore mieux laisser le choix dans l'admin! :P

;)
Je t'enverrai un mp
--> osCSS inside <--
stepibou
Membre très actif
 
Messages: 274
Inscription: Dim 30 Oct 2005, 02:15
Localisation: Lyon

Messagepar j4k » Mar 24 Jan 2006, 18:39

you can modify the background color by modifying overlay.png pict.
and adapt transparency by modifying the alpha of this pict.

And yes it could be a switchable plugin in the admin.
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar domallia » Mar 24 Jan 2006, 23:13

Just a little question : :D
Why do you speak english?
Are we obliged to use english language on this forum? If yes, i'll have to improve my vocabulary ! :rolleyes:
Unless it is a bug or a virus on my computer ?
Bye to every body !
domallia
Membre actif
 
Messages: 43
Inscription: Mer 19 Oct 2005, 22:51
Localisation: Savoie

Messagepar j4k » Mer 25 Jan 2006, 01:53

I think it's a virus on your computer ! nobody speak english here ! ;)

never the mind, it's a good exercice for you to improve your vocabulary

http://forums.oscss.org/viewtopic.php?id=197
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar dAvydAv » Mar 25 Sep 2007, 18:48

Bonjour,

la version de "lightbox" à laquelle vous faites référence n'est visiblement plus la même sur le site:
http://www.huddletogether.com/projects/lightbox/
c'est la version: Lightbox v2.03.3

J'ai essayé à partir de ce que j'ai compris des indications données de part et d'autre pour manipuler lightbox mais sans succès

1/Insérer les apelles aux fichiers js dans l'entête de "templates/MonTemplate/template.php":
Code: Tout sélectionner
<script type="text/javascript" src="templates/MonTemplate/prototype.js"></script>
<script type="text/javascript" src="templates/MonTemplate/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="templates/MonTemplate/lightbox.js"></script>

2/Insérer les fichiers js dans le dossier /templates/MonTemplate/:
prototype.js, scriptaculous.js, lightbox.js

3/Insérer l'apelle au fichier css dans l'entête de "templates/MonTemplate/template.php":
Code: Tout sélectionner
<link rel="stylesheet" type="text/css" href="templates/MonTemplate/lightbox.css" media="screen" />

4/Modification du fichier lightbox.css l52 et l53:
Code: Tout sélectionner
#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; }

5/ Modification du fichier product_info, à mon avis c là que cela se complique et que j'apprécierai l'avis de qq'1 de plus calé que moi en phpou j'ai fais la même manipulation que j4k:
j'ai remplacé ça
Code: Tout sélectionner
document.write('<?php echo '<p><a href="javascript:popupWindow(\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></p>'; ?>');

par
Code: Tout sélectionner
document.write('<?php echo '<a href="' . DIR_WS_IMAGES . $product_info['products_image'] . '" rel="lightbox" class="horizontal">'.tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT).'</a>'; ?>');

j'ai pris la peine de décrire toutes ses étapes our etre précis et je pense que cette démarche ineteressera d'autres utilisateurs...

:)
dAvydAv
Membre actif
 
Messages: 59
Inscription: Lun 06 Aoû 2007, 18:44

Messagepar cymbeline » Mer 26 Sep 2007, 10:15

Bonjour,

J'utilise cette version et cela fonctionne.

L'appel de lightBox.js dans template.php, comme ceci :

Code: Tout sélectionner
<script type="text/javascript" charset="UTF-8" src="<?php echo 'templates/'.$template.'/'?>lightbox.js"></script>

Dans lightBox.js renseigner pour l'uitlisation des images :

Code: Tout sélectionner
// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = "templates/MonTemplate/images/loading.gif";   
var closeButton = "templates/MonTemplate/images/close.gif";

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar dAvydAv » Mer 26 Sep 2007, 10:56

Bonjour,

J'ai apporté les modifications que tu propose mais rien...:o

Je m'interroge pour savoir si je dois adapter ce qui m''est proposé dans lightbo.js en commentaire


Code: Tout sélectionner
  // Code inserts html at the bottom of the page that looks similar to this:
    //
    //  <div id="overlay"></div>
    //  <div id="lightbox">
   //    <div id="outerImageContainer">
    //      <div id="imageContainer">
   //        <img id="lightboxImage">
    //        <div style="" id="hoverNav">
    //          <a href="#" id="prevLink"></a>
    //          <a href="#" id="nextLink"></a>
    //        </div>
    //        <div id="loading">
    //          <a href="#" id="loadingLink">
   //            <img src="images/loading.gif">
    //          </a>
    //        </div>
    //      </div>
    //    </div>
    //    <div id="imageDataContainer">
   //      <div id="imageData">
    //        <div id="imageDetails">
   //          <span id="caption"></span>
    //          <span id="numberDisplay"></span>
    //        </div>
    //        <div id="bottomNav">
    //          <a href="#" id="bottomNavClose">
    //            <img src="images/close.gif">
    //          </a>
    //        </div>
    //      </div>
    //    </div>
    //  </div>

à product_info.php, je vais cherche de ce coté là...

a++
dAvydAv
Membre actif
 
Messages: 59
Inscription: Lun 06 Aoû 2007, 18:44

Messagepar dAvydAv » Mer 26 Sep 2007, 17:21

Je commene à m'arrache les cheveux... je vois vraiment pas ou est le pb.
J'ai abandonné l'idée des structurer et suis reparti sur les conseils données par cymbeline.

Je voulais le couplé à Ultra pics, que je n'ai eu aucun souci à installer. Comment ça ne focntionnait pas je l'ai enlever et suis reparti de 0. Mais rien...

Quand j'affiche le code en front office,
Code: Tout sélectionner
<div id="productImage">
      <script type="text/javascript"><!--
      document.write('<a href="images/image.jpg" rel="lightbox" class="horizontal"><img src="images/image.jpg"" alt="" title="" width="100" height="100" /></a>');
      //--></script>
      <noscript>
      <p><a href="http://localhost/catalog/images/image.jpg"><img src="images/" alt="image.jpg"" title=" " width="100" height="100" /></a><br /><a href="http://localhost/catalog/images/image.jpg">Cliquer pour agrandir</a></p>      </noscript>             
         
    </div>

Est-ce le résultat escompté??
dAvydAv
Membre actif
 
Messages: 59
Inscription: Lun 06 Aoû 2007, 18:44

Messagepar cymbeline » Mer 26 Sep 2007, 18:12

Essai avec seulement lightBox.

Voici ce que j'ai fait, partant du prinicpe que je travailles sur le template clean

sur le site mentionné ci-dessus : http://www.huddletogether.com/projects/lightbox/ ; j'ai téléchargé

lightbox.js - the important stuff
lightbox.css - basic style and tricky PNG support
overlay.png - 80% opacity, black tile used to create shadow
loading.gif - mock status bar used in examples above
close.gif - 'X' graphic placed in top-right corner

Dans oscss : j'ai placé les fichiers comme ceci.

/templates/clean/lightbox.js
/templates/clean/images/overlay.png
/templates/clean/images/blank.gif
/templates/clean/images//loading.gif

J'ai ajouté le contenu du fichier css directement dans : /templates/clean/styleshhet.css

ensuite, j'ai renseigné le fichier lightBox.js avec

Code: Tout sélectionner
// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = "templates/clean/images/loading.gif";       
var closeButton = "templates/clean/images/close.gif";

Dans /templates/clean/template.php rajouter

Code: Tout sélectionner
<script type="text/javascript" charset="UTF-8" src="<?php echo 'templates/'.$template.'/'?>lightbox.js"></script>

Extrait de ma page avec seulement lightBox : catalog/includes/content/product_info.php

Code: Tout sélectionner
    <div id="productImage">

      <script type="text/javascript"><!--

document.write('<?php echo '<a href="' . DIR_WS_IMAGES . $product_info['products_image'] . '" rel="lightbox" class="horizontal">'.tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT).'</a>'; ?>');
   
      //--></script>
      <noscript>
      <?php echo '<p><a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br /><a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '">' . TEXT_CLICK_TO_ENLARGE . '</a></p>'; ?>
      </noscript>             

    </div>

++ ;)
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar dAvydAv » Jeu 27 Sep 2007, 11:51

YES!!!!!!!!!!

Ca marche, c'est de la balle... Merci pour ta patience, je ne télécharger pas le même lightbox apparement, je me servai de ça:

http://www.huddletogether.com/projects/lightbox2/

enfin j'essayais...

un grand merci, cymbeline, un de plus . ;)

Je m'en presse de le marrier à ultrapics.
:D
Dernière édition par dAvydAv le Jeu 27 Sep 2007, 11:52, édité 1 fois.
dAvydAv
Membre actif
 
Messages: 59
Inscription: Lun 06 Aoû 2007, 18:44

Messagepar didiblo » Jeu 03 Avr 2008, 12:14

Ah mon tour, j'ai tout installé comme l'as dit cymbeline mais ça ne marche que pour le template "clean" et pas pour "generic".

J'ai pas oublié d'adapter :
/templates/generic/lightbox.js
/templates/generic/images/overlay.png
/templates/generic/images/blank.gif
/templates/generic/images//loading.gif

/templates/generic/styleshhet.css

et
var loadingImage = "templates/generic/images/loading.gif";
var closeButton = "templates/generic/images/close.gif";

Ça marche tout simplement pas, ça m'affiche juste l'image dans la même fenêtre.
Voila, si quelqu'un a une idée, merci de m'en faire part.

++
Dernière édition par didiblo le Jeu 03 Avr 2008, 12:14, édité 1 fois.
didiblo
Membre inactif
 
Messages: 9
Inscription: Mer 02 Avr 2008, 19:31

Messagepar cymbeline » Jeu 03 Avr 2008, 12:48

Bonjour,

As-tu bien dans ? :

/templates/generic/template.php

ajouter

Code: Tout sélectionner
 <script type="text/javascript" charset="UTF-8" src="<?php echo 'templates/'.$template.'/'?>lightbox.js"></script>

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar didiblo » Jeu 03 Avr 2008, 17:48

J'ai tout fait comme tu le dis dans le post #12 en remplacant clean par generic et ca marche pas.
didiblo
Membre inactif
 
Messages: 9
Inscription: Mer 02 Avr 2008, 19:31

Messagepar yannflamm » Mer 09 Avr 2008, 15:06

regardes par ici

c'est pas
var loadingImage = "templates/generic/images/loading.gif";
var closeButton = "templates/generic/images/close.gif";

mais
var loadingImage = 'templates/chrome/images/loading.gif';
var closeButton = 'templates/chrome/images/close.gif';
yannflamm
Membre inactif
 
Messages: 5
Inscription: Ven 25 Mai 2007, 00:23

Messagepar didiblo » Jeu 17 Avr 2008, 17:38

Non, ça change rien à mon problème ça.

Après quelques recherches, il semblerait qu'il y ai un conflit avec la fonction "initMenu()" du fichier "/includes/boxes/tab_menu_categories.php" (gère le menu dynamique du haut en javaScript)

Car si on supprime ce fichier, le menu n'apparait évidement plus, mais les lightBox marchent normalement.

Donc si quelqu'un a une idée, j'en ai vraiment besoin !!!

Merci

PS: je rappel, je n'ai ce problème qu'avec le template "generic".
Dernière édition par didiblo le Jeu 17 Avr 2008, 17:41, édité 1 fois.
didiblo
Membre inactif
 
Messages: 9
Inscription: Mer 02 Avr 2008, 19:31

Messagepar didiblo » Mar 22 Avr 2008, 12:04

C'est bon, ca marche il m'a suffit de mettre

Code: Tout sélectionner
<script type="text/javascript" charset="UTF-8" src="<?php echo 'templates/'.$template.'/'?>lightbox.js"></script>

En entête du fichier 'catalog/includes/content/product_info.php'
didiblo
Membre inactif
 
Messages: 9
Inscription: Mer 02 Avr 2008, 19:31


Retourner vers Plugin

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités

cron