Plugin OwlSlider

Rédigé par Djb le 29 septembre 2015 6 commentaires

plugin MiniSlider pour PluXml

Réalisation d'un slider pour afficher vos images dans la sidebar de votre site PluXml.

Actuellement visible sur le template Color dans la sidebar

Page pour administer le plugin

  1. Nom du dossier où sont stockées les images (1)
  2. Couleur de la barre de progression
  3. Vitesse, en secondes pour afficher les images
  4. Temps, en secondes, entre chaque image
  5. Afficher la pagination
  6. Mettre en pause lors du survol de l'image

Il me reste à créer une boucle pour récupérer les images en automatique, minifier le code et le mettre en téléchargement sur mon compte gitHub.(Réalisé le 30/09/15)


Pour afficher le slider dans votre sidebar, il suffit d'éditer le fichier sidebar.php et d'ajouter ce code.



       <?php eval($plxShow->callHook('OwlSlider')); ?>


(1) Pensez à créer un dossier dans Médias, et placer vos images dedans pour les afficher sur le slider.


Explication de la boucle, pour récupérer les images



public function OwlSlider() {

      $directory =   $this->getParam("dir"); // lien vers les images

      $files = plxGlob::getInstance(PLX_ROOT.$directory);

        if($img = $files->query('/[a-z0-9-_]+.(jpg|gif|png|jpeg)$/i')) {

          echo '<div id="owl-demo" class="owl-carousel">';

          foreach($styles as $k=>$v) {

            $slider = $directory.'/'.$v;

            echo '<div class="item"><?img src="http://nextum.fr/'.$slider.'" alt="" /></div>';

          }

            echo '</div>';

        } else 

          echo "Le dossier n'existe pas ou est vide.";

    }


Pour afficher le plugin dans un page statique.


   <?php 

     global $plxShow;

     eval($plxShow->callHook("OwlSlider")); 

   ?>


Et pour afficher votre slider dans la sidebar de votre site, il suffit d'éditer le fichier aside.php de votre thème et d'ajouter:



       <?php eval($plxShow->callHook('OwlSlider')) ?>



Vérification de la version PluXml (à partir de la v1.1)


Depuis le passage à la version 5.4, les images sont stockées dans data/medias/ et non data/images/

J'ai donc, ajouté une petite vérification de la version pluxml



if ( defined('PLX_VERSION') and version_compare(PLX_VERSION, '5.5', ">=")) {

$link = "data/medias/";

} else {

$link = "data/images/";

}


Il reste à créer un dossier et, de placer le nom du dossier dans le formulaire de configuration du plugin.


Classé dans : Plugins

CSS3 jQuery

Retrouvez les plugins et templates pour PluXml

Information sur Djb, auteur de l'article:

La drogue cause des trous de mémoire et plein d’autres trucs moches dont je me souviens jamais.

6 commentaires

#1 

Je vais le mettre en téléchargement ce week-end Commentaire de Djb

Répondre

#2 

Bonjour, une petite démo pour ce slider ? Possible de le metre sur un header ? Merci :) Commentaire de joebart72

Répondre

#3 

Oui, il suffit de le placer dans le fichier header.php à la place du fichier sidebar.php Commentaire de Djb

Répondre

#4 

Bonjour,
Apparemment, il n'y a pas d'effet de transition... comment peut-on en ajouter ?
Je voudrais utiliser le plugin sur une statique en page d'accueil d'un site bilingue pleine largeur pour chaque langue. Est-il possible d'ajouter un texte (titre par exemple) sur l'image pour chaque langue ? Merci. Commentaire de Amadeus

Répondre

#5 

Tu peux installer le slider sur une page statique, regarde un peu plus haut dans l'article, pour le reste je vais voir pour réaliser une mise à jour. Commentaire de Djb

Répondre

#6 

Hello
Merci concernant l’immense travail réalisé. Commentaire de Cocokol

Répondre

Écrire un commentaire