Piwigo.org

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.

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. " / </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)

<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...

Dernière modification par notph (2012-06-13 11:00:43)

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 ;-)

flop25 · 2012-06-13 11:08:39

http://www.comparenetworks.com/develope … crumb.html !!!

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?

Dernière modification par notph (2012-06-13 11:26:49)

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.

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)

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 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 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

flop25 · 2012-06-13 16:49:48

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

Piwigo.org

Annonce

#16 2012-06-13 00:21:42

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

#17 2012-06-13 10:58:14

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

#18 2012-06-13 11:06:55

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

#19 2012-06-13 11:08:39

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

#20 2012-06-13 11:19:25

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

#21 2012-06-13 11:36:30

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

notph a écrit:

#22 2012-06-13 12:51:35

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

#23 2012-06-13 14:33:42

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

ddtddt a écrit:

#24 2012-06-13 16:38:52

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

flop25 a écrit:

#25 2012-06-13 16:42:51

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

ddtddt a écrit:

flop25 a écrit:

#26 2012-06-13 16:49:48

Re: [Résolu] Où se trouve la fonction qui génère le fil d'ariane?

Pied de page des forums