[Modification Editorial] un image Slider en 3D !!

[EnveloppeBulle]

Bonjour

voici une petite contribution : ce n'est pas un module (à vous d'en faire un à partir de cela si ça vous dit), mais une adaptation du slider d'images 3D (gratuit) de CU3ER (http://www.progressivered.com/cu3er/).

Ce script étant juste époustouflant, je l'ai adapté pour pouvoir l'intégrer à mon presta, comme vous pourrez le voir ici : http://www.alsace-cadeau.com

Je suis conscient que mon intégration n'est pas très "dynamique" et qu'il faut la modifier "à la main", mais j'ai déjà pas mal galéré pour faire en sorte que ça fonctionne alors bon...

Dans le package, vous trouverez :

- cu3er.swf : à placer dans votre module Editorial

- config.xml : même chose. Il sert à définir les slides qui seront diffusés et les transitions. La doc pour cette config se trouve ici : http://www.progressivered.com/cu3er/docs/

- dossier swfobject : à placer dans le dossier JS à la racine.

Vous devez créer un dossier "slides" dans votre module Editorial pour y mettre vos images et faire pointer les url contenues dans config.xml vers ce dossier. Bien entendu, vous pouvez faire pointer où vous voulez, dans un autre dossier... c'est comme vous le sentez.

Modifications à effectuer :

- dans le fichier "header.tpl" de votre theme, à l'endroit où vous intégrez les scripts js (lignes 30, 31, 32...), intégrez le script js/swfobject/swfobject.js :
(intégrez-le avec comme source :"{$base_dir}js/swfobject/swfobject.js")

- dans le fichier "editorial.tpl" de votre module editorial, insérez cette portion de code au début de la page, après le

code :

<!-- Module CU3ER -->

{literal}
[removed]
       var flashvars = {};
       flashvars.xml = "http://www.monsite.com/modules/editorial/config.xml";
       flashvars.font = "font.swf";
       var attributes = {};
       attributes.wmode = "transparent";
       attributes.id = "cu3er-container";
       swfobject.embedSWF("http://www.monsite.com/modules/editorial/cu3er.swf", "cu3er-container", "560", "235", "9", "http://www.monsite.com/js/swfobject/expressInstall.swf", flashvars, attributes);
[removed]


{/literal}





    

<!-- ************************ -->

NOTE : comme il n'est pas possible d'écrire du code avec des balises script, cela a été remplacé par Removed. Notez qu'il faut remplacer le 1er removed par "< script t y p e = " t e x t / javascript " > " et le 2ème par "< / script >"

Pensez bien à modifier TOUS les liens dans le template et dans le fichier de config XML.
Paramétrez la taille du slider dans le template puis créez vos images aux mêmes dimensions.

Si vous avez des problèmes d'affichage, vérifiez vos css dans le global.css. J'avais un problème comme ça, où dans les css une hauteur minimum pour les objets était définie. Je l'ai simplement suprimée et maintenant tout est ok ! (Firebug est mon ami !)

cu3er-slider3D.zip

[amandloren]

super ton slider ! dés que j'ai 1 min je l'essaie.

[Natsu]

Merci pour l'info
Si j'ai pas la flemme, je fais un module ce soir

[tids]

En effet ça à l' air top, mais j' ose pas rentrer dans le code, je vais tout péter....
Si ça peut faire l' objet d' un module, c' est royal !

merci
Tids

[amandloren]

Merci pour l'info
Si j'ai pas la flemme, je fais un module ce soir

perso, ça ne me dérange pas de toucher au core mais s'il y a un module, autant l'utiliser, ça évitera de faire des modifs à la prochaine maj

[EnveloppeBulle]

petite précision avant de vous lancer dans un module : ce slider permet aussi d'ajouter une zone de texte sur les images (tout est paramétrable, voir doc). Ceci pourrait être très sympa, notamment pour le multilangue.
Je n'ai pas utilisé cette fonctionnalité car il y a un petit bug : en effet, le lien de l'image et le lien du texte peuvent être différents. Par contre, impossible de paramétrer pour que le lien du texte s'ouvre dans la page courante... ce qui me posait pb.
Vous pourriez alors vous dire :"bein, on s'en fout, on met pas de lien sur le texte". Ok, mais je crois me souvenir que le texte est par-dessus l'image en flash, donc ça réagit comme un lien quand vous passez dessus et du point de vue du client, ça ferait vraiment bizarre de pouvoir cliquer partout SAUF sur le texte...
Donc pour le coup, j'ai écrit le texte dans mes images

[maxhome]

EnveloppeBulle bravo, superbe effet...
Si en plus notre Natsu "national" nous fait un module, nous aurons enfin un slider de très belle qualité, hautement personnalisable dans le BO...
Merci de nous l'avoir fait partager

[Natsu]

Hello,

Juste pour informer: j'ai commencé le module

[thierry_02]

c cool !

[thethreedegrees]

question.. où est "font.swf"?
merci.

EDIT:
pas de problème, j'ai créé un nouveau fichier,ici ci-joint.
Thanks!

font.swf

[tids]

petite question :
si j' applique ces modifs sans passer par un module, elle seront écrasées par la prochaine mise à jour, non ?

[Natsu]

C'est fort possible oui..

[ocinar]

I would like first to thank you for a nice trick. It did not work when I copy the module into the folder. Would be nice if you give more details. Thanks in advance. sorry for my english

[EnveloppeBulle]

Maybe it's because it's NOT a module (as described in the post)

Natsu is working on it to make a module from that piece of code, but we can understand that he must be a lil bit busy on this end of year...

[Jean-Bruno]

Salut a tous, mortel cet effet, j'en suis tout bluffé !
@Natsu t'es vraiment sur tout les fronts, c'est cool, mais il faut dormir parfois ;-)

Merci les amis

[bleu]

Bonjour Et Merci pour se module ;-)

Mai je me retrouve avec sa en haut de ma page j'ai beau chercher je trouve pas de solution


"http://s282593046.onlinehome.fr/shop_vx/js/swfobject/swfobject.js�)

{/if}
       [removed][removed]
       [removed]
           var baseDir = '{$content_dir}';
           var static_token = '{$static_token}';
           var token = '{$token}';
           var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
       [removed]
       [removed][removed]
       [removed][removed]
       [removed][removed]
       {$base_dir}js/swfobject/swfobject.js”
       {if isset($js_files)}
   {foreach from=$js_files item=js_uri}
   [removed][removed]
   {/foreach}
{/if}/code]


Une idée du problème ?? 

RESOLUE

solution
[code][removed][removed]

[tons28]

Excellent ce module. Demo sur mon site www.luxoparquet.fr
Par contre pour certaines images je ne mets pas de texte, comment puis je faire disparaitre le cadre qui normallement accueille le texte en fonction de l'image ?
Merci

[Mr Fred]

Felicitation vraiment sympa le flash fait son effet
dommage qu'il ne sagisse pas d'un module

Merci

[ptidg]

Merci beaucoup pour cette contribution.
Grâce aux très bonnes explications j'ai réussi à le mettre en place malgré mon piètre niveau...

[bio-ventes]

Vivement le module, j'ai pas réussi à le mettre ^^

[Natsu]

Toujours en cours de dev mais avec la période de noël qui arrive c'est un peu compliquer et le manque de temps se fait sentir
Il y a aussi beaucoup de paramètre du coup ça prend du temps

[bio-ventes]

OK !! Au besoin, je pourrais le tester ^^

[CoYaN]

Bonjour,

Y'a t il une possibilité d'enlever l'animation cu3er.swf (carré rouge cu3er) au départ.

Cordialement

[Natsu]

Non a moins d'avoir le fichier fla

[aguernz]

S'il vous plaît envisager de traduire le module en anglais lorsque vous le terminer.

Merci pour votre dur labeur.

(message traduit en français avec Google)

[Mephivio]

impressionnant !

[donaldlloyds]

super symap on compte sur toi natsu pour nous sortir un mod tout propre

[scary]

super vivement le module....§§§§!!!!!!

[zubb33]

super vivement le module....§§§§!!!!!!

C'est clair, bravo c'est un effet super sympa !

[BVince]

Bonjour,
J'adore l'effet, je voulais savoir ou en était le module ... développement en cours ou arrêté ?

[EnveloppeBulle]

Le module à réaliser est assez compliqué car il y a pas mal d'options à configurer pour ce slider. De plus, je pense que Natsu est assez occupé, ce qui se comprend car la période d'activité intense (fin d'année) n'est pas encore tout à fait terminée (je suis dans le même cas).

Sinon, pour le motiver, vous pouvez toujours lui envoyer un petit don par paypal (très simple) : http://presta.u-web.org/content/6-donation

[Juan95]

Vivement ce module, l'effet est superbe !

[ghost73]

bonjour à tous

voilà j'ai téléchargé CU3ER mais je n'ai pas de fichier xml donc impossible de l'installer sue mon site joomla qui tourne pour le moment en local

quelqu'un pourai m'aider svp
bien à vous

[BVince]

Bonjour,

Je te mets un fichier xml.

config.zip

[Natsu]

Merci EnveloppeBulle

Effectivement, beaucoup de travail en ce moment... comme dit dans un autre post, j'ai un projet de fin d'année à rendre du coup ça me prend tout mon temps libre :/ ceci dit je vais essayer de finir ce que j'ai a faire sur prestashop avant de me mettre pleinement à mon projet (DVD interfactif + book papier)

[jolvil]

Pour ceux qui souhaitent un module, en voici un basé sur le meme script CU3ER, plutot basique: transition en simple cube.

http://www.prestashop.com/forums/viewthread/41710/

Le module de BVince lui aussi adapte le script CU3ER mais il est completement paramétrable en BO, un must:

http://www.prestashop.com/forums/viewthread/42267/

[ghost73]

Merci à toi BVince j'essaye ca tout a l'heure

[manuphi]

Des nouvelles de ce module Natsu ?
C'est en bonne voie ...
Besoin d'un coup de main ?

Je trouve Cu3er vraiment abouti et serai prêt à payer pour un module intégré à Prestashop permettant son usage.

[BVince]

manuphi,

Tu peux toujours aller voir sur mon site, suivre la signature, il est en mode free mais si tu veux faire un petit don ou même un gros j'accepte... ;-)

Le fil du forum est ici :
http://www.prestashop.com/forums/viewthread/42267/modules_tiers/module__animation_3d__accueil_de_votre_site

[novatis]

Bonjour

merci de partager ce module, très intéressant, bravo pour le constructeur smile)
sauf que je n’arrive pas a le mettre en marche malgré la simplicité de l’installation et de la mise en place

rien ne s’affiche sur le site, la config semble correct, l’aperçu fonctionne mais sur le site rien, aucun changement
a cause du template inoptik peut être ?

site web: http://www.nova-store.com/
quelqu’un peux m’aider a résoudre ce problème

Merci d’avance

[EnveloppeBulle]

Si vous avez des problèmes d’affichage, vérifiez vos css dans le global.css. J’avais un problème comme ça, où dans les css une hauteur minimum pour les objets était définie. Je l’ai simplement suprimée et maintenant tout est ok ! (Firebug est mon ami !)

Avez-vous essayez avec firebug dans firefox de modifier les css pour voir si ça avait une influence ?

ou alors, modifiez/supprimez dans votre global.css une valeur mini de hauteur (height) qui se trouverait au tout début, après un *{.........

[matdollars]

Donc si j ai bien compris il faut aller chercher le module chez BVince ?
Merci.

[sebban]

Bonjour merci pour ce module mais rien ne s affiche pour moi :/ cela fait 2 heure que je suis dessus j esserai demain si une perssone peux m aider svp

[Rosiel]

Bonjour,

 

Ne peut-on vraiment pas enlever le cuber rouge au début de l'animation ? merci