×

Message

Soyez le premier à laisser un commentaire sur ce téléchargement!

Pulsar Slideshow

puslarslideshow.JPG

Configuration du template

Le slideshow est basé sur HTML5/css3, il n'est à ce jour pas 100% responsive. Il fonctionne en version dégradée sous ie8. Il fonctionne sous 2 modes: aléatoire où les animations entre slides sont générées automatiquement, et custo, où l'utilisateur peut définir quelle animation il veut voir apparaître pour quelle slide. Si l'utilisateur n'a renseigné que les 3 premières animations, et que le slideshow compte 4 items, l'utilisateur peut alors choisir entre ne pas mettre d'animation (un simple fading assurera alors la transition) ou générer dynamiquement une animation random.

Ce slideshow est visible sur le site http://www.freejob.fr 

Image: Il est recommandé de mettre la largeur de l'image à 400 pixels. Si vous souhaitez modifier cette valeur, il faudra modifier aussi la margin dans le fichier styles.css, ligne 62:

.jms-content{margin: 0px 450px 0px 0px;}
Détail des différentes options:

Style: "Slideshow

  • Animation aléatoire : oui pour que le slider génère lui-même les anims, non pour qu'il utilise les anims renseignées dans la case Anims custo
  • Color : oui pour qu'il mettre une couleur de fond différente pour chaque slide, non pour qu'il laisse la couleur de fond par défaut. La valeur de la couleur de fond sera prise dans le css:

.color-1 { background-color: #E3D8FF; background-color: rgba(227, 216, 268, 1); }

  • Debug : oui pour voir en front un var_dump des anims générées
  • Pas d'anim sur smartphone : si mis à oui sur smartphone il n'y aura pas de slideshow, juste les contenus les uns sous les autres, sans animation. Ne fonctionne que sur un template Warp.
  • Nom du champ image : champ très important! renseigner là le nom de votre champ image, la valeur par défaut est AC_slider_img (champ image du CCK actu)

Paramètres: "Slideshow

  • Flèches : oui pour afficher les flèches de navigation précédent / suivant
  • Curseurs : oui pour les afficher les petits curseurs sous le slideshow qui permmettent de naviguer sur chaque élément présent
  • Autoplay : oui pour que le slideshow se lance dès le chargement de la page, non : l'internaute devra cliquer sur les flèches ou les curseurs pour faire défiler lui-même les slides
  • Interval : Durée en ms pendant laquelle chaque slide reste affichée
  • Durée de la transition : Durée en ms de la transition d'une slide à l'autre

⇒ Paramètres si: "Aléatoire

  • Valeurs minimum et maximum de l'animation : les valeurs min et max sur lesquelles l'anim va bouger. De grandes valeurs signifie que par exemple la slide va arriver de x=-5000 à x=0, donc une grande "distance" sur l'axe horizontal à parcourir. L'effet sera donc plus violent. Restreindre l'intervalle à des valeurs positives fera aussi que les slides bougeront toujours dans le même sens sur l'axe par exemple toujours vers le haut, pas vers le bas.
  • Mêmes animations : oui: utiliser toujours les mêmes anims sur toutes les slides, mais de valeurs différentes seront générées à chaque fois. Ainsi si aléatoirement les anims dynamiquement générées sont: data-y et data-x, le slider ne bougera que sur data-y et data-x sur toutes les slides. il n'ira pas faire de rotate par exemple. Visuellement l'effet d'animation est beaucoup plus léger.
  • Animations possibles : vous pouvez restreindre les animations possibles à celles que vous sélectionnerez. Par exemple si votre client ne veut pas de l'effet rotate, vous pouvez l'exclure ici. ou si vous souhaitez que le slider ne bouge toujours que sur data-y.

 

⇒ Paramètres si: "Pas aléatoire

Ce mode "pas aléatoire" est recommandé si vous souhaitez que votre anim soit toujours la même sur votre site, et que vous voulez une certaine animation. Concrètement il est recommandée pour mettre en place ce mode de suivre ce mode de fonctionnement:

  1. activer le mode aléatoire ET le mode debug en ne sélectionnant que les anims de votre choix
  2. recharger la page jusqu'à tomber sur l'anim qui vous convient
  3. copier coller la ligne concernée

 

  • Aléatoire si plus d'animation custo : si le nombre de vos items vient à dépasser le nombre de lignes de votre anim custo : générer aléatoirement une anim ou laisser le mode par défaut: fading.
  • Anims custo : coller ici els anims custo de votre choix.




Responsive

Le slideshow n'est pas réellement responsive à la base: il est prévu pour diminuer en largeur, mais pas en hauteur.

Pour remédier à cela la solution choisie a été d'utiliser les media queries dans styles.css. Grâce à ces dernières à partir de la tablette portrait: l'image passe sous le texte et les font-size sont grossies pour avoir un texte lisible.

Il est possible de modifier les hauteurs en jouant sur les hauteurs de:

.jms-slideshow .jms-wrapper

Code slideshow

pour rendre le template slideshow compatible sur les mobiles il faut retirer le bloc

,b=a.search(/(iphone)|(ipod)|(android)/)===-1 dans le fichier \templates\pulsar_slideshow\js\jmpress.min.js

ou commenter la ligne suivant "var supported...":

function checkSupport() { var ua = navigator.userAgent.toLowerCase(); //var supported = ( ua.search(/(iphone)|(ipod)|(android)/) === -1 ); return supported; dans le fichier \templates\pulsar_slideshow\js\jmpress.js ces actions ont été effectuées sur le template.

10-02-2015 22:02:32
30-12-2019
1309

Commentaire sur ce téléchargement

Liste des commentaires