Commit 10a510c7 authored by JM Oupah's avatar JM Oupah

Afficher les crédits en plus du titre de la photo

parent 99e09b86
......@@ -38,8 +38,11 @@ ul.menu-items li.item {padding:0.2em;}
.diaporama figure {margin:0;}
/* *** Les GALERIE *** */
/* portofolio variable */
/* le portfolio variable */
/* portofolio simple */
ul.portfolio-simple {display:flex;}
ul.portfolio-simple li {width:50%;}
ul.portfolio-simple li figure {margin-bottom:0;}
/* portfolio variable */
.portfolio-variable {display:flex;align-items:stretch;}
.portfolio-variable ul {display:flex;flex-direction:column;width:50%;}
.portfolio-variable ul li {margin:0;position:relative;}
......@@ -59,11 +62,14 @@ ul.menu-items li.item {padding:0.2em;}
/* les légendes sur les images */
figure{position:relative;}
figure figcaption.legende {position:absolute;right:1rem;bottom:0.5em;overflow:hidden;}
figure figcaption.legende span {display:inline-block;line-height:1.5em;height:24px;}
figure figcaption.legende span.info {z-index:1;position:relative;border-radius:50%;width:24px;text-align:center;background:#000;color:#fff;border:0;cursor:pointer;}
figure figcaption.legende span.texte {padding:0 1.5em 0 1em;border-radius:1em 0 0 1em;background:#fff;-webkit-transform:translateX(150%);transform:translateX(150%);-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
figure figcaption.legende:hover span.texte {-webkit-transform:translateX(14px);transform:translateX(14px);}
figure figcaption .legende {position:absolute;right:1rem;bottom:0.5em;overflow:hidden;}
figure figcaption .legende span {display:inline-block;line-height:1.5em;height:24px;}
figure figcaption .legende span.info {z-index:1;position:relative;border-radius:50%;width:24px;text-align:center;background:#000;color:#fff;border:0;cursor:pointer;}
figure figcaption .legende span.texte {padding:0 1.5em 0 1em;border-radius:1em 0 0 1em;background:#fff;-webkit-transform:translateX(150%);transform:translateX(150%);-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
figure figcaption .legende:hover span.texte {-webkit-transform:translateX(14px);transform:translateX(14px);}
figure figcaption .credits {position:absolute;left:1rem;bottom:0.5em;display:block;opacity:0.35;padding:0 0.2em;text-align:right;-webkit-transition:opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;transition:opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;}
figure:hover figcaption .credits {opacity:0.75;}
figure figcaption .credits:hover {background:rgba(0,0,0,0.25);color:#fff}
/* *** DIVERS *** */
picture {vertical-align:top;}
......
[(#SET{largeur,#ENV{larger,1000}})][
(#SET{hauteur,#ENV{hauteur,350}})]
<B_diaporama>
<ul class="liste-items diaporama">
<ul class="liste-items diaporama galerie">
<BOUCLE_diaporama(DOCUMENTS){id_rubrique?}{id_article?}{par rang_lien, num titre}{extension==jpg|png|gif}>
[<li class="item"><figure>
(#FICHIER|image_recadre{#GET{largeur}:#GET{hauteur}, -, focus}|image_responsive{#GET{largeur}})
[<figcaption class="legende"><span class="texte">(#TITRE)</span><span class="info">i</span></figcaption>]
[(#TITRE|ou{#CREDITS}|oui)<figcaption>
[<div class="legende"><span class="texte">(#TITRE)</span><span class="info">i</span></div>]
[<span class="credits">(#CREDITS)</span>]
</figcaption>]
</figure></li>]
</BOUCLE_diaporama>
</ul>
......
<B_portfolio>
<ul class="liste-items">
<ul class="liste-items portfolio-simple galerie">
<BOUCLE_portfolio(DOCUMENTS){id_article?}{id_rubrique?}{par rang_lien, num titre}{0,2}{extension==jpg|png|gif}>
<li class="item">
[(#COMPTEUR_BOUCLE|=={#ENV{position_rond}}|?{
[<figure class="spip_documents rond illustration">(#FICHIER|image_recadre{300:300, -, focus}|image_responsive{150/300})</figure>]
,
[<figure>(#FICHIER|image_recadre{500:350, -, focus}|image_responsive{250/500})[<figcaption class="legende"><span class="texte">(#TITRE)</span><span class="info">i</span></figcaption>]</figure>]
[<figure>
(#FICHIER|image_recadre{500:350, -, focus}|image_responsive{250/500})
[(#TITRE|ou{#CREDITS}|oui)<figcaption>
[<div class="legende"><span class="texte">(#TITRE)</span><span class="info">i</span></div>]
[<div class="credits">(#CREDITS)</div>]
</figcaption>]
</figure>]
})]
</li>
</BOUCLE_portfolio>
......
[(#SET{fichier,#ARRAY})][
(#SET{legende,#ARRAY})
(#SET{legende,#ARRAY})][
(#SET{credits,#ARRAY})
]<BOUCLE_docunments(DOCUMENTS){id_article?}{id_rubrique?}{par rang_lien, num titre}{0,4}{extension==jpg|png|gif}>
[(#SET{fichier, #GET{fichier}|push{#FICHIER}})][
(#SET{legende, #GET{legende}|push{#TITRE}})]
(#SET{legende, #GET{legende}|push{#TITRE}})][
(#SET{credits, #GET{credits}|push{#CREDITS}})]
</BOUCLE_docunments>
<ul class="liste-items">
<li class="item">
[<figure>(#GET{fichier}|table_valeur{0}|image_recadre{500:350, -, focus}|image_responsive{250/500})[
<figcaption class="legende"><span class="texte">(#GET{legende}|table_valeur{0})</span><span class="info">i</span></figcaption>
]</figure>]
</li>
<li class="item">
[<figure>(#GET{fichier}|table_valeur{2}|image_recadre{500:250, -, focus}|image_responsive{250/500})[
<figcaption class="legende"><span class="texte">(#GET{legende}|table_valeur{2})</span><span class="info">i</span></figcaption>
]</figure>]
</li>
</ul>
<ul class="liste-items">
<li class="item">
[<figure>(#GET{fichier}|table_valeur{1}|image_recadre{500:250, -, focus}|image_responsive{250/500})[
<figcaption class="legende"><span class="texte">(#GET{legende}|table_valeur{1})</span><span class="info">i</span></figcaption>
]</figure>]
</li>
<li class="item">
[<figure>(#GET{fichier}|table_valeur{3}|image_recadre{500:350, -, focus}|image_responsive{250/500})[
<figcaption class="legende"><span class="texte">(#GET{legende}|table_valeur{3})</span><span class="info">i</span></figcaption>
]</figure>]
</li>
</ul>
<div class="portfolio-variable">
<ul class="liste-items galerie">
<li class="item">
[<figure>
(#GET{fichier}|table_valeur{0}|image_recadre{500:350, -, focus}|image_responsive{250/500})
[(#GET{legende}|table_valeur{0}|ou{#GET{credits}|table_valeur{0}}|oui)<figcaption>
[<div class="legende"><span class="texte">(#GET{legende}|table_valeur{0})</span><span class="info">i</span></div>]
[<div class="credits">(#GET{credits}|table_valeur{0})</div>]
</figcaption>]
</figure>]
</li>
<li class="item">
[<figure>
(#GET{fichier}|table_valeur{2}|image_recadre{500:250, -, focus}|image_responsive{250/500})
[(#GET{legende}|table_valeur{2}|ou{#GET{credits}|table_valeur{2}}|oui)<figcaption>
[<div class="legende"><span class="texte">(#GET{legende}|table_valeur{2})</span><span class="info">i</span></div>]
[<div class="credits">(#GET{credits}|table_valeur{2})</div>]
</figcaption>]
</figure>]
</li>
</ul>
<ul class="liste-items">
<li class="item">
[<figure>
(#GET{fichier}|table_valeur{1}|image_recadre{500:250, -, focus}|image_responsive{250/500})
[(#GET{legende}|table_valeur{1}|ou{#GET{credits}|table_valeur{1}}|oui)<figcaption>
[<div class="legende"><span class="texte">(#GET{legende}|table_valeur{1})</span><span class="info">i</span></div>]
[<div class="credits">(#GET{credits}|table_valeur{1})</div>]
</figcaption>]
</figure>]
</li>
<li class="item">
[<figure>
(#GET{fichier}|table_valeur{3}|image_recadre{500:350, -, focus}|image_responsive{250/500})
[(#GET{legende}|table_valeur{3}|ou{#GET{credits}|table_valeur{3}}|oui)<figcaption>
[<div class="legende"><span class="texte">(#GET{legende}|table_valeur{3})</span><span class="info">i</span></div>]
[<div class="credits">(#GET{credits}|table_valeur{3})</div>]
</figcaption>]
</figure>]
</li>
</ul>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment