source: spip-zone/_plugins_/owlcarousel/trunk/noisettes/owlcarousel-objet-portfolio.html @ 108937

Last change on this file since 108937 was 108937, checked in by arnaud.berard@…, 19 months ago

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 }/>

  • Property svn:eol-style set to native
File size: 4.6 KB
Line 
1[(#REM)<!-- # OwlCarousel - Portfolio Objet
2
3
4Gallerie portfolio avec Owl Carousel
5@see - http://owlgraphic.com/owlcarousel/index.html#customizing
6
7Usage:
8```html
9  <INCLURE{fond=noisettes/owlcarousel-objet-portfolio,
10          objet=article,
11          id_objet=28,
12          animateOut=fadeOut, env, ajax }/>
13```
14
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
26
27-->]
28#SET{id-carousel, #ENV{id-carousel, owl-objet-portfolio}}
29<style>
30    [#(#GET{id-carousel})] .owl-slide > .caption {
31        z-index: 100;
32        position: absolute;
33        left:55%;
34        width: 40%;
35        bottom:5%;
36    }
37    [#(#GET{id-carousel})] .owl-slide > .caption > .title {
38        background: #000;
39        color : #FFF;
40        padding: 5px;
41        width: auto;
42    }
43    [#(#GET{id-carousel})] .owl-slide > .caption > p {
44        background-color: rgba(88, 88, 88, 0.75) ;
45        /*float: right;*/
46        color: #FFF;
47        padding: 5px;
48    }
49
50    [#(#GET{id-carousel})] .owl-slide img {
51        display: block;
52        width: 100%;
53        height: auto;
54        margin: 0 auto;
55    }
56
57    .diapo_vignettes .owl-slide {
58        padding:.5em;
59        border: 1px solid silver;
60        border-radius: 3px;
61        height:110px;
62        margin-right: .5em;
63    }
64    .diapo_vignettes .owl-slide:hover,
65    .diapo_vignettes .owl-slide.active {
66        border: 1px solid blue;
67    }
68    .diapo_vignettes .owl-slide > a {
69        display: block;
70    }
71
72</style>
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>
84</div>
85[(#REM)<!-- Vignettes -->]
86<B_docs>
87<div class="diapo_vignettes">
88    <ul id="list-thumbnails" class="diapo_thumbnails owl-carousel">
89    <BOUCLE_docs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
90        [<li class="owl-slide">
91            <a class="diapo_thumbnail[ (#ENV{doc}|=={#ID_DOCUMENT}|oui)active]"
92               href="[#(#GET{id-carousel})]_[(#ID_DOCUMENT)]"
93               [ title="(#TITRE|couper{80}|texte_backend)"]>
94            (#LOGO_DOCUMENT||image_reduire{100,100}|image_recadre{100,100,'center','transparent'}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
95            </a>
96        </li>]
97    </BOUCLE_docs>
98    </ul>
99</div>
100</B_docs>
101
102<script>
103jQuery(function($){
104    var mainCarousel = $("[#(#GET{id-carousel})]");
105    mainCarousel.owlCarousel({
106        loop:true,
107        margin:0,
108        items: 1,
109        dots: true,[
110        nav:(#ENV{navigation, false}),][
111        autoplay: (#ENV{autoplay}),][
112        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
113        lazyLoad: (#ENV{lazyLoad}),][
114        animateIn:'(#ENV{animateIn})',][
115        animateOut:'(#ENV{animateOut})',]
116        responsive:false,
117        URLhashListener:true,
118        startPosition: 'URLHash'
119    });
120
121    mainCarousel.on('changed.owl.carousel', function(event) {
122        //console.log(event.target);
123    });
124
125    $("#list-thumbnails").owlCarousel({
126        items: 6,
127        navigation:false,
128        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
129        pagination:true,
130        paginationNumbers:true,
131        responsive: #ENV*{thumbnails_responsive, false}
132    });
133
134    // Gallerie Colorbox
135    $("a.js-colorbox").colorbox({
136        rel:'diaporama',
137    });
138});
139</script>
Note: See TracBrowser for help on using the repository browser.