Changeset 108937 in spip-zone


Ignore:
Timestamp:
Feb 13, 2018, 8:20:23 AM (17 months ago)
Author:
arnaud.berard@…
Message:

noisette/objet-portfolio :

  • Modification sur l'id du carousel générée par défaut, on cible mieux cette inclusion, sinon tout les carousels se retrouve avec l'id demo
  • Ajout des parametres, animateIn/animateOut, permettant d'utiliser des transitions/animations css3.

Les styles fournis avec le plugin, ajoute l'animation fadeOut uniquement. on peut ajouter animate.css pour bénéficier d'animations supplémentaires (ou simplement copier celles qu'ils faut dans son thème).

exemple d'utilisation:
<INCLURE{fond=noisettes/owlcarousel-objet-portfolio,

objet=article,
id_objet=28,
animateOut=fadeOut, ajax }/>

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/owlcarousel/trunk/noisettes/owlcarousel-objet-portfolio.html

    r108844 r108937  
    1 [(#REM)<!-- # OwlCarousel - Portfolio Produits
     1[(#REM)<!-- # OwlCarousel - Portfolio Objet
    22
    33
     
    55@see - http://owlgraphic.com/owlcarousel/index.html#customizing
    66
     7Usage:
     8```html
     9  <INCLURE{fond=noisettes/owlcarousel-objet-portfolio,
     10          objet=article,
     11          id_objet=28,
     12          animateOut=fadeOut, env, ajax }/>
     13```
    714
    8 @param : id-carousel : id unique du carousel
    9 @param : nb_thumbnails : nombre de vignettes
    10 @param : caption : oui : Affiche la description de l'image.
    11 @param : navigation : true par defaut : affiche les boutons précédents suivants
    12 @param : caption_css : ajouter des css sur la description (par exemple : invisible).
    13 @param : autoPlay : true (false par défaut) : le carousel démarre automatiquement.
    14 @param : stopOnHover : true (false par défaut) : pause sur le rollHover
    15 @param : lazyLoad : true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
     15@param id-carousel - id unique du carousel, si on en utilise plusieurs dans la page
     16@param nb_thumbnails - nombre de vignettes
     17@param caption (oui !) - Affiche la description de l'image.
     18@param navigation (true !) - affiche les boutons précédents suivants
     19@param caption_css (false !) - ajouter des css sur la description (par exemple : invisible).
     20@param autoPlay (false !) - le carousel démarre automatiquement.
     21@param stopOnHover (false !)- pause sur le rollHover
     22@param lazyLoad (false !) - ne charge que les images visibles pour optimiser le chargement.
     23@param animateIn - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
     24@param animateOut - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
     25
    1626
    1727-->]
     28#SET{id-carousel, #ENV{id-carousel, owl-objet-portfolio}}
    1829<style>
    19     [#(#ENV{id-carousel,demo})] .owl-slide > .caption {
     30    [#(#GET{id-carousel})] .owl-slide > .caption {
    2031        z-index: 100;
    2132        position: absolute;
     
    2435        bottom:5%;
    2536    }
    26     [#(#ENV{id-carousel,demo})] .owl-slide > .caption > .title {
     37    [#(#GET{id-carousel})] .owl-slide > .caption > .title {
    2738        background: #000;
    2839        color : #FFF;
     
    3041        width: auto;
    3142    }
    32     [#(#ENV{id-carousel,demo})] .owl-slide > .caption > p {
     43    [#(#GET{id-carousel})] .owl-slide > .caption > p {
    3344        background-color: rgba(88, 88, 88, 0.75) ;
    3445        /*float: right;*/
     
    3748    }
    3849
    39     [#(#ENV{id-carousel,demo})] .owl-slide img {
     50    [#(#GET{id-carousel})] .owl-slide img {
    4051        display: block;
    4152        width: 100%;
     
    6071
    6172</style>
    62 
    63 
    64 [(#REM) <!-- Visuel Grand -->]
    65 <div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
    66         <BOUCLE_listDocs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
    67         <div class="owl-slide" data-hash="#ID_DOCUMENT">
    68             [(#ENV{caption,oui}|=={oui}|oui)
    69             <div class="caption[ (#ENV{caption_css})]">[<h3 class="title">(#TITRE)</h3>][<p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
    70                 <a href="#FICHIER" class="js-colorbox" rel="diaporama">
    71                     <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{600,400}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
    72                 </a>
    73         </div>
    74         </BOUCLE_listDocs>
     73[(#REM)<!-- Visuel Grand -->]
     74<div id="[(#GET{id-carousel})]" class="owl-carousel owl-theme">
     75    <BOUCLE_listDocs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
     76    <div class="owl-slide" data-hash="[(#GET{id-carousel})]_#ID_DOCUMENT">
     77        [(#ENV{caption,oui}|=={oui}|oui)
     78        <div class="caption[ (#ENV{caption_css})]">[<h3 class="title">(#TITRE)</h3>][<p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
     79            <a href="#FICHIER" class="js-colorbox" rel="diaporama">
     80                <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{600,400}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
     81            </a>
     82    </div>
     83    </BOUCLE_listDocs>
    7584</div>
    76 
    7785[(#REM)<!-- Vignettes -->]
    7886<B_docs>
     
    8290        [<li class="owl-slide">
    8391            <a class="diapo_thumbnail[ (#ENV{doc}|=={#ID_DOCUMENT}|oui)active]"
    84                href="#[(#ID_DOCUMENT)]"
     92               href="[#(#GET{id-carousel})]_[(#ID_DOCUMENT)]"
    8593               [ title="(#TITRE|couper{80}|texte_backend)"]>
    8694            (#LOGO_DOCUMENT||image_reduire{100,100}|image_recadre{100,100,'center','transparent'}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
     
    92100</B_docs>
    93101
    94 
    95102<script>
    96103jQuery(function($){
    97     var mainCarousel = $("[#(#ENV{id-carousel,demo})]");
     104    var mainCarousel = $("[#(#GET{id-carousel})]");
    98105    mainCarousel.owlCarousel({
    99106        loop:true,
     
    104111        autoplay: (#ENV{autoplay}),][
    105112        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
    106         lazyLoad: (#ENV{lazyLoad}),]
     113        lazyLoad: (#ENV{lazyLoad}),][
     114        animateIn:'(#ENV{animateIn})',][
     115        animateOut:'(#ENV{animateOut})',]
    107116        responsive:false,
    108117        URLhashListener:true,
Note: See TracChangeset for help on using the changeset viewer.