[Spip] portfolio
Renée Picard
J'ai testé plusieurs plugins sans succès.
Avec un SPIP 2.0.10, je voudrais installer une galerie d'images
(portfolio) qui afficherait:
le titre
le descriptif
flèches de navigation gauche droite
diaporama.
Thickbox et imagesflow n'affichent pas le descriptif.
Diapo fait tout cela mais mon client n'aime pas il veut un peu d,effet!
SVP conseillez-moi.
Merci
RP
_______________________________________________
liste spip
sp...@rezo.net - désabonnement : envoyer un mail à spip...@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
Eric Gmail
betises. ( moins sur concernant le descriptif) à confirmer
Cr1
Bonsoir,
De mon côté, j'ai fait un upgrade de mon 2.0.10 en 2.1.2 spécifiquement pour
pouvoir utiliser Mediabox et je ne regrette pas !
Il est simple d'emploi, offre toutes les possibilités que tu cherches, et le
choix entre plusieurs effets.
Maintenant, à toi de voir si tu es prêt à upgrader Spip ou non.
http://www.spip-contrib.net/MediaBox
Carine.
Le 11/01/11 20:01, « Eric Gmail » <e.bou...@gmail.com> a écrit :
Renée Picard
NON je ne suis pas prête à upgrader car le site visé utilise le plugin
THELIA pour la vente en ligne.
Présentement cet aspect du site va bien et je ne veux pas faire de
modifications sachant toutes les embêtes que j'ai eu dans le passé.
http://www.paniersdici.com
RP
Gerard Colin
Gérard
Le 11/01/11 19:59, Renée Picard a écrit :
patrick
As tu pens� � Diaporama en flash ici:
http://www.spip-contrib.net/Flash-diaporama
largement param�trable.
Accepte les titres et descriptions, mais ne supporte pas la transparence
d'arri�re plan.
Visible ici en exemple:
http://imagesetpeche.free.fr/?Diaporama-en-flash
Peut �tre une solution.
Sinon, il y a une fa�on de forcer thicbox � afficher le descriptif, je l'ai
fait, je ne me souviens plus mais, un truc du style dans le titre:
Titre<div>Descritif</>
Je ne l'utilise plus.
Bon courage
A+,Patrick
===============================================
"Ren�e Picard" <pieg...@globetrotter.net> a �crit dans le message de news:
4D2CA87F...@globetrotter.net...
Bonjour
J'ai test� plusieurs plugins sans succ�s.
Avec un SPIP 2.0.10, je voudrais installer une galerie d'images
(portfolio) qui afficherait:
le titre
le descriptif
fl�ches de navigation gauche droite
Pascal
Pascal
Le 12/01/11 08:44, dans igjm4a$st1$1...@dough.gmane.org, « patrick »
<dupo...@club-internet.fr> a écrit :
> Bonjour,
> As tu pensé à Diaporama en flash ici:
>
> http://www.spip-contrib.net/Flash-diaporama
>
> largement paramétrable.
> Accepte les titres et descriptions, mais ne supporte pas la transparence
> d'arrière plan.
>
> Visible ici en exemple:
>
> http://imagesetpeche.free.fr/?Diaporama-en-flash
>
>
> Peut être une solution.
> Sinon, il y a une façon de forcer thicbox à afficher le descriptif, je l'ai
> fait, je ne me souviens plus mais, un truc du style dans le titre:
> Titre<div>Descritif</>
> Je ne l'utilise plus.
> Bon courage
> A+,Patrick
>
>
> ===============================================
>
>
>
> "Renée Picard" <pieg...@globetrotter.net> a écrit dans le message de news:
> 4D2CA87F...@globetrotter.net...
> Bonjour
>
> J'ai testé plusieurs plugins sans succès.
> Avec un SPIP 2.0.10, je voudrais installer une galerie d'images
> (portfolio) qui afficherait:
> le titre
> le descriptif
> flèches de navigation gauche droite
> diaporama.
>
> Thickbox et imagesflow n'affichent pas le descriptif.
> Diapo fait tout cela mais mon client n'aime pas il veut un peu d,effet!
>
> SVP conseillez-moi.
>
> Merci
>
> RP
>
>
>
_______________________________________________
Renée Picard
Dans highslide, j'ai choisi full gallery in a page et cela fait une bonne journￜe que j'essaie d,ajuster les codes pour faire afficher ainsi les images du portfolio de SPIP sans sucￜs. Est-ce que tu l'as installￜ et si oui, est-ce que tu peux m,aider en m'envoyant article.html le contenant?
Merci
RP
Le 2011-01-11 17:18, Gerard Colin a ￜcritￜ:
As-tu ￜtￜ voir du cￜtￜ de " highslide " : http://highslide.com/
Gï¿œrard
Le 11/01/11 19:59, Renￜe Picard a ￜcritￜ:Bonjour
J'ai testￜ plusieurs plugins sans succￜs.
Avec un SPIP 2.0.10, je voudrais installer une galerie d'images (portfolio) qui afficherait:
ï¿œle titre
ï¿œle descriptif
flï¿œches de navigation gauche droite
diaporama.
Thickbox et imagesflow n'affichent pas le descriptif.
Diapo fait tout cela mais mon client n'aime pas il veut un peu d,effet!
SVP conseillez-moi.
Merci
RP
_______________________________________________
liste spip
sp...@rezo.net - dￜsabonnement : envoyer un mail ￜ spip...@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide ￜ toute heure : http://spip.net/irc
Gerard Colin
Tout d'abords j'ai choisi " highslide.js " donc le plus simple.
Voir une page de mon site :
1 )- http://g.colin.free.fr/spip/spip.php?article304
Tu peux déplier l'aide du portfolio, car j'ai choisi deux modes d'affichage du Portfolio dans " article.html " :
1 )- Il y a un {titre_mot=Diapos} dans la boucle d'affichage du corps de l'article comme avec la page ci-dessus.
2 )- C'est un article normal ex : http://g.colin.free.fr/spip/spip.php?article302
Il n'y a pas de de titre_mot qui concerne le Portfolio
Après cela partout où tu as l'intention d'insérer " highslide.js " ( pour moi ), il faut l'appeler dans le head .. ex :
<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
Ensuite il faut l'appeler dans la partie concernée pour mes exemples avec une class="highslide" :
1 )- <BOUCLE_documents02_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
[<div class="#EDIT{titre}" diapos>(#TITRE|couper{240})</div>]
[<a href="(#URL_DOCUMENT)" class="highslide" onclick="return hs.expand(this)" title="#DESCRIPTIF">
[(#LOGO_DOCUMENT||image_reduire{140,140}|liens_ouvrants)]</a>]
</BOUCLE_documents02_portfolio>
2 )- Pour un article normal :
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
[<a href="(#URL_DOCUMENT)" class="highslide" onclick="return hs.expand(this)" title="#DESCRIPTIF">
[(#LOGO_DOCUMENT||image_reduire{140,140}|liens_ouvrants)]</a>]
</BOUCLE_documents_portfolio>
Comme j'ai choisi " highslide.js ", j'ai donc modifier " highslide.css " pour la couleur du cadre des vignettes.
Dernier point comme j'utilise également " highslide " pour une image " Aide à la recherche ", l'appel du script indiqué au début dans " head " est à inclure dans toutes les pages ( sommaire, rubrique, article, brève, plan, erreur 404, etc ... ).
A noter enfin que tu mets le dossier highslide à la racine de spip
Gérard
Le 14/01/11 15:19, Renée Picard a écrit :
Merci
Dans highslide, j'ai choisi full gallery in a page et cela fait une bonne journée que j'essaie d,ajuster les codes pour faire afficher ainsi les images du portfolio de SPIP sans sucès. Est-ce que tu l'as installé et si oui, est-ce que tu peux m,aider en m'envoyant article.html le contenant?
Merci
RP
Le 2011-01-11 17:18, Gerard Colin a écrit :
As-tu été voir du côté de " highslide " : http://highslide.com/
Gérard
Le 11/01/11 19:59, Renée Picard a écrit :
Bonjour
J'ai testé plusieurs plugins sans succès.
Avec un SPIP 2.0.10, je voudrais installer une galerie d'images (portfolio) qui afficherait:
le titre
le descriptif
flèches de navigation gauche droite
diaporama.
Thickbox et imagesflow n'affichent pas le descriptif.
Diapo fait tout cela mais mon client n'aime pas il veut un peu d,effet!
SVP conseillez-moi.
Merci
RP
_______________________________________________
liste spip
sp...@rezo.net - désabonnement : envoyer un mail à spip...@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/
Documentation de SPIP : http://www.spip.net/
Renée picard
Avant de recevoir ton courriel ( j'habite le Québec), j'avais découvert
ce plugin
http://lededansdubocal.net/Le-plugin-SPIP-Highslide.html
Je l'ai installé sur le site et j'utilise l'incrustation d'un modèle
dans un article de la forme:
<mod_highslidegallery111>
LE TOUT FONCTIONNE TRÈS BIEN.
J'ai ajouté #DESCRIPTIF dans la boucle.
Maintenant je veux installer le diaporama qui s'ouvre directement dans
la page.
avec des vignettes horizontales au-dessus.
Comme celui qui se nomme gallery-in-page.html dans le zip original de
highslide.
En m'inspirant de mod_highslidegallery.html , j'ai créé
mod_highslidegallerypage.html qui fonctionne plus ou moins.
Je ne connais rien en <script type="text/javascript">
On peut voir les 2 modèles sur la page test de mon site (attention c'est
un site de commerce en ligne avec THELIA!!!!)
http://www.paniersdici.com/spip.php?article111
Celui du haut est fourni dans le pugin (tout est OK), l'autre est mon
bidoullage.
OUVRIR LE 1 AVANT LE 2 pour voir la différence.
PROBLÈMES À RÉSOUDRE :
2 barres de navigation fantômes...s'affichent à gauche de l'écran
la page ouvre sur les vignettes, puis sur le visualisateur.
Le titre et le descriptif de la première vignette ne s,affichent pas.
Voici le code de mod_highslidegallerypage.html
Si quelqu'unE peut m'aider.
Pourquoi ce plugin n'est-il pas sur SPIP contrib?
Merci
RP
Voici le code de
Renée Picard
[(#REM)
Modèle mod_highslidegallery
27 mai 2010
Insère un diaporama HighSlide avec gallerie
][(#REM)
Les images à visualiser sont jointes à l'article dont l'id suit
le nom du modèle, et ajoutées dans le portefolio.
Usage :
<mod_highslidegallery25> insère un diaporama highslide avec les
images du portfolio de l'article d'id 25
Les images qui sont insérées dans l'article ne sont pas concernées.
]
[(#REM)
]
<script type="text/javascript">
hs.lang = {
cssDirection: 'ltr',
loadingText: '<:highslide:loading_text:>',
loadingTitle: '<:highslide:loading_title:>',
focusTitle: '<:highslide:focus_title:>',
fullExpandTitle: '<:highslide:full_expand_title:>',
//creditsText: '<:highslide:credits_text:>',
creditsText: '',
creditsTitle: '<:highslide:credits_title:>',
previousText: '<:highslide:previous_text:>',
nextText: '<:highslide:next_text:>',
moveText: '<:highslide:move_text:>',
closeText: '<:highslide:close_text:>',
closeTitle: '<:highslide:close_title:>',
resizeTitle: '<:highslide:resize_title:>',
playText: '<:highslide:play_text:>',
playTitle: '<:highslide:play_title:>',
pauseText: '<:highslide:pause_text:>',
pauseTitle: '<:highslide:pause_title:>',
previousTitle: '<:highslide:previous_title:>',
nextTitle: '<:highslide:next_title:>',
moveTitle: '<:highslide:move_title:>',
fullExpandText: '<:highslide:full_expand_text:>',
number: '<:highslide:image:> %1 <:highslide:on:> %2',
restoreTitle: '<:highslide:restore_title:>'
}
/*
Surcharger (optionnel) les réglages définis en haut du fichier
highslide.js.
Le paramètre hs.graphicsDir est important !
*/
hs.graphicsDir = '#CHEMIN{css/graphics/}';
hs.align = '#CONFIG{cfg_highslide/image_align}';
hs.transitions = ['expand', 'crossfade'];
hs.transitionDuration=#CONFIG{cfg_highslide/transitionDuration,500};
hs.fadeInOut = true;
[hs.numberPosition = '(#CONFIG{cfg_highslide/numberPosition})';]
hs.dimmingOpacity = #CONFIG{cfg_highslide/dimmingOpacity,1}/100;
[hs.dimmingDuration = (#CONFIG{cfg_highslide/dimmingDuration});]
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom center',
offsetY: 50
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
thumbnailId: 'gallery-area',
useBox: true,
width: 600,
height: 400,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
captionEval: 'this.a.title',
numberPosition: 'caption'
}
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
//]]>
</script>
<!--
3) Modify some of the styles
-->
<BOUCLE_principale(ARTICLES) {id_article=#ENV{id}}>
<B_document_un>
[(#REM) Placer les vignettes dans un div pour pouvoir intervenir sur
le style]
<div class="highslide-gallery highslide-center">
<h2><:highslide:start_slideshow_gallery:></h2>
[(#REM) SPIP 2.0 rajouter le critère {vu=non}, sinon retirer]
<BOUCLE_document_un(DOCUMENTS){id_article} {mode=document}{extension
IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}{0,1}>
#SET{slideId,#ID_DOCUMENT}
[(#REM) Déclaration des vignettes : l'attribut href indique l'URL de
l'image grande dimension.]
<a href="#URL_DOCUMENT" class="highslide" onclick="return
hs.expand(this,{ slideshowGroup: #GET{slideId}})">
<img
src="[(#FICHIER|image_reduire{#CONFIG{cfg_highslide/thumbWidth,0},#CONFIG{cfg_highslide/thumbHeight,100}}|extraire_attribut{src})]"
alt="Highslide JS" title="<:highslide:clic_to_enlarge:>" />
</a>
[(#REM) (optionnel). Déclaration de la légende. Doit être de la
classe "highslide-caption".]
[<div class="highslide-caption">(#TITRE)</div>]
</BOUCLE_document_un>
[(#REM) SPIP 2.0 rajouter le critère {vu=non}, sinon retirer]
<BOUCLE_documents_portfolio(DOCUMENTS){id_article}
{mode=document}{extension IN png,jpg,gif} {par num titre,
date}{doublons}{vu=non}>
[(#REM) Déclaration des vignettes : l'attribut href indique l'URL de
l'image grande dimension.]
<a href="#URL_DOCUMENT" class="highslide" onclick="return
hs.expand(this,{ slideshowGroup: #GET{slideId}})">
<img
src="[(#FICHIER|image_reduire{#CONFIG{cfg_highslide/thumbWidth,0},#CONFIG{cfg_highslide/thumbHeight,100}}|extraire_attribut{src})]"
alt="Highslide JS" title="<:highslide:clic_to_enlarge:>" />
</a>
[(#REM) (optionnel). Déclaration de la légende. Doit être de la classe
"highslide-caption".]
[<div class="highslide-caption">#TITRE(#DESCRIPTIF)</div>]
</BOUCLE_documents_portfolio>
</div>
</B_document_un>
</BOUCLE_principale>
Le 2011-01-14 12:46, Gerard Colin a écrit :
Renée Picard
[(#REM)
]
<script type="text/javascript">
<BOUCLE_documents_portfolio(DOCUMENTS){id_article}
{mode=document}{extension IN png,jpg,gif} {par num titre,
date}{doublons}{vu=non}>
[(#REM) Déclaration des vignettes : l'attribut href indique
l'URL de l'image grande dimension.]
<a href="#URL_DOCUMENT" class="highslide" onclick="return
hs.expand(this,{ slideshowGroup: #GET{slideId}})">
<img
src="[(#FICHIER|image_reduire{#CONFIG{cfg_highslide/thumbWidth,0},#CONFIG{cfg_highslide/thumbHeight,100}}|extraire_attribut{src})]"
alt="Highslide JS" title="<:highslide:clic_to_enlarge:>" />
</a>
[(#REM) (optionnel). Déclaration de la légende. Doit être de la
classe "highslide-caption".]
[<div class="highslide-caption">#TITRE(#DESCRIPTIF)</div>]
</BOUCLE_documents_portfolio>
</div>
</B_document_un>
</BOUCLE_principale>
_______________________________________________
Gerard Colin
Pré-requis :
- 1) Moi j'utilise highslide depuis mai-juin 2010 qui n'est pas en plugin, c'est pour cette raison que j'indiquais qu'il fallait mettre le dossier highslide à la racine de spip.
- 2) Tu l'as trouvé en plugin qui ne devait pas exister à l'époque .. ce qui effectivement est une bonne nouvelle pour l'avenir et notamment avec la prise en compte des langues, mais qui change ( pour moi .. ) toute la programmation.
Ton problème :
Cette nuit en faisant une mise de mon site, j'ai été voir ta page en essai où effectivement s'affiche une barre qui se multiplie à chaque ouverture du diaporama, et s'efface quand tu recharges la page.
Je me suis donc fait à ce moment la réflexion qu'une boucle était mal déterminée ...
A priori j'ai l'impression que dans une boucle il y a un double de l'appel de cette barre de commande qui est en inclusion ou devrait peut-être être entre crochets " [ ] " ...
Sinon je ne vois pas, même à l'heure du café ( du thé .. ) du matin.
Gérard
Le 14/01/11 23:14, Renée Picard a écrit :
Renée picard
Pour un autre site qui est en 2.1.8 j,ai installé mediabox.
Après plusieurs essais je n'arrive pas à voir le descriptif des photos
et j,en ai besoin.
Est-ce que cette fonctionnalité est présente sur ton site?
Merci
RP
Le 2011-01-11 15:34, Cr1 a écrit :
>
>
Cr1
Bonjour Renée,
Oui, j'ai vu ta question d'hier sur la liste. Je n'utilise pas le descriptif
sur mon site, donc je n'ai malheureusement pas de solution à t'apporter.
J'allais te proposer de poster ta question sur la page du plugin mais je
vois que tu l'as fait. Il y a aussi ce début de piste qui y est avancé par
RealET en juin mais il restait un souci de CSS :
http://www.spip-contrib.net/MediaBox#forum431970
Carine
Le 19/01/11 21:02, « Renée picard » <des3m...@globetrotter.net> a écrit :
Renée Picard
J'ai envoyé un message à REALT
RP
Renée Picard
Merci beaucoup de m,avoir suggéré highslide.
Voici ce que cela donne et je suis très contente.
http://www.paniersdici.com/spip.php?article111
Renée Picard
_______________________________________________