Écrire une réponse

Veuillez écrire votre message et l'envoyer

Cliquez dans la zone sombre de l'image pour envoyer votre message.

Retour

Résumé de la discussion (messages les plus récents en premier)

flop25
2013-08-02 17:13:36

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

patfrwar
2013-08-02 15:49:28

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

patfrwar
2013-07-31 13:34:26

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

patfrwar
2013-07-31 11:57:32

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

patfrwar
2013-07-30 17:28:48

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

flop25
2013-07-30 16:49:52

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

flop25
2013-07-30 16:29:23

Bonjour
ça serait beaucoup mieux avec un lien svp

patfrwar
2013-07-30 15:35:24

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

Pied de page des forums

Propulsé par FluxBB

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