bon j'ai jamais pu compléter l'article de spip-contrib , l'auteur ne ma jamais répondu dommage
et j'ai essayer également de contacter contrib mais je n'ai pas eu de réponse non plus
Coucou,
J’ai relu l’article. Super bien fait.
J’y joins quelques modifs, qui m’ont permis d’afficher le Slider. Et le script.js
*_alors oui je veu bien une relecture avant de publier sur contrib (pas tenir compte de la mise en page)
(des fois que j'ai oublié un truc)_*
Le 18 décembre 2013 à 23:48 jfredd a réussie a intégrer un slider sur le squelette, il s’agit de owl caroussel.
Je vous donne un pas a pas pour utiliser le slider sur votre site; voici donc comment j'ai pratiqué.
1° télécharger ==> http://owlgraphic.com/owlcarousel/
2° créer un répertoire /squelettes/owl-carousel
3° créer un répertoire /squelettes/css
4° créer un répertoire /squelettes/inclure
5° placer les fichier suivant dans ce répertoire
owl.carousel.css
owl.carousel.js
owl.carousel.min.js
owl.theme.css
6° modifier le fichier head.html
en ajoutant les lignes suivante
[(#REM) 3. Vos feuilles de style pour l'habillage du site ]
[<link rel="stylesheet" href="(#CHEMIN{css/style.css}|direction_css)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/perso.css}|direction_css)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{owl-carousel/owl.carousel.css}|direction_css)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{owl-carousel/owl.theme.css}|direction_css)" type="text/css" />]
[(#REM)
Balise permettant aux plugins d'inserer des appels javascript ;
4. C'est ici que SPIP va inserer l'appel de la librairie jQuery
5. Et appeler a la fin compacte_head pour agreger et compacter tout le head dans des fichiers statiques si l'option est cochee dans Configuration
]
#INSERT_HEAD
[(#REM) 6. Vos scripts ]
[<script src="(#CHEMIN{js/script.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{remonter.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{owl-carousel/owl.carousel.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{owl-carousel/owl.carousel.min.js})" type="text/javascript"></script>]
7° Modifier sommaire.html , il faut l'appel avec le nombre d'article que l'on souhaite affiché
Notre choix a été d'afficher 5 articles avec pour le
1 {!par date_modif}
2 {!par hasard)
3 {!par visites}
4 {!par popularite}
5 {!par date}
Voici donc le bout de code
<div class="menu menu_articles2" id="articles_recents">
<!-- slider debut-->
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"> <BOUCLE_articles_une1(ARTICLES){!par date_modif}{pagination 1}{0,3}{doublons}>
<div class="item">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{460,240}|image_passe_partout{460,240}|image_recadre{460,240,middle})]
<h5>#SURTITRE</h5>
<h1 class="une"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h1>
[<div class="#EDIT{intro} introduction2 entry-content">(#INTRODUCTION|couper{400,...}) <br /> <a href="#URL_ARTICLE" class="vert"><:lire_la_suite:></a></div>]
</div>
</BOUCLE_articles_une1></div>
<div class="item"> <BOUCLE_articles_une2(ARTICLES){!par hasard}{pagination 1} {0,3}{doublons}>
<div class="item">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{460,240}|image_passe_partout{460,240}|image_recadre{460,240,middle})]
<h5>#SURTITRE</h5>
<h1 class="une"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h1>
[<div class="#EDIT{intro} introduction2 entry-content">(#INTRODUCTION|couper{400,...}) <br /> <a href="#URL_ARTICLE" class="vert"><:lire_la_suite:></a></div>]
</div>
</BOUCLE_articles_une2></div>
<div class="item"> <BOUCLE_articles_une3(ARTICLES){!par visites}{pagination 1} {0,3}{doublons}>
<div class="item">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{460,240}|image_passe_partout{460,240}|image_recadre{460,240,middle})]
<h5>#SURTITRE</h5>
<h1 class="une"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h1>
[<div class="#EDIT{intro} introduction2 entry-content">(#INTRODUCTION|couper{400,...}) <br /> <a href="#URL_ARTICLE" class="vert"><:lire_la_suite:></a></div>]
</div>
</BOUCLE_articles_une3></div>
<div class="item"> <BOUCLE_articles_une4(ARTICLES){!par popularite}{pagination 1} {0,3}{doublons}>
<div class="item">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{460,240}|image_passe_partout{460,240}|image_recadre{460,240,middle})]
<h5>#SURTITRE</h5>
<h1 class="une"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h1>
[<div class="#EDIT{intro} introduction2 entry-content">(#INTRODUCTION|couper{400,...}) <br /> <a href="#URL_ARTICLE" class="vert"><:lire_la_suite:></a></div>]
</div>
</BOUCLE_articles_une4></div>
<div class="item"> <BOUCLE_articles_une5(ARTICLES){!par date}{pagination 1} {0,3}{doublons}>
<div class="item">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{460,240}|image_passe_partout{460,240}|image_recadre{460,240,middle})]
<h5>#SURTITRE</h5>
<h1 class="une"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h1>
[<div class="#EDIT{intro} introduction2 entry-content">(#INTRODUCTION|couper{400,...}) <br /> <a href="#URL_ARTICLE" class="vert"><:lire_la_suite:></a></div>]
</div>
</BOUCLE_articles_une5></div>
</div>
<!--slider end-->
</div><!--#articles_recents-->
8° creer le fichier le fichier perso.css (décalage du logo dans OWL)
.spip_logos {
float: left;
/*margin: 0px 2.6% 2% 0px;*/
margin: 0px 2.6% 2% 2.6%;
padding: 0px;
border: 4px solid #FFF;
box-shadow: 0px 0px 5px 1px #CFCFCF;
}
----
Merci a François d'avoir résolu le problème avec le cadre du logo dans la div OWL, décalage du logo dans OWL
Le logo été trop décalé sur la gauche, et il y a la bordure gauche du cadre qui passe derrière le texte d’intro de l’article sur la droite.
Voici donc comme exemple trois sites ayant intégré le slider
http://www.judge-fredd.fr/
http://apicultural.free.fr/
www.destinationcyber.com/domainenature/ <http://www.destinationcyber.com/domainenature/>
A vous d'adapter selon vos besoins
