AnythingSlider version 0.1.x

All contributions published for previous SPIP versions

REMARQUE : cette version du plugin fournit le script AnythingSlider 1.5.9. Une version plus récente du plugin est disponible : voir AnythingSlider version 1.x.x. Son fonctionnement est légèrement différent, notamment pour charger les scripts optionnels et/ou les thèmes additionnels.

Se référer à la documentation de la nouvelle version.

Ce plugin, qui ne fait qu’insérer le script «AnythingSlider» dans vos squelettes, est destiné à des utilisateurs confirmés.

Présentation

Pour une présentation complète du script AnythingSlider et de son utilisation, voir :

Fonctionnement

Ce plugin charge les CSS du plugin jQuery AnythingSlider dans les pages publiques ainsi que le fichier javascript jquery.anythingslider.min.js. Charge ensuite à vos squelettes d’appeler le script en suivant la documentation du plugin.

Il utilise pour cela balise #INSERT_HEAD. Vous devez donc vérifier que votre squelette la prévoit.

Si vous souhaitez également charger les scripts additionnels jquery.anythingslider.fx.min.js, jquery.easing.1.2.js et swfobject.js, vous pouvez utiliser le pipeline anythingslider_charger_fx de manière à renvoyer la valeur true.

Dans la mesure où le plugin insère les scripts directement dans les en-têtes de vos pages, vous n’avez pas besoin de le faire vous-même. Il vous suffit juste d’appeler le script dans les squelettes.

Thèmes

Le plugin SPIP est livré avec plusieurs thèmes pour script AnythingSlider. Cette liste de thèmes pourra être amenées à augmenter au cours du temps.

Une saisie themes_anythingslider peut être utilisée dans vos formulaires pour sélectionner un thème parmi ceux disponibles.

Pour pouvoir profiter des thèmes, il faut informer le script du bon chemin d’accès aux CSS des thèmes. Pour cela, appeler AnythingSlider dans vos squelettes en précisant #EVAL{_DIR_PLUGIN_ANYTHINGSLIDER}css/theme-{themeName}.css pour la variable themeDirectory. Par exemple :

<script type="text/javascript">// <![CDATA[
	$(document).ready(function(){
		$('#slider1').anythingSlider({
			width : 450,
			height : 300,
			theme : 'minimalist-square',
			themeDirectory : '#EVAL{_DIR_PLUGIN_ANYTHINGSLIDER}css/theme-{themeName}.css',
		});
	});
 //]]></script>

updated on 2 October 2019

Discussion

12 discussions

  • Bonjour,

    Ce plugin est très facil d’utilisation.
    Le seul problème que je rencontre est le suivant.
    J’ai un tableau de deux colonnes et deux lignes chaque partie comporte un slider cela fonctionne très bien sous Mozilla, Safari et Google chrome mais sous IE un seul slider de chaque ligne fonctionne.
    Quelqu’un aurait il rencontré le même problème et aurait la solution ??

    Merci pour vos réponses

    Reply to this message

  • Bonjour
    ,
    Merci avant tout pour ce plugin. Il est comme d’autres, bien utile pour nos développements.

    J’ai fais un petit site qui a pour but de montrer quelques projets que j’ai réalisé. Ainsi je liste des écrans exemples sur des projets (ykurtz.com)

    Mais quand je liste les documents (copies d’écran) de mes rubriques (projets) et que j’utilise anythingslider pour en faire une sorte de diaporama, des fois (souvent), rien n’est affiché, et je ne vois que les contrôles du plugin. Il ignore tout simplement l’image. Quand je rafraîchi, elle réapparaît.

    Je n’arrive pas à comprendre, désolé. J’ai essayé de résoudre avec le cache mais rien.

    Est-ce lié au plugin ?

    merci
    yonnel

    Reply to this message

  • 4

    Bonjour,
    merci pour l’intégration du script en plugin

    juste une chose : il me semble que la librairie anythingslider n’est pas à jour ?
    en fait il y avait un petit bug, résolu en mettant le script à jour
    (et pour tout dire : la dernière image se déplaçait et laissait un zone blanche puis disparassait complètement avant de voir apparaitre d’un coup la première image du slider...)

    Reply to this message

  • 4

    Je ne comprends pas bien l’intérêt de ce plugin s’il ne facilite pas la mise en oeuvre d’un slider dans les squelettes, s’il ne permet pas le paramétrage éventuel du script... Il ne fait qu’insérer le script dans le head... mais les « utilisateurs confirmés » auquel il est destiné peuvent très bien le faire eux-mêmes et n’ont pas besoin d’un plugin pour ce faire...

    • Ce plugin permet de fournir et d’insérer le script. Ainsi, si plusieurs plugins nécesitent ce script, au lieu que chacun d’eux insère ou embarque le script, chaque plugin n’aura qu’à faire un necessite. La même problématique s’était posée avec jqueryUI ou encore avec la mediabox qui était aussi embarquée par la médiathèque.

      Il s’agit donc plutôt d’une ressource utilisable par d’autres plugins. Aveline par exemple fournit des noisettes utilisant anythingslider.

      La question aurait pu se poser de passer plutôt par une lib externe. Mais le passage en plugin permet notamment de ne charger qu’une seule fois le script si deux ou trois plugins nécessite le script, et également de fournir une saisie avec les thèmes disponibles, saisie pouvant être utilisée ensuite dans un formulaire de config.

    • OK, merci.
      Mais ce serait quand même bien de le compléter par un bout de squelette prêt à l’emploi, ne serait-ce que pour la démo, dans SPIP, pour aiguiller les utilisateurs moins confirmés.

    • J’ai commencé à m’y pencher et c’est prévu. Suite à la mise à jour du script, je me rends compte qu’il va falloir reprendre une partie du plugin car les thèmes sont gérés différemment et un formulaire de config, comme jqueryUI, va être nécessaire.

    • Exemple et formulaire de config inclus dans AnythingSlider version 1.x.x.

    Reply to this message

  • 1

    Bonjour,

    Chez moi ce super plugin fonctionne parfaitement...sauf sur IE7 qui détecte un problème de script !

    Comment régler ce problème ?

    Merci pour vos éventuelles réponses !
    (j’aimerai vraiment l’intégrer ce plugin à mon site)

    • Le problème est-il résolu par la dernière version du plugin (qui embraque la version 1.7.5 d’anythingslider) ?

    Reply to this message

  • Voici ce que j’ai dans mon squelette

    inc-documents.html

    [(#REM) Portfolio : album d'images ]
    <B_docs>
    <div id="documents_portfolio">
    	<ul id="anyslider">
    	<BOUCLE_docs(DOCUMENTS){id_article}{extension IN jpg,png,gig}>
    		<li><img src="#URL_DOCUMENT" width="#LARGEUR" height="#HAUTEUR" /></li>
       	</BOUCLE_docs>
    	</ul>
    </div>
     
        <script type="text/javascript">// <![CDATA[
                $(document).ready(function(){
                        $('#anyslider').anythingSlider({
                                width : 450,
                                height : 300,
                                theme : 'minimalist-square',
                                themeDirectory : '#EVAL{_DIR_PLUGIN_ANYTHINGSLIDER}css/theme-{themeName}.css',
                        });
                });
         //]]></script>
     
    </B_docs>

    Reply to this message

  • Bonjour
    Que mettre dans le squelette d’une page article pour en afficher seulement les Photos à partir de différents article
    Cordialement

    Reply to this message

  • 1

    Bonjour,
    et merci pour ce plugin absolument magnifique.
    Par contre, y a une virgule en trop ligne 15 du fichier inclure/appel_anythingslider.html
    [delay : (#ENVdelay),]
    qui fait que ca ne marche pas sur ie7 (enfin chez moi en tout cas...)

    cordialement
    triton

    Reply to this message

  • 1
    Nul de chez nul

    Il me semblait bien aussi, c’est donc pour les les utilisateurs confirmés.

    Cependant je n’ai pas résisté à tenter encore une fois avec vos explications :
    -  J’ai mis dans le header (Trouvé dans la doc. anythingSlider) :

    [(#REM) pour diaporama  anythingSlider ] 
        <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
    <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
    <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
    
    <script type="text/javascript">
            $(function(){
    
                    $("#main-photo-slider").codaSlider();
    
            });
    </script>

    -  J’ai mis dans un squelette article-xx :

    <script type="text/javascript">// <![CDATA[
    $(document).ready(function(){
    $('#slider1').anythingSlider({
    width : 450,
    height : 300,
    theme : 'minimalist-square',
    themeDirectory : '#EVAL{_DIR_PLUGIN_ANYTHINGSLIDER}css/theme-{themeName}.css',
    });
    });
    //]]></script>

    Plugin anythingSlider activé bien sûr...

    Eh bien... rien, même pas une bordure.

    Bon ! C’est pas encore pour moi.

    Merci quand même Joseph.

    • 1/ Vous n’avez rien à ajouter dans le header (<head> ... </head>), car le plugin le fait déjà. Vérifier simplement que la balise #INSERT_HEAD est bien présente dans votre squelette.

      2/ Vérifier que votre boucle produit bien le résultat voulu. En l’absence du javascript d’appel, vous devriez voir votre liste complète s’afficher. Si votre boucle ne produit aucun résultat, il est clair que le slider n’aura rien à afficher.

      3/ Une fois que votre squelette produit bien la bonne liste, à ce moment-là rajouter dans votre squelette, dans le body tout simplement, le javascript d’appel à AnythingSlider.

    Reply to this message

  • Nul de chez nul

    Vraiment pas doué : j’ai envoyé trop vite, manque :

    -  J’ai mis dans un squelette article-xx :

    <B_docs>
        <ul id="slider1">
        <BOUCLE_docs(DOCUMENTS){id_article}{extension IN jpg,png,gig}>
        <li><img src="#FICHIER" width="#LARGEUR" height="#HAUTEUR" /></li>
        </BOUCLE_docs>
        </ul>
        </B_docs>
    
    
    
    
    <script type="text/javascript">// <![CDATA[
    $(document).ready(function(){
    $('#slider1').anythingSlider({
    width : 450,
    height : 300,
    theme : 'minimalist-square',
    themeDirectory : '#EVAL{_DIR_PLUGIN_ANYTHINGSLIDER}css/theme-{themeName}.css',
    });
    });
    //]]></script>

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom