PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 03/06/2016 08:42:39

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 128
Site Web

[SPXSIMPLEGALLERY] Gestion et affichage de galeries responsive design

Ce plugin fait suite à cette discussion, il va vous permettre de gérer et d'afficher une ou plusieurs galeries dans votre thème (header, footer, body...) mais aussi dans des pages statiques ou articles.

Voici une vidéo de présentation du plugin en backend et en frontend : Présentation

SPXWSIMPLEGALLERY : 1.7 version officielle

Le plugin est téléchargeable via le spxpluginDownloader pour une installation et une mise à jour en un clic.

Responsive-Image-Galleries-480x340.png


--------------------------------------------------------------
     CARACTERISTIQUES
--------------------------------------------------------------


  • L'administation de une ou plusieurs galeries

  • Une galerie est composée d'un nombre illimité d'images (image + titre)

  • Insertion des galeries n'importe ou (articles, statiques, templates...)

  • Choisir la taille, l'alignement, le content float de la galerie

  • Choisir la taille des images

  • Choisir le padding entre images

  • Affichage ou non du titre

  • Une gestion autonome des miniatures (vous pouvez fixer la taille en largeur)

  • Le type de présentation (masonry, carré)

  • Choisir la couleur d'ambiance : dark ou light

  • Choisir la grille responsive selon le media query (cf bootstrap) - grille indépendante de bootrap mais qui utilise le même fonctionnement

  • Choisir la couleur l'ambiance dark ou light

  • Redéfinition de l'html possible au niveau du corps de la galerie et des items

  • Toutes les propriétés sont redéfinissables avec un seul shortcode via spxshortcodes

  • Lightbox automatique via spxlightbox

  • Formatage visuel du shortcode via un plugin de spxtynimce

--------------------------------------------------------------
      ADMINISTRATION BACKEND
--------------------------------------------------------------

La céation des galeries se fait dans la partie widget très simplement.

widget1.png
widget2.png
--------------------------------------------------------------
      AFFICHAGE
--------------------------------------------------------------

Le formatage d'affichage se fait via shortcodes et peut se faire sans codage via un bouton de spxtynimce.

tyni1.png
tyni2.png
tyni3.png
tyni4.png
tyni5.png


[== Indéfini ==]
[spxwsimplegallery id=001]

Pour personnaliser la galerie nous avons les options suivantes :

[== Indéfini ==]
[SPXWSIMPLEGALLERY id="001" type="masonry" col="col-lg-2 col-md-4 col-sm-6 col-xs-12" imgsize="400" imgpadding="10" pos="" width="100%" displaytitle="true" colortheme="light" clearfix="true" ]

Ce qui veux dire :

  • id: id de la galerie

  • type: masonery ou square

  • col: formatage responsive bootstrap

  • imgsize: taille de sortie des images en pixels (largeur)

  • imgpadding: le padding entre les images

  • pos: un choix pour aligner la galerie dans le contenant avec les options left, center, right

  • width: taille de la galerie dans la page en porcentage de 10 a 100%

  • displaytitle: true / false affichage du titre ou non

  • colortheme: dark / ligh couleur du theme

  • clearfix: true / flase contenir le float dans le cas d'alignement

Il est possible de redéfnir l'html du corps et des items ce qui ouvre le champs des possiblités :

[== Indéfini ==]
[SPXWSIMPLEGALLERY id="001" formatcontainer='<div data-test="toto" #container_data_set style="#container_style" class="#container_class" ><div #subcontainer_data_set class="#subcontainer_class" >#items</div></div>'  ]
[== Indéfini ==]
[SPXWSIMPLEGALLERY id="001" formatitem='<div style="#itemcontainer_style" class="#itemcontainer_class" ><a #itemlink_data_set title="#itemlink_title" href="#itemlink_url" class="#itemlink_class" ><img #itemimg_data_set width="#itemimg_width" height="#itemimg_height" src="#itemimg_src" alt="#itemimg_alt">	</a><div #itemtitle_data_set class="#itemtitle_class" >#itemtitle_title</div></div>'  ]

Des exemples dans pluxml de présentation:

1.jpg
1b.jpg
1c.jpg
1d.jpg

--------------------------------------------------------------
     INSTALLATION
--------------------------------------------------------------

le plugin est dispo ici.

SPXWSIMPLEGALLERY

Pour créer l'environnement d'administration et shortcodes les plugins nécessaires son spxdatas, spxshortcodes, spxlightbox (conseillé) et spxtynimce (ce dernier n'est pas pas obligatoire mais fortement recommandé puisqu'il va permettre de créer le shortcode sous forme graphique).

Pour résumer :

  1. spxwsimplegallery : le plugin en question

  2. spxdatas : le framework d'administration obligatoire permettant la création de la gallerie en backend

  3. spxtynimce : permet le rajout d'un bouton "simple gallerie" pour formater le shortcode par un formulaire dynamique en backend

  4. spxshortocodes : environnement de shortcodes en frontend

  5. spxlightbox : permet l'affichage l'effet lightbox sur les images de la galerie en frontend


Vous devrez donc avoir installé au préalable le plugin spxdatas version officielle dans le dossier plugin de pluxml. Pour la configuration de spxdatas, c'est extrèmement simple... Dans l'admin du plugin, vous allez dans installation puis vous appuyez sur enregistrer et c'est tout.

Note: Tous les plugin sont disponibles via le spxpluginDownloader pour un téléchargement rapide et sans soucis.

depot.png

Ne pas hésiter si vous avez des questions...

A noter : Ce plugin ne fait pas le café  smile

Dernière modification par je-evrard (03/06/2016 15:30:36)


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Simplebox - Visual Wizard
- Projet SPX : Vitrine - Blog
facebook

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés