Écrire une réponse

Pages: 1

  •  » Styles
  •  » [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

#1 2013-07-30 15:35:24

patfrwar
Membre
Tours
2011-05-24
164

[Résolu] [Stripped]Affichage Images avec vignette pour prev et next

catégorie personnalisation Stripped thème

Bonjour

je me suis lancé dans la modification du template : picture.tpl du theme stripped que j'utilise

pour cela j'ai utilisé local file éditor, j'ai crée un fichier my_picture.tpl avec comme origine le fichier picture.tpl du thème

en fait j'ai utilisé un peu de code qui vient du thème: OS_glass_dark

dans l'affichage des Images de stripped il y a une grosse Flèche à Gauche et à Droite qui ont comme lien l'image précédente ou suivante
je souhaite remplacer ces flèches par les vignettes de l'image précédente ou suivante comme le -//:---\spam ma copie d'écran
ca fonctionne sauf que les vignettes je souhaiterai les centrer verticalement ainsi que l'image Principale qui a perdu sont centrage horizontal
et la je butte j'ai testé tout un tas de balise CSS mais rien n'y alors si vous pouviez me donner un coup de main ce serait sympa

voici le code (ou les codes)

le CSS que j'ai inclu dans : local/css/stripped-rules.css
----------------------------------------------------------
#prevleft {
float: left;
width: 15%;
height: auto;
margin-right: 10px;
}

#ImgCenter{
float: left;
display:block;
vertical-align:middle;
}

#nextright {
float: right;
width: 15%;
margin-left: 10px;
}


---------------------------------------------------------------
Le code d'origine du fichier picture.tpl du Theme Stripped
---------------------------------------------------------------
<div id="theImageAndTitle">
    <div id="theImageBox" >
        <div class="hideTabsZone hideTabs">&nbsp;</div>
        {if (isset($previous) && $stripped.navArrows) }
            <a href="{$previous.U_IMG}" id="imgprev">&nbsp;</a>
        {/if}
        <div id="theImage">
            {$ELEMENT_CONTENT}
        </div>
        {if (isset($next) && $stripped.navArrows)}
            <a href="{$next.U_IMG}" id="imgnext">&nbsp;</a>
        {/if}
    </div>
    {if $showTitle }
        <div id="imageTitleContainer"><div id="imageTitle">
            {if ($stripped.imageCaption == 'description' )}
                {$COMMENT_IMG}
            {/if}
            {if ($stripped.imageCaption == 'title' )}
                {$current.TITLE}
            {/if}
        </div></div>
    {/if}
</div> <!-- theImage -->
------------------------------------------------------------

---------------------------------------------------------------
Le code que j'ai mis en remplacement dans mon fichier template my_picture.tpl copie du theme Stripped
---------------------------------------------------------------
<div id="theImageAndTitle">
    <div id="theImageBox" >
        <div class="hideTabsZone hideTabs">&nbsp;</div>
        {if (isset($previous) && $stripped.navArrows) }

        <div id="prevleft">
                      <a id="thumbPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev">
                {assign var=Pwg_VERSION value=strpos('2.4',$PHPWG_VERSION) }
                {if isset($Pwg_VERSION) and $Pwg_VERSION!==false }
                <img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE}">
                {else}
                <img src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}">
                {/if}
            </a>
                </div>       

        {/if}
        <div id="ImgCenter">
            {$ELEMENT_CONTENT}
        </div>
        {if (isset($next) && $stripped.navArrows)}

        <div id="nextright">
            <a id="thumbNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next">
                {assign var=Pwg_VERSION value=strpos('2.4',$PHPWG_VERSION) }
                {if isset($Pwg_VERSION) and $Pwg_VERSION!==false }
                <img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE}">
                {else}
                <img src="{$next.THUMB_SRC}" alt="{$next.TITLE}">
                {/if}
            </a>       
        </div>       
       
        {/if}
                <div class="spacer"> </div>
    </div>
    {if $showTitle }
        <div id="imageTitleContainer"><div id="imageTitle">
            {if ($stripped.imageCaption == 'description' )}
                {$COMMENT_IMG}
            {/if}
            {if ($stripped.imageCaption == 'title' )}
                {$current.TITLE}
            {/if}
        </div></div>
    {/if}
</div> <!-- theImage -->


---------------------------------------

cdlt
Patrick

Hors ligne

#2 2013-07-30 16:29:23

flop25
Équipe Piwigo
2006-07-06
6544

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

Bonjour
ça serait beaucoup mieux avec un lien svp

Pour mieux être aidé : Politesse-Un lien-Vos actions passées précises
Mes extensions : plus de 30 disponibles
NEW Formez vous sur Piwigo et formez :)
Ma galerie : un ex d'intégration dans un site

Hors ligne

#3 2013-07-30 16:49:52

flop25
Équipe Piwigo
2006-07-06
6544

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

juste

Code:

#theImageBox {
    position: relative;// d'avant
    text-align: center;
}
#ImgCenter {
   display: inline-block;
}

à mettre en fav : http://www.alsacreations.com/tuto/lire/ … l#cv_blocs

Pour mieux être aidé : Politesse-Un lien-Vos actions passées précises
Mes extensions : plus de 30 disponibles
NEW Formez vous sur Piwigo et formez :)
Ma galerie : un ex d'intégration dans un site

Hors ligne

#4 2013-07-30 17:28:48

patfrwar
Membre
Tours
2011-05-24
164

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

Oui Alsa fait parti d mes Favori depuis longtemps

et j'ai déjà pioché pas mal et fait moulte tentative et comme ta solution, ça ne change rien
voici le css avec ta solution

#prevleft {
float: left;
width: 15%;
height: Inherit;
margin-right: 10px;
}

#theImageBox {                    <--------------- si je supprime le div dans le template je perd les liens des vignettes (c'est un essai que j'ai fait
position: relative;   // d'avant                        ajouter relative n'a rien changé
text-align: center;
}


#ImgCenter{
float: left;                               <---------------si je supprime cette ligne je n'est plus le lien sous les vignettes et la ,  mon image est à gauche
display: inline-block;
}

#nextright {
float: right;
height: Inherit;
width: 15%;
margin-left: 10px;
}

plutot curieux comme comportement non

merci quand même

Hors ligne

#5 2013-07-31 11:57:32

patfrwar
Membre
Tours
2011-05-24
164

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

Bonjour

Eh bien je sais pas si c'est la chaleur ou si c'est la prise de tête sur le CSS, mais j'ai transpiré à grosses goutes

et j'ai le résultat donc je vous le livre :

le CSS en premier :

#prevleft {
  display: inline-block;
  position: absolute;
  top:50%;
  margin-top:-75px;
  left: 4px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 3px solid #FFFFFF;
}

#nextright {
  display: inline-block;
  position: absolute;
  right: 4px;
  top:50%;
  margin-top:-75px;
  vertical-align: middle;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 3px solid #FFFFFF;
}

Il remplace celui que j'ai mis dans mon premier message le id #ImgCenter n'est plus utile

ensuite le Code qui est dans my_picture.tpl

<div id="theImageBox" >   
        <div class="hideTabsZone hideTabs">&nbsp;</div>
        {if (isset($previous) && $stripped.navArrows) }
                      <a id="prevleft" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev">
                {assign var=Pwg_VERSION value=strpos('2.4',$PHPWG_VERSION) }
                {if isset($Pwg_VERSION) and $Pwg_VERSION!==false }
                <img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE}">
                {else}
                <img src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}">
                {/if}
            </a>
        {/if}
        <div>
            {$ELEMENT_CONTENT}
        </div>
                {if (isset($next) && $stripped.navArrows)}
            <a id="nextright" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next">
                {assign var=Pwg_VERSION value=strpos('2.4',$PHPWG_VERSION) }
                {if isset($Pwg_VERSION) and $Pwg_VERSION!==false }
                <img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE}">
                {else}
                <img src="{$next.THUMB_SRC}" alt="{$next.TITLE}">
                {/if}
            </a>       
        {/if}
                <div class="spacer"> </div>
    </div>   

il est à placer en remplacement de ce qui se situe entre : <div id="theImageAndTitle">    ------- et  : -------    {if $showTitle }
le résultat en image .

merci
cdlt

Hors ligne

#6 2013-07-31 13:34:26

patfrwar
Membre
Tours
2011-05-24
164

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

re bonjour

Juste une dernière question, mes vignettes en fait on un Nom de fichier qui se termine par : " _sq "
comment puis je obtenir les vignettes dont le nom de fichier se termine par : " _th "

je ne vois pas dans le fichier picture.tpl ou ça se situe
si quelqu'un peut aiguillier

merci

Hors ligne

#7 2013-08-02 15:49:28

patfrwar
Membre
Tours
2011-05-24
164

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

Bonjour

Après simplification du code voici 2 affichages possible pour l'image avec les vignettes à gauche et à droite pour les images précédentes et suivantes
tout en utilisant le thême stripped

1) Les vignettes avec Une flèche en superposition transparente
------------------------------------------------------------------------

Le CSS :   
==========
#prevleft {
  display: inline-block;
  position: absolute;
  top:50%;
  margin-top:-74px;
  left: 10px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 3px solid #FFFFFF;
  padding: 2px;
}

.VigHover {
height: 100%;
position: absolute;
width: 100%;
}
.prevVigHover {
   background: url("/piwigo/themes/stripped/icon/none.png") no-repeat scroll center center transparent;
}
.prevVigHover:hover {
    background: url("/piwigo/themes/stripped/icon/img_prev.png") no-repeat scroll center center transparent;
}

#nextright {
  display: inline-block;
  position: absolute;
  right: 10px;
  top:50%;
  margin-top:-74px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 3px solid #FFFFFF;
  padding: 2px;
}
.VigHover {
  height: 100%;
  position: absolute;
  width: 100%;
}
.nextVigHover {
    background: url("/piwigo/themes/stripped/icon/none.png") no-repeat scroll center center transparent;
}
.nextVigHover:hover {
    background: url("/piwigo/themes/stripped/icon/img_next.png") no-repeat scroll center center transparent;
}

================
LE Code de remplacement dans  template picture.tpl
================
    <div id="theImageBox" >   
        <div class="hideTabsZone hideTabs">&nbsp;</div>
        {if (isset($previous) && $stripped.navArrows) }
                      <a id="prevleft" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev">
                     <span class="VigHover prevVigHover"></span>           
                       <img   src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}">
            </a>
        {/if}
        <div>
            {$ELEMENT_CONTENT}
        </div>
        {if (isset($next) && $stripped.navArrows)}
            <a id="nextright" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next">
                <span class="VigHover nextVigHover"></span>
                <img src="{$next.THUMB_SRC}" alt="{$next.TITLE}">
            </a>       
        {/if}
                <div class="spacer"> </div>
    </div>
======================

2) Les vignettes avec Un effet de zoom au survol de a sourie
------------------------------------------------------------------------
Le CSS :   
==========

#prevleft {
  display: inline-block;
  position: absolute;
  top:50%;
  margin-top:-74px;
  left: 10px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 3px solid #FFFFFF;
  padding: 2px;
}

.VigZoom {
   background: url("/icon/none.png") no-repeat scroll center center transparent;
}

.VigZoom:hover {
    opacity: 1; /* L'image survolée aura une opacité de 100% */
    z-index: 100;
    transform: scale(1.1); /* On affiche l'image à sa taille normale */
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    box-shadow: 1px 1px 10px #000; /* On ajoute une ombre */
    -moz-box-shadow: 1px 1px 10px #000;
    -o-box-shadow: 1px 1px 10px #000;
    -webkit-box-shadow: 1px 1px 10px #000;
        -moz-border-radius: 5px 5px 5px 5px;
        border: 3px solid #FFFFFF;
} 

#nextright {
  display: inline-block;
  position: absolute;
  right: 10px;
  top:50%;
  margin-top:-74px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 3px solid #FFFFFF;
  padding: 2px;
}
================
LE Code de remplacement dans  template picture.tpl
================
    <div id="theImageBox" >   
        <div class="hideTabsZone hideTabs">&nbsp;</div>
        {if (isset($previous) && $stripped.navArrows) }
            <a id="prevleft" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev">                 
                   <img  class="VigZoom " src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}">
            </a>
        {/if}
        <div>
            {$ELEMENT_CONTENT}
        </div>
        {if (isset($next) && $stripped.navArrows)}
            <a id="nextright" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next">
                <img  class="VigZoom " src="{$next.THUMB_SRC}" alt="{$next.TITLE}">
            </a>       
        {/if}
        <div class="spacer"> </div>
    </div>
==================
bien cordialement

Hors ligne

#8 2013-08-02 17:13:36

flop25
Équipe Piwigo
2006-07-06
6544

Re: [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

C'est très gentil de partager Bonne journée

Pour mieux être aidé : Politesse-Un lien-Vos actions passées précises
Mes extensions : plus de 30 disponibles
NEW Formez vous sur Piwigo et formez :)
Ma galerie : un ex d'intégration dans un site

Hors ligne

Pages: 1

  •  » Styles
  •  » [Résolu] [Stripped]Affichage Images avec vignette pour prev et next

Écrire une réponse

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact