#1 2011-04-16 17:20:13

Xellos
Membre
2011-04-16
14

Amélioration de l'interface pour les tags d'images en mode unitaire

Bonjour,

Utilisant très souvent cette page (batch_manager, anciennement element_set_unit), j'ai trouvé utile d'ajouter un peu de code javascript et de modifier ce template pour afficher une image plus grande lors du survol de la vignette. Il est assez difficile d'affecter des tags quand on ne voit pas ce qu'il y a sur l'image.

Le code n'est pas très complexe mais un peu long pour être envoyé dans ce message. Si vous êtes intéressé, je peux vous le fournir.


Images attachées

Hors ligne

#2 2011-04-16 17:32:52

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13324

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Bonjour,

Vous avez tout à fait raison de vouloir agrandir cette miniature.

Pour nous transmettre votre code, vous pourriez utiliser le site : http://pastie.org/ ou bien envoyez un courriel à l'un des membres de l'équipe ;-)

En tous cas, merci pour votre partage ;-)


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

#3 2011-04-16 17:42:33

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14554

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Xellos a écrit:

Le code n'est pas très complexe mais un peu long pour être envoyé dans ce message. Si vous êtes intéressé, je peux vous le fournir.

ce n'est pas grave j'ai des traducteurs qui post des fichier de 700 lignes

N'hésite pas à proposer ton code sur le forum ;-)


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#4 2011-04-16 18:20:01

Xellos
Membre
2011-04-16
14

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Voici mes modifications (en gras). Ce n'est rien de bien méchant et je pense qu'on même utiliser jquery pour faire un javascript plus "propre".

Fichier batch_manager_unit.tpl :

{include file='include/autosize.inc.tpl'}
{include file='include/datepicker.inc.tpl'}

{combine_script id='jquery.fcbkcomplete' load='async' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'}
{footer_script require='jquery.fcbkcomplete'}
var tag_boxes_selector = "";
{foreach from=$elements item=element name=element}
{if $smarty.foreach.element.first}
var prefix = "";
{else}
prefix = ", ";
{/if}
    tag_boxes_selector = tag_boxes_selector + prefix + "#tags-" + {$element.ID};
{/foreach}
{literal}
jQuery(document).ready(function() {
    $(tag_boxes_selector).fcbkcomplete({
        json_url: "admin.php?fckb_tags=1",
        cache: false,
        filter_case: false,
        filter_hide: true,
        firstselected: true,
        filter_selected: true,
        maxitems: 100,
        newel: true
    });
});
{/literal}{/footer_script}

<h2>{'Batch Manager'|@translate}</h2>

<form action="{$F_ACTION}" method="POST">
<fieldset>
  <legend>{'Display options'|@translate}</legend>
  <p>{'photos per page'|@translate} :
      <a href="{$U_ELEMENTS_PAGE}&amp;display=5">5</a>
    | <a href="{$U_ELEMENTS_PAGE}&amp;display=10">10</a>
    | <a href="{$U_ELEMENTS_PAGE}&amp;display=50">50</a>
    | <a href="{$U_ELEMENTS_PAGE}&amp;display=all">{'all'|@translate}</a>
  </p>

</fieldset>

{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}

{if !empty($elements) }
<div><input type="hidden" name="element_ids" value="{$ELEMENT_IDS}"></div>
{foreach from=$elements item=element}
<fieldset class="elementEdit">
  <legend>{$element.LEGEND}</legend>

  <a href="{$element.U_EDIT}"><img src="{$element.TN_SRC}" alt="" title="{'Edit photo information'|@translate}" onmouseover="showImg(event, '{$element.TN_SRC}');" onmouseout="hideImg();"></a>

  <table>

    <tr>
      <td><strong>{'Name'|@translate}</strong></td>
      <td><input type="text" class="large" name="name-{$element.ID}" value="{$element.NAME}"></td>
    </tr>

    <tr>
      <td><strong>{'Author'|@translate}</strong></td>
      <td><input type="text" class="large" name="author-{$element.ID}" value="{$element.AUTHOR}"></td>
    </tr>

    <tr>
      <td><strong>{'Creation date'|@translate}</strong></td>
      <td>
        <label><input type="radio" name="date_creation_action-{$element.ID}" value="unset"> {'unset'|@translate}</label>
        <label><input type="radio" name="date_creation_action-{$element.ID}" value="set" id="date_creation_action_set-{$element.ID}"> {'set to'|@translate}</label>

        <select id="date_creation_day-{$element.ID}" name="date_creation_day-{$element.ID}">
             <option value="0">--</option>
           {section name=day start=1 loop=32}
             <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$element.DATE_CREATION_DAY}selected="selected"{/if}>{$smarty.section.day.index}</option>
           {/section}
        </select>
        <select id="date_creation_month-{$element.ID}" name="date_creation_month-{$element.ID}">
          {html_options options=$month_list selected=$element.DATE_CREATION_MONTH}
        </select>
        <input id="date_creation_year-{$element.ID}"
               name="date_creation_year-{$element.ID}"
               type="text"
               size="4"
               maxlength="4"
               value="{$element.DATE_CREATION_YEAR}">
        <input id="date_creation_linked_date-{$element.ID}" name="date_creation_linked_date-{$element.ID}" type="hidden" size="10" disabled="disabled">
        {footer_script}
          pwg_initialization_datepicker("#date_creation_day-{$element.ID}", "#date_creation_month-{$element.ID}", "#date_creation_year-{$element.ID}", "#date_creation_linked_date-{$element.ID}", "#date_creation_action_set-{$element.ID}");
        {/footer_script}
      </td>
    </tr>
    <tr>
      <td><strong>{'Who can see this photo?'|@translate}</strong></td>
      <td>
        <select name="level-{$element.ID}">
          {html_options options=$level_options selected=$element.LEVEL}
        </select>
      </td>
    </tr>

    <tr>
      <td><strong>{'Tags'|@translate}</strong></td>
      <td>

<select id="tags-{$element.ID}" name="tags-{$element.ID}">
{foreach from=$element.TAGS item=tag}
  <option value="{$tag.value}" class="selected">{$tag.caption}</option>
{/foreach}
</select>

      </td>
    </tr>

    <tr>
      <td><strong>{'Description'|@translate}</strong></td>
      <td><textarea cols="50" rows="5" name="description-{$element.ID}" id="description-{$element.ID}" class="description">{$element.DESCRIPTION}</textarea></td>
    </tr>

  </table>

</fieldset>
{/foreach}

<p>
  <input class="submit" type="submit" value="{'Submit'|@translate}" name="submit">
  <input class="submit" type="reset" value="{'Reset'|@translate}">
</p>
{/if}

</form>

<script type="text/javascript">// <![CDATA[
{literal}$(document).ready(function() {
    $(".elementEdit img").fadeTo("slow", 0.6); // Opacity on page load
    $(".elementEdit img").hover(function(){
        $(this).fadeTo("slow", 1.0); // Opacity on hover
    },function(){
           $(this).fadeTo("slow", 0.6); // Opacity on mouseout
    });
});{/literal}
// ]]>
</script>

<script type="text/javascript">// <![CDATA[
{literal}function showImg(peEvent, psUrl) {
    if (peEvent == null) var peEvent = window.event;
    var sUrl = psUrl.replace("thumbnail/TN-", "");

    var eDiv = document.getElementById("divImg");
    if (eDiv == null) {
        eDiv = document.createElement("div");
        eDiv.style.display = "none";
        eDiv.style.border = "1px solid gray";
        eDiv.style.backgroundColor = "whitesmoke";
        eDiv.id = "divImg";
        document.body.appendChild(eDiv);
    }

if (eDiv.style.display == "block") return false;

    var posx = 0;
    var posy = 0;
    if (peEvent.pageX || peEvent.pageY)     {
        posx = peEvent.pageX;
        posy = peEvent.pageY;
    }
    else if (peEvent.clientX || peEvent.clientY)     {
        posx = peEvent.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = peEvent.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }


    eDiv.innerHTML = "<img style='padding: 6px;' src='" + sUrl + "'>";
    eDiv.style.position = "absolute";
    eDiv.style.top = posy - 300 + "px";
    eDiv.style.left = 50 + "px";
    eDiv.style.zIndex = 5000;
    eDiv.style.display = "block";
}

function hideImg() {

    var eDiv = document.getElementById("divImg");
    if (eDiv != null) {
        eDiv.style.display = "none";
    }
}{/literal}
// ]]>
</script>

Hors ligne

#5 2011-04-18 11:10:27

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14554

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Est ce que tu peux ouvrir un ticket dans le gestionnaire

Sur le principe de rajouter un élément qui permet de visualiser la taille web pour pouvoir tagger
genre un lien zoom qui ouvre une lightbox

Qu'est ce que tu en penses


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#6 2011-04-18 20:15:26

Xellos
Membre
2011-04-16
14

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Hors ligne

#7 2011-04-18 21:05:40

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14554

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Merci :-)


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#8 2011-04-23 19:38:34

mistic100
Ex Equipe Piwigo
Lyon
2008-09-27
3556

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

je prend ^^

quel est le plus léger, efficace et complet plugin "lightbox" pour jQuery ?
je connais Colorbox, Slimbox, le clone de Lightbox évidement.... et il y en a plein d'autres

personnellement j'ai une petite préférence pour ColorBox

Hors ligne

#9 2011-04-23 19:42:39

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13324

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Celui que tu veux du temps que ça reste tout léger et simple. Le but n'est pas de refaire une galerie coté Administration ^_^


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

#10 2011-04-23 20:08:23

mistic100
Ex Equipe Piwigo
Lyon
2008-09-27
3556

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

c'est que si on l'ajoute aux plugins jquery dispo par défaut, les plugins Piwigo pourront l'utiliser, donc autant prendre le meilleur

bon je prend ColorBox, il à l'air maintenu (dernière maj en mars 2011) alors que LighBox n'a pas bougé depuis 2007 :s

Hors ligne

#11 2011-04-23 22:07:48

P@t
Équipe Piwigo
Nice
2007-06-13
5694

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

mistic100 a écrit:

quel est le plus léger, efficace et complet plugin "lightbox" pour jQuery ?
je connais Colorbox, Slimbox, le clone de Lightbox évidement.... et il y en a plein d'autres

personnellement j'ai une petite préférence pour ColorBox

Colorbox, c'est celui que j'utilise pour [extension by P@t] Lightbox. Il est bien maintenu en effet, et très pratique.
Il y a aussi shadowbox et highslide qui sont très bien, mais il y a un problème de license.


P@t

Hors ligne

#12 2011-04-23 22:39:53

mistic100
Ex Equipe Piwigo
Lyon
2008-09-27
3556

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

c'est pour ça que j'en ai pas parlé ^^

Hors ligne

#13 2011-04-28 00:02:48

mistic100
Ex Equipe Piwigo
Lyon
2008-09-27
3556

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

voila j'ai commité
et pour les prochaines versions de Lightbox tu pourra utiliser la version ColorBox qui est dans le core :p (il y a un fichier include qui charge le js et le css)

Hors ligne

#14 2011-06-04 19:13:49

Xellos
Membre
2011-04-16
14

Re: Amélioration de l'interface pour les tags d'images en mode unitaire

Bonjour,

J'ai fait la mise à jour de piwigo en 2.2.2 et ça marche nickel.
Merci !

Dernière modification par Xellos (2011-06-04 19:31:59)

Hors ligne

Pied de page des forums

Propulsé par FluxBB

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