Annonce

É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
2012-06-13 16:49:48

en fait il est même unique tout cours, donc tu peux écraser

flop25
2012-06-13 16:42:51

ddtddt a écrit:

flop25 a écrit:

tes deux variables tu les concatènes en une et tu assignes à TITTLE

non

Title est utilisé ailleurs, il faut faire un préfiltre

ok mais où car du moins dans index.tpl il est unique

ddtddt
2012-06-13 16:38:52

flop25 a écrit:

tes deux variables tu les concatènes en une et tu assignes à TITTLE

non

Title est utilisé ailleurs, il faut faire un préfiltre

flop25
2012-06-13 14:33:42

ddtddt a écrit:

(pour les tpl tu devrais faire un préfiltre pour que cela ne soit pas écrasé par les mise à jour)

en effet mais je dirais même de ne PAS changer le code tpl.
tes deux variables tu les concatènes en une et tu assignes à TITTLE

ddtddt
2012-06-13 12:51:35

(pour les tpl tu devrais faire un préfiltre pour que cela ne soit pas écrasé par les mise à jour)

Gotcha
2012-06-13 11:36:30

notph a écrit:

EDIT: Que voudrais-tu qu'elle fasse cette fonction exactement sous l'image? Un simple slideout?

Exemple : http://galerie.julien-moreau.fr/picture … tegory/543

Mais c'est un peu HS car le fil du sujet concerne le fil d'Ariane... Pourriez-vous me répondre sur un nouveau sujet (je suis pressé, je dois filer au travail).
Merci.

notph
2012-06-13 11:19:25

Grillé pour jBreadcrumbs ;)

Mais comme ce n'était tout à fait ce que je recherchais je n'ai pas souhaité l'utiliser.
Après je pense qu'il est adaptable à Piwigo avec un peu de travail.

J'ai fait une petite modif dans le code jQuery de manière à arrêter le clignotement:

<style>#effect {width:60px; height:16px;}</style>
<script>

jQuery(document).ready(function(){
//Cacher la premiere partie du fil d'ariane
jQuery("#effect").animate({
    width: "60px",
    height: "16px",
  }, 0 );
});

// Hover
$(".titrePage").hover(
  function (e) {
    jQuery("#effect").stop(true, false).animateAuto("width", 500);
  },
  function (e) {
    jQuery("#effect").stop(true,false).delay(200).animate({"width":"60px","height":"16px"}, 500); 
  }
);
// Fonction Size:Auto
jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"width":"auto"}).appendTo(el.parent());
        width = elem.css("width"),
        width = width;
        elem.remove();
       
        if(prop === "width")
            el.animate({"width":width}, speed, callback); 

    }); 
}
      
</script>

Nouvelle demo: http://jsfiddle.net/6jMnc/13/embedded/result/


EDIT: Que voudrais-tu qu'elle fasse cette fonction exactement sous l'image? Un simple slideout?

Gotcha
2012-06-13 11:06:55

C'est un bel effet !
Mais pour le fil d’Ariane j'aurais vu plutôt un moyen de raccourcir les noms des albums parents (quit à faire de la troncature et pouvoir les développer au survole, possible ?) mais ta fonction là je la verrais bien dans l'information de l'image qui se trouve sous la photo (taille web).

Là ce serait très utile ton fonction.

Bravo ;-)

notph
2012-06-13 10:58:14

Voilà j'ai a peu prés réussi à avoir ce que je voulais. Reste un petit "clignotement" lorsque l'on rentre et sort trop vite de la zone d'hover mais je réglerai ça plus tard. Un delay fera surement l'affaire.
Pour commencer voici une démo de ce que ça rend (attention, presque aucun CSS ici c'est donc assez moche ;) )

DEMO: http://jsfiddle.net/6jMnc/7/embedded/result/

Le code:

add_event_handler('loc_end_page_header', 'notph1' );

function notph1 ()
{
global $template, $page, $conf;

$template_title = $page['title'];
$bread_array = explode($conf['level_separator'], $template_title);
$bread_array_c = $bread_array;
$bread_count = count($bread_array);
unset($bread_array_c[$bread_count-1]);
$bread_previous_part = implode($conf['level_separator'], $bread_array_c);
if ($bread_count > 1)
{
  $bread_previous = "<div style=\"float:left;overflow: hidden; height:16px;\" id=\"effect\">".$bread_previous_part. " /&nbsp;</div>";
}
else
{
$bread_previous = "<div style=\"float:left;overflow: hidden; height:16px;\" id=\"effect\">".$bread_previous_part. " </div>";
}
if (count($page['items']) > 0)
{
  $bread_array[$bread_count-1].= ' ['.count($page['items']).']';
}


$template->assign('PREVIOUS_PAGES_TITLES', $bread_previous);
$template->assign('CURRENT_PAGE_TITLE', $bread_array[$bread_count-1]);
}

Dans my_index.tpl (voir templates)

<!-- On remplace {$TITLE} par les deux nouveaux morceaux-->
<h2>{$PREVIOUS_PAGES_TITLES} {$CURRENT_PAGE_TITLE}</h2>

Et le bout de jQuery que j'ai mis dans my_footer.tpl

jQuery(document).ready(function(){
//Cacher la premiere partie du fil d'ariane
jQuery("#effect").animate({
    width: "60px",
    height: "16px",
  }, 10 );
});

// Hover
$(".titrePage").hover(
  function (e) {
    jQuery("#effect").animateAuto("width", 500);
  },
  function (e) {
    jQuery("#effect").animate({"width":"60px","height":"16px"}, 500); 
  }
);
// Fonction Size:Auto
jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"width":"auto"}).appendTo(el.parent());
        width = elem.css("width"),
        width = width;
        elem.remove();
       
        if(prop === "width")
            el.animate({"width":width}, speed, callback); 

    }); 
}

Voilà, si vous avez des questions n'hésitez pas. Le code n'est vraiment pas propre pour l'instant...

notph
2012-06-13 00:21:42

Pour l'instant on a toujours la même chose d'un point de vue utilisateur, ce n'est pas très "visuel" ;)

Je termine l'implémentation du code jQuery et je mettrai tout ça ici.

Gotcha
2012-06-13 00:17:25

Auriez-vous un exemple de ce que donne votre code ? Genre une capture d'écran "Avant" et un autre "Après" ? Je pense que ça peut intéresser du monde ce genre de chose ;-)

Merci.

notph
2012-06-12 22:17:30

Merci :)

Petit modif au code pour ajouter les balises SPAN dans le post précédent.
Un dernier bout de jQuery et c'est réglé!

Grâce à tes conseils ça m'a aussi permis de mieux cerner le fonctionnement de Piwigo ce qui sera surement très utile par la suite.

flop25
2012-06-12 22:11:56

Thumbs up !

notph
2012-06-12 22:08:08

Super tout marche impec:

add_event_handler('loc_end_page_header', 'notph1' );

function notph1 ()
{
global $template, $page, $conf;

$template_title = $page['title'];
$bread_array = explode($conf['level_separator'], $template_title);
$bread_array_c = $bread_array;
$bread_count = count($bread_array);
unset($bread_array_c[$bread_count-1]);
$bread_previous_part = implode($conf['level_separator'], $bread_array_c);
$bread_previous = "<span>".$bread_previous_part."</span>";

if (count($page['items']) > 0)
{
  $bread_array[$bread_count-1].= ' ['.count($page['items']).']';
}


$template->assign('PREVIOUS_PAGES_TITLES', $bread_previous);
$template->assign('CURRENT_PAGE_TITLE', $bread_array[$bread_count-1]);
}

C'est peut être un peu barbare de temps en temps (j'optimiserai à l'occasion) mais ça marche.
Me reste à ajouter une classe css au deux groupes et rajouter la couche jQuery et tout sera bon :)

Pied de page des forums

Propulsé par FluxBB

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