[MooShow] Mise au point et test du snippet

826 Posts

marc Reply #21, 20 years ago

@Heliotrope :
Dans le fichier mooshow.1.04.js, tu peux remplacer l’instruction ’onClick’ par les instructions ’onMouseOver’ et ’onMouseOut’ à la ligne 65, ce qui donne :

		'		<a href=\'#'+shownumber+'\' ><img src=\'assets/snippets/mooshow/images/info.gif\' id=\''+showName+'_IPTCbutton\' class=\'mooshow_IPTCbutton\' onMouseOver=\'mooShows[&#39;'+showName+'&#39;].updateIPTCinfoToggle();\' onMouseOut=\'mooShows[&#39;'+showName+'&#39;].updateIPTCinfoToggle();\' /></a> \n'+

Inutile de cliquer sur l’icône Information, le passage de la souris suffit pour ouvrir cette mini fenêtre.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

826 Posts

marc Reply #22, 20 years ago

Quote from: Perrine at Sep 17, 2006, 07:12 AM

En fait, je pensais utiliser le script php qui construit le tableau js pour construire la galerie en html, que j’insère ensuite dans le noscript.

Ca te semble jouable ?

De toute façon, pour le noscript, il faut bien sûr ne pas utiliser moo car on a pas accès au js

Tu réponds toi même à ta question.
Si JS est désactivé il ne peux pas générer le tableau pour afficher les images de la galerie.
Donc seul façon d’y parvenir est de changer le code php pourqu’il insére du code HTML avec une classe ’noscript’ qui sera affiché unquement lorsque JS est désactivé.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

1,842 Posts

Perrine Reply #23, 20 years ago

Oui oui, c’est ce que je voulais faire... j’ai du mal m’exprimer : utiliser le script php qui permet de construire le tableau js pour au contraire construire le code html

Ce n’est pas js qui construit le tableau newArray, mais un code php... donc j’imagineais le mettre dans un snippet.

Je teste ça dès demain

Edit : comme on dit "la nuit porte conseil" et j’ai enfin compris là où je confusionne. Le tuto d’alsa utilise js donc je ne peux en effet pas l’utiliser dans ma galerie noscript. En revanche, je compte utiliser les css d’Eric Meyer, à la manière dont tu as construit ta galerie Marc wink

1,842 Posts

Perrine Reply #24, 20 years ago

Helio, j’ai corrigé le fadespeed en fadeSpeed mais la 2ème image ne s’affiche toujours pas. Pourtant, j’ai bien supprimé le base dans le <head>.

J’ai les mêmes symptomes que Marc : le div se redimensionne mais l’image ne s’affiche pas.

PS : Dans le snippet, la class fadesleep était utilisé au lieu de fadeSpeed. Il fallait bien remplacer le l par p ainsi que le s par S, c’est bon ?

2,542 Posts

heliotrope Reply #25, 20 years ago

Salut perrine,

$mooshow->galleryParams = array(	
//case sensitive
						'id' => $mooshow->galleryName,
						'class'=>$class,
						'speed' => $speed,
						'fadeSpeed' => $fadesleep,
						'topNav'=>$topNav,
						'overlayNav'=>$overlayNav,
						'dropShadow'=>$dropShadow,
						'captions'=>$captions,
						'border'=>$border,
						'copyright'=>$copyright,
						'IPTCinfo'=>$IPTCinfo						
						);

et dans le chunk


<div id="[+id+]" class="[+class+]">
[+speed+]
[+fadeSpeed+]
[+topNav+]
[+overlayNav+]
[+dropShadow+]
[+captions+]
[+border+]
[+copyright+]
[+IPTCinfo+]
</div>


Verifie la sortie produite dans la page html il ne doit manquer aucun param
dans <div> this.param ....

J’ai pas mal modifié le code le class entre temps pour obtenir ce que tu demandais mais elle n’est pas finie

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

826 Posts

marc Reply #26, 20 years ago

La galerie que j’utilise provient du forum d’Alsacréation où j’ai trouvé les sources avec l’exemple de la galerie qui y est attachée.
Ce code, je l’ai ensuite adapté en fonction de mes besoins. Il utilise également du JS. Rien à voir avec Eric MEYER qui lui utilise un code pur CSS avec l’utilisation des propriétés a.hover, a.focus...

L’intégration de la galerie d’Eric MEYER dans le snippet nécessite non seulement de générer du code HTML dans le document (qui ne pose pas de pb en soi), mais de générer également du code CSS dans la feuille de style pour modifier les propriétés a.hover, etc. (plus difficile). Seul façon de s’en sortir est d’insérer dans le document des instructions CSS entre les balises <style> mais dans ce cas ce code devient prioritaire par rapport à la feuille de style. Pas facile... wink

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

826 Posts

marc Reply #27, 20 years ago

@ helio
Es-tu sur de cette ligne ? :

'fadeSpeed' => $fadesleep,

Pour moi, c’est plutôt :

'fadeSpeed' => $fadeSpeed,

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

2,542 Posts

heliotrope Reply #28, 20 years ago

Voila le bout de code en entier modifié

//dans le snippet
//mooshow specific params
$class = isset($class) ? $class : 'mooshow' ;
$speed = (isset($speed) && is_numeric($speed)) ? $speed : 300 ;
$fadeSpeed = (isset($fadeSpeed) && is_numeric($fadeSpeed)) ? $fadeSpeed : 500 ;//corrige fadesleep
$topNav = isset($topNav) ? $topNav : 'yes' ;
$overlayNav = isset($overlayNav) ? $overlayNav : 'yes' ;
$dropShadow = isset($dropShadow) ? $dropShadow : 'yes' ;
$captions = isset($captions) ? $captions : 'yes' ;
$border = (isset($border) && is_numeric($border)) ? $border : 10 ;
$copyright = isset($copyright) ? $copyright : 'yes' ;
$IPTCinfo = isset($IPTCinfo) ? $IPTCinfo : 'yes' ;

$mooshow->galleryParams = array(	
//case sensitive
						'id' => $mooshow->galleryName,
						'class'=>$class,
						'speed' => $speed,
						'fadeSpeed' => $fadesleep,
						'topNav'=>$topNav,
						'overlayNav'=>$overlayNav,
						'dropShadow'=>$dropShadow,
						'captions'=>$captions,
						'border'=>$border,
						'copyright'=>$copyright,
						'IPTCinfo'=>$IPTCinfo						
						);

et dans le chunk => [+fadeSpeed+]

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

2,542 Posts

heliotrope Reply #29, 20 years ago

Pour éviter de farfouiller dans le code

Voici la version sur laquelle je travaille:
elle fonctionne mais si QE est actif vous ne verrez rien (conflit prototype)
pour l’instant je n’arrive pas à récupérer la session pour afficher un tableau recap des fichiers si on est loggué

Installation:
Copier dans assets/snippets le dossier mooshow
Creer un chunk "mooGallery":

<div id="[+id+]" class="[+class+]">
[+speed+]
[+fadeSpeed+]
[+topNav+]
[+overlayNav+]
[+dropShadow+]
[+captions+]
[+border+]
[+copyright+]
[+IPTCinfo+]
</div>


Creer un snippet mooShowGallery, copier le contenu de snippet.mooshow.php

EX Appel du snippet

[[mooShowGallery? &pathToImg=`nom_repertoire` ]]
nom_repertoire est calcule à partir de assets/images/ (vs pouvez changer ces parametres

:-)

EDIT: je viens de mettre à jour la piece jointe suite à l’oubli d’une typo dans le code du snippet.

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

1,842 Posts

Perrine Reply #30, 20 years ago

Cette nouvelle version fonctionne nickel... sauf le souci du QE mais bon, disons que c’est pas gênant sauf lorsque l’on développe le site bien sûr wink

Quote from: heliotrope at Sep 18, 2006, 03:08 AM

J’ai pas mal modifié le code le class entre temps pour obtenir ce que tu demandais mais elle n’est pas finie

Tu travailles sur l’alternative au js ? Laisse-moi t’aider ! Je me sens comme un parasite sur ce coup lol, j’aime pas qu’on bosse à ma place wink

De toute façon, je commence à regarder de mon côté et on pourra toujours confronter nos méthodes.