Présentation
- nom du script : ImageFlow + Highslide pour SPIP
- version 1.2.1 (ImageFlow) et 4.1.8 (HighslideJS)
- auteur du script original ImageFlow : Finn Rudolph
- auteur du script original HighslideJS : Torstein Honsi
- ImageFlow est sous License Creative Commons Attribution-Noncommercial 3.0. Cela signifie qu’il faut l’autorisation de l’auteur pour une utilisation commerciale.
- HighslideJS est sous License Creative Commons Attribution-NonCommercial 2.5. Cela signifie qu’il faut l’autorisation de l’auteur pour une utilisation commerciale.
- adaptation pour SPIP : Stéphane kus
- démo : Site de développement des squelettes IENSP
Mise en oeuvre
- télécharger l’archive ci-dessous
- copier le dossier « javascript » de l’archive directement dans votre dossier « squelettes »
- éditer le fichier « squelettes/article.html » de vos squelettes (ou inc-documents.html...) et remplacer le code du bloc Portfolio par le code ci-dessous :
[(#REM) Portfolio : album d'images ]
<B_documents_portfolio>
<a href="#portfolio" name="portfolio" id="portfolio"></a>
<div id="documents_portfolio">
<h2><:info_portfolio:></h2>
<div id="Highslide" class="imageflow">
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {unique}>
<img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|texte_backend)][ - (#DESCRIPTIF)]" longdesc="[(#FICHIER|image_reduire{600,600}|extraire_attribut{src})]" />
</BOUCLE_documents_portfolio></div></div><!-- fin docs portfolio -->
</B_documents_portfolio>
- rajouter ces lignes dans le <head>
:
<!-- This includes the ImageFlow and Highslide CSS and JavaScript -->
[<link rel="stylesheet" href="(#CHEMIN{javascript/ImageFlow/imageflow.css}|direction_css)" type="text/css" media="projection, screen, tv" />]
<script type="text/javascript" src="#CHEMIN{javascript/ImageFlow/imageflow.js}"></script>
[<link rel="stylesheet" href="(#CHEMIN{javascript/highslide/highslide.css}|direction_css)" type="text/css" />]
<script src="#CHEMIN{javascript/highslide/highslide-full.js}" type="text/javascript"></script>
<script type="text/javascript">
hs.dimmingOpacity = 0.75;
</script>
Personnalisation
Les éléments du script et le bouton sont conçus pour être sur fond blanc. Mais vous pouvez parfaitement l’adapter à la couleur de fond de votre site. Pour cela :
- Modifiez l’image « slider.png » à votre goût
- Modifiez les couleurs du fichier imageflow.css
- Modifiez la couleur de réflexion des vignettes d’image dans le fichier reflect2.php ( rajoutez le code $_GET['bgc'] = '000000';
à la ligne 22 pour un fond noir)
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |