Jump to content

[Module Gratuit] Pour Diaporama En Colonne


Azureaweb

Recommended Posts

Bonjour à tous/toutes,

 

Je vous met à disposition un module diaporama en colonne que j'ai développé en m'inspirant du module homeslider.

Ce module vous permet à ce jour de configurer la vitesse de défilement, de mettre en pause au survol, de régler la taille des images.

L'ordre des images se fait par drag and drop entre elles dans le BO.

Il est possible de lier à une image un titre, un lien, de l'afficher ou non.

Il est possible de tout supprimer ou unitairement, ainsi que de modifier chaque slide.

 

Ceci est une version "brut" qui manque de beaucoup d'améliorations, mais n'étant pas le seul à chercher ce type de module, je vous le fait partager...

 

Je ne fournirait que très très peu de support, et à savoir, je ne l'ai testé que sur PS 1.4.7.

Vu les technologies utilisées, je pense que la compatibilité est large, mais bon...

 

Bonne utilisation, et hésitez pas à laisser vos commentaires pour les futures versions !

 

@ Plus !

 

Je met la dernière version incluant les langues français, espagnol, et catalan.

Merci à Per_PR pour sa contibution !

 

De même merci à oolivv pour un bug CSS trouvé en conflit avec le module blockslides.

 

voici une url de démo :

http://www.willyoo-t...tes/prestashop/

 

pour le backoffice :

http://www.willyoo-t...tashop/admin_06/

 

Accès :

[email protected]

azureaweb

 

Testez et revenez avec vos feedbacks...

 

Version 2.1 dispo !

Compatible 1.4 et 1.5

Gestion des langues par image.

Affichage des titres de l'image au survol de celle-ci en BO.

Ajout d'un titre entre les flèches de défilement traduisible en BO dans l’outil de traduction de PS.

Couleur des flèches de défilement paramétrable en BO avec jscolor (palette de couleurs).

Prise en charge de tout type d'image

Bon download !

slider_columns_1.2_3langs.zip

slider_columns_v2.0.zip

slider_columns_v2.1.zip

Edited by Azureaweb (see edit history)
  • Like 3
Link to comment
Share on other sites

Pour ceux/celles qui aurait un soucis sur l'animation du diaporama et possédant le module menu haut horizontal de Julien Breux, j'ai relevé ceci :

 

En fait, après débug, il se trouve que j'ai dû remplacer un bout de code dans le fichier superfish-modified.js du module menu :

A la fin du fichier il y avait :

 

jQuery(function(){
      jQuery('ul.sf-menu').superfish();
});

 

que j'ai remplacé par :

 

$('ul.sf-menu').superfish();

 

Une fois cette modification faite, tout est rentré dans l'ordre...

Link to comment
Share on other sites

  • 3 weeks later...

Super module, je recherchais justement un genre à cela pour exposer quelques réalisations dans notre domaine.

 

Merci bcp et bonne continuation, il serrait peut être bien de pouvoir ajouter plusieurs images à la fois sans descriptions :-) (peut être dans une prochaine version)

Link to comment
Share on other sites

Merci oolivv,

 

J'ai commencé le dev' d'un upload multi par drag and drop, mais je manque un peu de temps pour le moment...

Je passe pas mal de temps sur un module slideshow de home page en full jquery et full administrable en utilisant jquery UI en BO (buttons, sliders,etc...)

 

Hésite pas pour me faire des retours à l'utilisation !

 

@plus !

Julien.

Link to comment
Share on other sites

Bonjour à tous/toutes,

 

Je vous met à disposition un module diaporama en colonne que j'ai développé en m'inspirant du module homeslider.

Ce module vous permet à ce jour de configurer la vitesse de défilement, de mettre en pause au survol, de régler la taille des images.

L'ordre des images se fait par drag and drop entre elles dans le BO.

Il est possible de lier à une image un titre, un lien, de l'afficher ou non.

Il est possible de tout supprimer ou unitairement, ainsi que de modifier chaque slide.

 

Ceci est une version "brut" qui manque de beaucoup d'améliorations, mais n'étant pas le seul à chercher ce type de module, je vous le fait partager...

 

Je ne fournirait que très très peu de support, et à savoir, je ne l'ai testé que sur PS 1.4.7.

Vu les technologies utilisées, je pense que la compatibilité est large, mais bon...

 

Bonne utilisation, et hésitez pas à laisser vos commentaires pour les futures versions !

 

@ Plus !

 

Petit modif visuelle dans la 0.3

 

voici une url de démo :

http://www.willyoo-t...tes/prestashop/

 

pour le backoffice :

http://www.willyoo-t...tashop/admin_06/

 

Accès :

[email protected]

azureaweb

 

Testez et revenez avec vos feedbacks...

 

 

Hello Azureaweb

 

A very good job and I really like the idea and as I have shown in the site but in my case I installed the module version v.0.1 and v.0.3 on Presta1.5.2 version and gives me some failure front and back view, the link is: http://tienda1.designstore.es ..

 

I'm currently preparing a translation into Spanish and Catalan module so you can incorporate and offer more languages ​​...

 

Thank you very much for your help

Link to comment
Share on other sites

Hello Per_PR,

 

Happy to know that my module could help someone ;)

 

As i said in my post just on top, i have made some changes for the 1.5 version.

You can find this version here : http://www.willyoo-t...tes/prestashop/

 

I will put in the first post the new zip too.

 

cheers

 

 

Hello Azureaweb

 

Thank you very much and download the module correctly, from the link I facilitaste ...

 

I enclose the translation into Spanish to be able to incorporate and make your development and reach more people.

 

Sorry to write in English but French is that I can not translate well ..

 

<?php
global $_MODULE;
$_MODULE = array();
$_MODULE['<{slider_columns}prestashop>slider_columns_23d5155035a8c7ef8ab7d7bdb101cde8'] = 'Presentación en columnas';
$_MODULE['<{slider_columns}prestashop>slider_columns_1e6ab77a58a1adecc21918b2903ec773'] = 'Mostrar una presentación de diapositivas en las columnas';
$_MODULE['<{slider_columns}prestashop>slider_columns_20015706a8cbd457cbb6ea3e7d5dc9b3'] = 'Configuración actualizada';
$_MODULE['<{slider_columns}prestashop>slider_columns_bb6abf21a6c70c5740d93093b5518954'] = 'Agregó la diapositiva';
$_MODULE['<{slider_columns}prestashop>slider_columns_eca74121d9c8afc055c528d9c5d73333'] = 'Diapositiva no suprimida';
$_MODULE['<{slider_columns}prestashop>slider_columns_3bac39593997b4d3a7337fabde33cf62'] = 'Administración del Slider';
$_MODULE['<{slider_columns}prestashop>slider_columns_66ae04709848465a792b6f537833776c'] = 'Configuración del diaporama';
$_MODULE['<{slider_columns}prestashop>slider_columns_44877c6aa8e93fa5a91c9361211464fb'] = 'Velocidad de desplazamiento';
$_MODULE['<{slider_columns}prestashop>slider_columns_86c37d6378ba62fb084e966293cc91ea'] = 'Pausar el movimiento?';
$_MODULE['<{slider_columns}prestashop>slider_columns_93cba07454f06a4a960172bbd6e2a435'] = 'Si';
$_MODULE['<{slider_columns}prestashop>slider_columns_bafd7322c6e97d25b6299b5d6fe8920b'] = 'No';
$_MODULE['<{slider_columns}prestashop>slider_columns_b5571883666fa458cca3ab3d64ef503c'] = 'Largo de la diapositiva (width)';
$_MODULE['<{slider_columns}prestashop>slider_columns_04fe3ad0180ec7cf3284e5a3d18bc47a'] = 'Ancho de la diapositiva (height)';
$_MODULE['<{slider_columns}prestashop>slider_columns_94966d90747b97d1f0f206c98a8b1ac3'] = 'Guardar';
$_MODULE['<{slider_columns}prestashop>slider_columns_bc094dc5e201161ed18a521dc04ca59b'] = 'Editar diapositiva';
$_MODULE['<{slider_columns}prestashop>slider_columns_056f53405bf3cf4bde3731c26d725365'] = 'Añadir una imagen';
$_MODULE['<{slider_columns}prestashop>slider_columns_4eb976bcbe11c40e739cd08d7bb341b2'] = 'Si no se cargan imagenes, la configuración será conservada.';
$_MODULE['<{slider_columns}prestashop>slider_columns_c03d53b70feba4ea842510abecd6c45e'] = 'Foto';
$_MODULE['<{slider_columns}prestashop>slider_columns_97e7c9a7d06eac006a28bf05467fcc8b'] = 'Enlace';
$_MODULE['<{slider_columns}prestashop>slider_columns_b78a3223503896721cca1303f776159b'] = 'Título';
$_MODULE['<{slider_columns}prestashop>slider_columns_86754577897acfb25deb69039d49d9a7'] = 'Es visible?';
$_MODULE['<{slider_columns}prestashop>slider_columns_c47e81a064f13fa7a259d21232542478'] = 'Sus imagenes';
$_MODULE['<{slider_columns}prestashop>slider_columns_f2a6c498fb90ee345d997f888fce3b18'] = 'Suprimir';
$_MODULE['<{slider_columns}prestashop>slider_columns_7dce122004969d56ae2e0245cb754d35'] = 'Modificar';
$_MODULE['<{slider_columns}prestashop>slider_columns_5529e71babd9d128f512f5f33ce998ac'] = 'Suprimir todas las diapositivas';
$_MODULE['<{slider_columns}prestashop>slider_columns_81b719308254336f442f9d91552e8b32'] = 'Atención! la supresión de todas las diapositivas es irreversible!';
$_MODULE['<{slider_columns}prestashop>slider_columns_cca83ad5edc7b519bec1474314f9bae9'] = 'Usted no tiene ninguna imagen guardada';
$_MODULE['<{slider_columns}prestashop>slider_columns_2f2bf0146a37034a81ddffcffc47a1f8'] = 'Todas las imagenes han sido suprimidas correctamente';
$_MODULE['<{slider_columns}prestashop>slider_columns_fe67edc8b95943afb562618626d4e209'] = 'Diapositiva eliminada correctamente';

 

 

Today I will try to send the translation to Catalan..

 

Thank you very much.

Link to comment
Share on other sites

Now translation to Catalan

 

<?php
global $_MODULE;
$_MODULE = array();
$_MODULE['<{slider_columns}prestashop>slider_columns_23d5155035a8c7ef8ab7d7bdb101cde8'] = 'Presentació en columnes';
$_MODULE['<{slider_columns}prestashop>slider_columns_1e6ab77a58a1adecc21918b2903ec773'] = 'Mostra una presentació de diapositives en les columnes';
$_MODULE['<{slider_columns}prestashop>slider_columns_20015706a8cbd457cbb6ea3e7d5dc9b3'] = 'Configuració actualitzada';
$_MODULE['<{slider_columns}prestashop>slider_columns_bb6abf21a6c70c5740d93093b5518954'] = 'Ha afegit la diapositiva';
$_MODULE['<{slider_columns}prestashop>slider_columns_eca74121d9c8afc055c528d9c5d73333'] = 'Diapositiva no suprimida';
$_MODULE['<{slider_columns}prestashop>slider_columns_3bac39593997b4d3a7337fabde33cf62'] = 'Administració del slider';
$_MODULE['<{slider_columns}prestashop>slider_columns_66ae04709848465a792b6f537833776c'] = 'Configuració del diaporama';
$_MODULE['<{slider_columns}prestashop>slider_columns_44877c6aa8e93fa5a91c9361211464fb'] = 'Velocitat de desplaçament';
$_MODULE['<{slider_columns}prestashop>slider_columns_86c37d6378ba62fb084e966293cc91ea'] = 'Pausa el moviment?';
$_MODULE['<{slider_columns}prestashop>slider_columns_93cba07454f06a4a960172bbd6e2a435'] = 'Si';
$_MODULE['<{slider_columns}prestashop>slider_columns_bafd7322c6e97d25b6299b5d6fe8920b'] = 'No';
$_MODULE['<{slider_columns}prestashop>slider_columns_b5571883666fa458cca3ab3d64ef503c'] = 'Llarg de la diapositiva (width)';
$_MODULE['<{slider_columns}prestashop>slider_columns_04fe3ad0180ec7cf3284e5a3d18bc47a'] = 'Amplada de la diapositiva (height)';
$_MODULE['<{slider_columns}prestashop>slider_columns_94966d90747b97d1f0f206c98a8b1ac3'] = 'Desa';
$_MODULE['<{slider_columns}prestashop>slider_columns_bc094dc5e201161ed18a521dc04ca59b'] = 'Edita diapositiva';
$_MODULE['<{slider_columns}prestashop>slider_columns_056f53405bf3cf4bde3731c26d725365'] = 'Afegir una imatge';
$_MODULE['<{slider_columns}prestashop>slider_columns_4eb976bcbe11c40e739cd08d7bb341b2'] = 'Si no es carreguen imatges, la configuració serà conservada.';
$_MODULE['<{slider_columns}prestashop>slider_columns_c03d53b70feba4ea842510abecd6c45e'] = 'Foto';
$_MODULE['<{slider_columns}prestashop>slider_columns_97e7c9a7d06eac006a28bf05467fcc8b'] = 'Enllaç';
$_MODULE['<{slider_columns}prestashop>slider_columns_b78a3223503896721cca1303f776159b'] = 'Títol';
$_MODULE['<{slider_columns}prestashop>slider_columns_86754577897acfb25deb69039d49d9a7'] = 'És visible?';
$_MODULE['<{slider_columns}prestashop>slider_columns_c47e81a064f13fa7a259d21232542478'] = 'Les seves imatgess';
$_MODULE['<{slider_columns}prestashop>slider_columns_f2a6c498fb90ee345d997f888fce3b18'] = 'Suprimeix';
$_MODULE['<{slider_columns}prestashop>slider_columns_7dce122004969d56ae2e0245cb754d35'] = 'Modifica';
$_MODULE['<{slider_columns}prestashop>slider_columns_5529e71babd9d128f512f5f33ce998ac'] = 'Suprimeix totes les diapositives';
$_MODULE['<{slider_columns}prestashop>slider_columns_81b719308254336f442f9d91552e8b32'] = 'Atenció! la supressió de totes les diapositives és irreversible!';
$_MODULE['<{slider_columns}prestashop>slider_columns_cca83ad5edc7b519bec1474314f9bae9'] = 'No té cap imatge guardada';
$_MODULE['<{slider_columns}prestashop>slider_columns_2f2bf0146a37034a81ddffcffc47a1f8'] = 'Totes les imatges han estat suprimides correctament';
$_MODULE['<{slider_columns}prestashop>slider_columns_fe67edc8b95943afb562618626d4e209'] = 'Diapositiva eliminada correctament';

 

Merci :)

Link to comment
Share on other sites

Thanks Per_PR !

 

I have included your languages in the module. I posted the last version of it including 3 languages...

 

-------------------------------

 

Merci Per_PR pour les traductions, j'ai mis à disposition dans le 1er post le zip incluant ces langues.

 

@plus !

Julien

Link to comment
Share on other sites

Hello Azureaweb,

 

juste une petite remarque,

lorsque l'on active les flèches du module celui-ci crée des balises .left .right qui ont tendance à faire déconner d'autre modules.

Su mon site j'utilise un module jquery pour le login et si j'active les fleches du tiens, il me crée ces espace blancs qui font partir le design de l'autre en sucette.

 

Si tu veux tester je peux te donner le lien du module il est en free sur ce forum.

Link to comment
Share on other sites

  • 3 weeks later...

merci

juste un truc sur ta maquette lorsqu'on clic sur la categorie nouveaux produits on retrouve cela

 

Fatal error: Uncaught exception 'SmartyException' with message 'Unable to load template file './modules/listorgridswitch/listorgridswitch.tpl' in './product-sort.tpl'' in /homepages/29/d407468879/htdocs/try-it/sites/prestashop/tools/smarty/sysplugins/smarty_internal_templatebase.php:127 Stack trace: #0 /homepages/29/d407468879/htdocs/try-it/sites/prestashop/tools/smarty/sysplugins/smarty_internal_template.php(285): Smarty_Internal_TemplateBase->fetch(NULL, NULL, NULL, NULL, false, false, true) #1 /homepages/29/d407468879/htdocs/try-it/sites/prestashop/cache/smarty/compile/ef82bf05c13f9450cc6330fa2bc6044d7dcae961.file.product-sort.tpl.php(39): Smarty_Internal_Template->getSubTemplate('./modules/listo...', NULL, NULL, NULL, NULL, Array, 0) #2 /homepages/29/d407468879/htdocs/try-it/sites/prestashop/tools/smarty/sysplugins/smarty_internal_templatebase.php(180): content_50e9ac7c66e406_10846028(Object(Smarty_Internal_Template)) #3 /homepages/29/d407468879/htdocs/try-it/sites/prestashop/tools/smarty/sysplugins/smarty_internal_te in /homepages/29/d407468879/htdocs/try-it/sites/prestashop/tools/smarty/sysplugins/smarty_internal_templatebase.php on line 127

Link to comment
Share on other sites

Merci pour l'info, j'ai réglé le soucis ;)

Comme je test pas mal de choses, il arrive fréquemment que ça pète à certains endroits...

 

J'espère que le module correspond à tes besoins, hésite pas à me donner tes retours !

 

@plus

Julien

Link to comment
Share on other sites

Merci pour l'info, j'ai réglé le soucis ;)

Comme je test pas mal de choses, il arrive fréquemment que ça pète à certains endroits...

 

J'espère que le module correspond à tes besoins, hésite pas à me donner tes retours !

 

@plus

Julien

d'abord je tiens a te remercier ce module est top ( pour moi)

je ne suis absolument pas webmaster donc

je dirais simple a installer et a utiliser bravo

,j'aurais voulu savoir comment mettre le mot "Partenaires" entre les flèches .

et en second je dirais que j'ai été trop bête pour ne pas voir que les images devais être en gif.mes premiers essais était en jpg donc décalage d'images.

Link to comment
Share on other sites

Bonjour Sébastien,

 

Merci pour ces retours et compliments !

Je suis étonné, mes images sont en JPG, et ça roule...

J'ai mis dans le 1er post une version 1.1 peux-tu tester celle-ci et me dire ce que ça donne ?

De même, si le site est en ligne, il serait bien d'avoir l'URL pour observer le comportement...

 

Concernant le texte à ajouter, ça se passe dans le fichier slider_columns.tpl

Voici le code :

<h4 style="padding:5px;">
  <div id="buttons">
		    <a href="#" id="prev" class="arrow myleft" style="float:left;"></a>
		    <div style="width:140px; line-height:20px; float:left;" align="center">{l s='Ici le titre' mod='slider_columns'}</div>
		    <a href="#" id="next" class="arrow myright" style="float:right;"></a>
		    <div class="clear"></div>
 </div>
</h4>

Link to comment
Share on other sites

Bonjour Sébastien,

 

Merci pour ces retours et compliments !

Je suis étonné, mes images sont en JPG, et ça roule...

J'ai mis dans le 1er post une version 1.1 peux-tu tester celle-ci et me dire ce que ça donne ?

De même, si le site est en ligne, il serait bien d'avoir l'URL pour observer le comportement...

 

Concernant le texte à ajouter, ça se passe dans le fichier slider_columns.tpl

Voici le code :

<h4 style="padding:5px;">
  <div id="buttons">
			<a href="#" id="prev" class="arrow myleft" style="float:left;"></a>
			<div style="width:140px; line-height:20px; float:left;" align="center">{l s='Ici le titre' mod='slider_columns'}</div>
			<a href="#" id="next" class="arrow myright" style="float:right;"></a>
			<div class="clear"></div>
 </div>
</h4>

je ne peu que te remercier.

MERCI BEAUCOUP;

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

est ce normale que le rendu n'est pas le meme que sur le lien de demo: les fleche sont l'une a coté de l'autre sans aucun titre eu milieu???

de plus les slides ne tourne pas en boucle, une fois arrivé à la derniere image, ca se stop, ca ne reviens pas a la 1er..

help!

Edited by sandys (see edit history)
Link to comment
Share on other sites

Deux choses :

 

1- Une erreur de variable JS provenant d'un autre module (screenshot joint au post)

 

2- Le code de mon module ne paraît pas être le dernier en date, ou bien celui-ci a été modifié.

 

Dans les 2 cas, il faut commencer par résoudre le soucis de variable JS corrompue. Par la suite, je suggère de télécharger de nouveau la dernière version du module et de réessayer.

 

Tenez moi informé du résultat.

J'espère avoir pu aider...

 

@plus !

Julien.

post-363134-0-86293300-1360509886_thumb.jpg

Edited by Azureaweb (see edit history)
Link to comment
Share on other sites

Ok super ;)

 

Pour le titre c'est dans le BO dans les traductions de modules...

De cette façon, le titre sera traduit ;)

 

@plus !

Julien.

 

En faite je voudrais déja qu'il s'affiche avant de le traduire :)

sur ton site en demo entre les fléches il est écrit "texte ici" moi j'ai rien meme si j'ai donné un titre à mes photos, du coup les fléches ont collés et c'est pas esthétique...

 

J'ai essayé de télécharger la nouvelle version, j'ai désinstallé la 1.1 et supprimé mais quand je veux charger le 1.2, c'est la 1.1 qui se charge (qui apparait dans mes modules)

 

Alala je suis chiante et pas douée je suppose... dsl

Link to comment
Share on other sites

  • 2 weeks later...

Bonjour marcback,

 

Il faudrait essayer de modifier le fichier slider_columns.php

En ajoutant un nouveau hook...

 

Dans le cas où ce fameux hook n'existe pas de base, il va falloir en ajouter un nouveau en base de données, la documentation de PS explique cette manip.

 

@plus !

Julien.

Link to comment
Share on other sites

Ok, en fait le module n'acceptait que les extensions JPG.

 

J'ai modifié le filtre pour accepter tout type d'image.

 

Version 2.1 en téléchargement sur le 1er post.

 

Dites moi si c'est ok.

 

Pour ceux qui ne veulent pas réinstaller :

Fichier slider_columns.php

Ligne 341

Changer

<input name="url" type="file" maxlength="307200" accept="jpg">

Par

<input name="url" type="file" maxlength="307200" accept="image/*">

 

@plus !

Link to comment
Share on other sites

  • 2 months later...
  • 1 month later...
  • 3 weeks later...

Un grand merci pour ton module et sa gratuité c'est vraiment sympa!

 

je serais vraiment intéressé pour en installer un sur chaque colonne mais je me demande si c'est possible, surtout de pouvoir faire défilé deux gammes de produits différents ?

 

merci d'avance pour ta réponse et bonne continuation!!

Edited by gotti (see edit history)
Link to comment
Share on other sites

  • 2 months later...

Je n'ai pas encore testé le module dans ma boutique mais il a l'air d'après la DEMO on peut se faire une idée très précise!! Merci pour cette généreuse contribution, je ne manquerais pas de confirmer le bon fonctionnement du module dès lors où je l'aurais installé!!

 

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...