Présentation
- nom du script : ImageFlow pour SPIP
- version 1.2.1
- auteur du script original : Finn Rudolph
- ImageFlow est sous License Creative Commons Attribution-Noncommercial 3.0. 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
Ce script qui combine des fonctions graphiques PHP (pour la réflexion de la vignette), des fonctions d’interactivité en javascript (animation du flux de vignettes avec la souris ou les flêches du clavier et affichage dynamique de l’image sélectionnée) permet d’avoir un portfolio sympathique à la « coverflow » d’iTunes d’Apple.
Il a été adapté pour fonctionner avec SPIP à la place du Portfolio.
Mise en oeuvre
- télécharger l’archive ci-dessous
- copier les fichiers directement dans votre dossier « squelettes »
- éditer le fichier « squelettes/article.html » de vos squelettes 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="myImageFlow" class="imageflow">
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
<img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|texte_backend)]" longdesc="[(#FICHIER|image_reduire{500,500}|extraire_attribut{src})]" />
</BOUCLE_documents_portfolio>
</div>
<div class="clear"></div>
<div id="bloc-affichage"><img id="affichage" style="max-height: 500px; max-width: 500px;" /> </div>
</div>
<!-- fin docs portfolio -->
</B_documents_portfolio>- rajouter ces 2 lignes dans le <head> :
<!-- This includes the ImageFlow CSS and JavaScript -->
[<link rel="stylesheet" href="(#CHEMIN{imageflow.css}|direction_css)" type="text/css" media="projection, screen, tv" />]
<script type="text/javascript" src="#CHEMIN{imageflow.js}"></script>Personnalisation
Les éléments du script et le bouton sont conçus pour être sur fond noir. 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 screen.css (ligne 2 pour le fond et 46 pour la ligne de déplacement du bouton)
- 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)
téléchargement
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 :
|
