Ajouter la possibilité de POPUP sur image dans CMS Prestashop
By Fran6t on samedi, 20 mars 2010, 17:50 - Prestashop - Permalink
Pour notre boutique de vente de cartouches d'encre au profit de la recherche sur les maladies rares j'ai eu besoins dans les pages qui peuvent être créées par le biais de l'administration de la boutique du système de POPUP lors du clique sur une miniature d'image.
Petite précision mais d'importance la boutique est motorisée par PRESTASHOP qui est un super système de boutique en ligne relativement facile à mettre en oeuvre.
Je me suis donc inspiré du fils de discussion du Forum Prestashop et j'ai donc effectué ces petites modifications :
- Dans le fichier cms.php juste avant la ligne de code include(dirname(FILE).'/header.php'); j'ai ajouté :
$css_files = array('http://www.consommable-cartouche-encre.info/'.PS_BASE_URI.'css/thickbox.css' => 'all');
$js_files = array('http://www.consommable-cartouche-encre.info/'.PS_BASE_URI.'js/jquery/thickbox-modified.js');
- Dans le fichier cms.tpl j'ai ajouté en tout début :
{include file=$tpl_dir./thickbox.tpl}
- Pensez ensuite à mettre dans vos liens les bons attributs comme par exemple (la class shown permet d'enclancher le mécanisme de zoom et l'atribut rel other-views permet d'afficher une suite d'image) :
<a class="shown" rel="other-views" title="Txt qui apparait en légende de la photo"href="Lien vers la photo en gransd format"><img src="Lien vers la miniature de la photo" alt="Legende pour l'image"></a>
Le résultat est visible sur notre boutique de vente cartouches et toners d'impression en ligne.
Commentaires
Bonjour,
sujet très intéressante, je cherche à faire la même chose, malheureusement tes images ne s'affiche pas dans thickbox mais bel et bien dans une nouvelle page du navigateur sur le site "vente de cartouche..." , et j'ai moi aussi le m^me problème sur le site que je prépare... si quelqu'un a une idée ?
merci
sebpolok
Mince tu as raison, mais ce n'est pas du a ce que je présente ici dans le billet, mais au fait que j'ai mis à jour prestashop et que maintenant il doit manquer quelque chose. Je me penche sur ce problème quand j'aurais une minute.
En regardant vite fait je vois déjà que dans le source il n'y a plus la ligne concernant la feuille de style thickbox.css. Quand j'ai fais la mise à jour cela a surement écrasé cms.php par une nouvelle version.
ok, tiens moi au courant car en suivant l'article et en rajoutant le code comme indiqué cela ne fonctionne pas de mon coté...
on se tiens au jus
De mon côté il suffirait de placer l'attribut : class="thickbox" dans la balise <a href=...> des images
malheureusement l’éditeur des pages cms supprime l'attribut class lors de l'enregistrement, du coup, pour l'instant, à part insérer l'attribut class directement dans la base de donnée...
J'ai trouvé !
vu que l'editeur est "bloquant" au niveau de la balise "a", je place mon attribut classe (class="thickbox") dans un div qui contient mon image.
Ensuite je vais dans le fichier thickbox-modified.js (js/jquery/)
A la ligne 14 nous avons :
$(document).ready(function(){tb_init('a.thickbox, area.thickbox, input.thickbox)
que je modifie par :
$(document).ready(function(){tb_init('a.thickbox, area.thickbox, input.thickbox, div.thickbox a')
grace à cette modif je lui dit de lancer la fonction thickbox non seulement pour le balise a, area, input qui ont des classes thickbox mais aussi pour pour des div qui on la classe thickbox et qui contiennent une img.
Le script de tickbox est donc bien lancé et va chercher le lien href contient dans la balise "a" .
voilou,
cela fonctionne chez moi, je ne pense pas qu'il y d'effet secondaire (à vérifier).
Superb images, the colour and depth of the photos are breath-taking, they draw you
in as though you belong of the make-up.
This design is incredible! You certainly know how to keep a reader
amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job.
I really loved what you had to say, and more than that, how you presented it.
Too cool!