[MOD/HACK] FADER "onLoad": Fondu-Enchainé sur toutes les images

Pascal YAP · February 01, 2005, 11:16:32 PM

Bonjour,

Ce qui suit est destiné à Coppermine 1.3.x
Un Update pour la version 1.4.x est disponible

Les images de votre Galerie Coppermine s'ouvrent en "Fondu-Enchainé ".
Attention ce MOD est réservé aux "experts" de Coppermine, et à tous ceux qui n'ont pas peur de se plonger dans le code de plusieurs fichiers capitaux.
D'autre part, il est possible que l'application de ce MOD/HACK dans le code de Coppermine, affluence négativement vos Thèmes déjà installés. (vignettes invisibles par exemple)

Autre chose : ce MOD n'est pas compatible avec les effets spéciaux de M$ IE6.0 tel filter:progig id
Soyez très méfiant si votre galerie propose différents Thèmes. Il est fort probable que vous soyez obligé de modifier tous vos Thèmes au risque de ne plus voir les images s'afficher.
DONC UN MOD A MANIPULER AVEC CONSCIENCE, INFINIES PRECAUTIONS et EN CONNAISSANCE DE CAUSE !
LE THEME EST TRES "GRAPHIQUE" et JE VOUS INVITE VIVEMENT à L'INSTALLER EN LOCAL POUR LE CONSTATER

Exemple Galerie Coppermine perso de PYAP (désactivé)

Il s'agit d'inclure entre autre un Javascript dans TEMPLATE.HTML afin que les images de votre Galerie Coppermine s'ouvrent en "Fondu-Enchainé".

Les fichiers suivants seront édités, faites des copies de sauvegarde :
themes/votre-theme/TEMPLATE.HTML
themes/votre-theme/THEME.PHP
themes/votre-theme/STYLE.CSS
include/functions.inc.php
include/slideshow.inc.php
thumbnails.php
index.php

Il sera nécessaire de créer un fichier graphique GIF "En Cours de Chargement" (par exemple) (https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fforum.coppermine-gallery.net%2Findex.php%3Faction%3Ddlattach%3Btopic%3D14438.0%3Bid%3D1099%3Bimage&hash=fe5488235b3f32ac18c9bb1af8c0b10cb93b022d)

IMPORTANT : Ce MOD/HACK entraine le modification de fichiers qui entravera l'affichage des vignettes sur les autres Thèmes de votre Coppermine. Donc, soit vous n'utiliserez qu'un seul Thème, soit vous apppliquerez ce MOD sur tous vos Thèmes.

1/ Ouvrez le fichier themes/votre-theme/TEMPLATE.HTML, entre <HEAD> et </HEAD> placez le code suivant :

Code Select

<script type="text/javascript">
<!--
function IsOpera(){
   var agt=navigator.userAgent.toLowerCase();
   if (agt.indexOf('opera') ==-1) {   
      return false;
   }
   return true;
} 
if (!IsOpera())
	document.write("<style type='text/css'>.image {visibility:hidden;}</style>");

function initImage(id) {
	image = document.getElementById(id);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(id,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

// -->
</script>

NOTEZ qu'il est aussi possible de placer ce JavaScript dans un fichier .js extérieur : FADER_IMAGES.js par exemple.

2/ Ouvrez le fichier include/functions.inc.php
Avec votre éditeur de txt, recherchez et remplacez le code suivant sur toutes les entrées de ce type.:

Code Select

"<img src=\"/" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">"

par ce code :

Code Select

"<img src=\"/" . $pic_url . "\" id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">"

Toujours concernant la modification du code précédent, il peut s'avérer plus simple de rechercher le code suivant :

Code Select

<img src=\
et tous les TAG img ne contenant pas /images/spacer.gif ajoutez le code suivant :

Code Select

id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\"

Then before every entry of it, you should place the string:

Code Select

$ri = rand(0,10000);
Editez de la même manière que ci-dessus les fichiers displayimage.php et index.php

Insérez le code suivant dans les fichiers thumbnails.php, index.php et displayimage.php.
Il faut placer ce code après la ligne qui appelle la fonction pageheader.
Notez aussi que dans le fichier displayimage.php, la fonction pageheader est appellée deux fois ! Placer ce code après le deuxième appel de pageheader.

Code Select

echo <<<EOT
<script type="text/javascript">
<!--
function IsOpera(){
   var agt=navigator.userAgent.toLowerCase();
   if (agt.indexOf('opera') ==-1) {   
      return false;
   }
   return true;
} 
if (!IsOpera())
	document.write("<style type='text/css'>.image {visibility:hidden;}</style>");

// -->
</script>
EOT;

Recherchez dans VotreTheme/theme.php le code suivant :

Code Select

$template_thumbnail_view = <<<EOT
dans ce bloc, recherchez

Code Select

{THUMB}
et remplacez par ce code

Code Select

<div id='photoholder'>{THUMB}</div>

Afin de voir apparaître l'image "Chargement en Cours..." au chargement des images, il faut éditer le fichier VotreTheme/style.css et y insérer une nouvelle CLASS de la manière suivante :

Code Select

#photoholder {
  background:#49525D url('/themes/VotreTheme/images/chargement_en_cours.gif') 50% 50% no-repeat;
}

Notez qu'il est possible d'insérer ce code CSS dans le fichier TEMPLATE.HTML. Ce code CSS devenant ainsi accessible à tous vos Thèmes.

Ouvrez le fichier /include/slideshow.inc.php , et trouvez la fonction" runSlideShow() ", et mettez quelques lignes en commentaires comme ceci :

Code Select


function runSlideShow(){
//if (xIE4Up){
//  document.images.SlideShow.style.filter="blendTrans(duration=2)"
//     document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"
// document.images.SlideShow.filters.blendTrans.Apply()
//   }
        document.images.SlideShow.src = preLoad[j].src
// if (xIE4Up){
//    document.images.SlideShow.filters.blendTrans.Play()
// }

        pos = j

        j = j + 1
        if (j > (p-1)) j=0
        t = setTimeout('runSlideShow()', slideShowSpeed)
        preLoadPic(j)
}

Ouvrez displayimage.php trouvez la fonction slideshow(), et le bloc suivant :

Code Select

    $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
        '{IMAGE}' => '<img src="' . $start_img . '" name="SlideShow" class="image"  /><br />',
        '{ADMIN_MENU}' => '',
        );

Remplacez-le par le code suivant :

Code Select

    $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
        '{IMAGE}' => '<img src="' . $start_img . '" name="SlideShow" class="image" id="thephoto" onLoad="initImage(\'thephoto\');"  /><br />',
        '{ADMIN_MENU}' => '',
        );

Pascal

François Keller · February 02, 2005, 08:03:19 AM

Pascal,

Bel effet graphique,

Néanmoins je me pose une question, est ce que ce MOD ne ralentis pas sensiblement l'affichage des pages?
J'ai une connection ADSL en 1024 (Eh oui, chez moi ils l'ont installés

) et il me semble que l'affichage est devenu plus lent (à cause de l'effet de Fade-in bien entendu).
Pour des galeries avec beacoups d'images, ça risque d'être un peu dissuasif pour ceux qui comme toi se connectent en RTF (mais je ne veux pas être pessimiste

)

Pascal YAP · February 02, 2005, 09:51:39 AM

Frantz,

Tu viens de visiter ma galerie et tu me dis

Quoteest ce que ce MOD ne ralentis pas sensiblement l'affichage des pages?

Les vignettes ne s'affichent que lorsqu"elles sont chargées permettant aisni l'effet de fondu-enchainé.
Mais sur ma galerie ce qui ralentit le plus l'affichage, et dans dans proportions "catastrophiques" c'est le bandeau BASED on FilmStrip (FLASH)

Pour plaider en faveur de ce MOD, je dirais simplement que le Thème que j'emploi est lui aussi assez lourd. Donc ceci ++ plus celà... fait que le chargement peut être laborieux en fonction de l'heure de ta connexion

Ceci dit, le ralentissement n'est pas éliminatoire je pense !

Good Day
Bonnes Crêpes !

Pascal

Pascal YAP · February 13, 2005, 12:59:16 PM

Bonjour,

Après quelques semaines d'utilisation de ce MOD, je constate que l'image AmimatedGIF indiquant le chargement en cours ne s'anime pas ans 100% des cas.
Ainsi, inutile de placer une animation qui risquerait de vous décevoir :-/ Choisissez plutôt une image GIF indiquant "En Cours de Chargement".

Pascal

protox · February 15, 2005, 03:34:10 PM

j'ai testé ce mod et je suis tombé immédiatement amoureux ..
superbe effet qui donne un bon coup de punch à nos photos ...

seul hic : ne pas abuser de l'effet car on constate un gros ralentissement sur les vieilles machines ( < 1 ghz )

bravo pour ta "traduction"; je savais même pas qu'il y avait des français sur cte board

Pascal YAP · February 15, 2005, 03:44:39 PM

Bonjour Protox,

Quotej'ai testé ce mod et je suis tombé immédiatement amoureux ..

Tout le monde est dans le même état

Quoteseul hic : ne pas abuser de l'effet car on constate un gros ralentissement sur les vieilles machines

C'est vrai, c'est un peu restrictif visuellement de posséder une petite machine.
Je me soulage beaucoup en passant au millions de visiteurs qui eux sont riches de machines GigaTonik et qui de fait profitent pleinement de ces Fondu-Enchainés du plus pur effet !

Quotebravo pour ta "traduction"; je savais même pas qu'il y avait des français sur cte board

Merci beaucoup pour le sympathique post.
Mais au sujet des français, c'est pire que ça ! il y a aussi un nombre incalculable de Francophones, n'est-ce-pas ?

A bientôt
PYAP

Pascal YAP · February 15, 2005, 03:50:11 PM

Protox,

Après une petite visite de courtoisie sur votre site, on constate là encore la qualité de l'effet.
Vos images sont excellentes

PYAP

bibendum · February 20, 2005, 12:54:45 PM

J'ai visité votre galerie, tres belle photos en effet.

Pour l'effet de fondu, je l'ai eu que la premiere fois, maintenant, j'ai beau naviguer sur votre galerie, l'effet fondu a disparu.

Pascal YAP · February 20, 2005, 10:33:17 PM

Bonjour Bibendum,

QuoteJ'ai visité votre galerie, tres belle photos en effet.
Pour l'effet de fondu, je l'ai eu que la premiere fois, maintenant, j'ai beau naviguer sur votre galerie, l'effet fondu a disparu.

De quel Galerie parlez-vous ? Si vous faites allusion à la l'excellente Galerie de Protox je suis intégralement d'accord avec vous (-:

La petite image aminée qui ne s'anime pas parfois ? Ou bien l'effet de Fondu-Enchainé ? On ne m'a jamais signalé de cas similaire

PYAP

bibendum · February 21, 2005, 05:34:31 PM

Quote from: PYAP on February 20, 2005, 10:33:17 PM
Bonjour Bibendum,
QuoteJ'ai visité votre galerie, tres belle photos en effet.
Pour l'effet de fondu, je l'ai eu que la premiere fois, maintenant, j'ai beau naviguer sur votre galerie, l'effet fondu a disparu.
De quel Galerie parlez-vous ? Si vous faites allusion à la l'excellente Galerie de Protox je suis intégralement d'accord avec vous (-:

La petite image aminée qui ne s'anime pas parfois ? Ou bien l'effet de Fondu-Enchainé ? On ne m'a jamais signalé de cas similaire
PYAP

L'effet fondu enchainé.

J'utilise FireFox

Pascal YAP · February 21, 2005, 06:06:17 PM

Bonjour,

Vous utilisez Firefox et vous avez raison (-;
L'efet est meilleur sous FF que sous IE 6.x !!!! Je ne vois pas où peux se situer le problème. Je me connecte à l'instant sur ma Galerie, et tout fonctionne

Je me rassure ainsi !
Je suis également retourné chez Protox, toujour aussi nickel

PYAP

bibendum · February 24, 2005, 09:30:32 PM

Ben je ne comprends pas alors.

Quand je clic sur votre lien dans votre message, je vois bien les images qui s'affichent une par une en fondu.

Mais ensuite, quand je navigue sur votre site, plus aucuns fondus, dans aucuns des albums, nul part ailleurs je revois de fondu !!

bibendum · February 27, 2005, 03:02:10 PM

Alors pour info, sur votre site, je n'ai l'effet fondu que sur le filmstrip, tous vos albums s'affichent sans l'effet fondu.

Egalement pour la navigation à l'interieur de vos albums.

Sur quel theme avez installé le fondu ?

Pour ma part, j'utilise le script fondu dans mon fichier script, et non dans le template.html, ce qui permet d'avoir le fondu quelque soit le theme choisi.

Laurent

bibendum · February 27, 2005, 04:45:22 PM

J'ai un petit soucis quand meme !!!

Tous fonctionne bien sauf quand je regarde mes images en cliquant sur "derniers ajouts", "les mieux notés" et "les plus populaires", l'image s'affiche normallement rapidement puis en fondu !!!!

Une idée ?

Laurent

Pascal YAP · February 27, 2005, 05:00:23 PM

Bnjour bibendum, Laurent,

Quote", l'image s'affiche normallement rapidement puis en fondu

Quelle est l'url de votre sitre qe l'on voit ce qu'il ce passe de nos propres yeux !

QuoteAlors pour info, sur votre site, je n'ai l'effet fondu que sur le filmstrip, tous vos albums s'affichent sans l'effet fondu.
Egalement pour la navigation à l'interieur de vos albums.
Sur quel theme avez installé le fondu ?

Le Thèmes concerné par ce MOD/AHCK est Xtra-Z-Zone.
dont voici l'url exacte : http://expo.pays-dignois.com/thumbnails.php?album=topn&cat=0&theme=Xtra-Z-Zone
Si votre dernière visite sur le site a été faite avec un autre Thème, vous vous reloguez sur cette galerie avec ce dernier Thèmes !
Choisissez ce Thème avec le menu déroulant prévu à cet effet.

PYAP

bibendum · February 27, 2005, 05:13:16 PM

Salut

En fait, je viens de vider le cache et le soucis est present partout maintenant.

L'image se charge normallement, on la voit s'afficher de haut en bas, puis une fois l'image chargée, elle disparait et l'effet fondu fait son apparition !!!!!

Ma gallerie n'est pas encore en ligne, seulement en local pour le moment !!!!

bibendum · February 27, 2005, 05:14:37 PM

Je viens de verifier pour votre site, c'est pareil avec le theme changé.

François Keller · February 27, 2005, 08:15:07 PM

Bonsoir,

Quotel'image s'affiche normallement rapidement puis en fondu

Chez moi, le site de Pyap s'affiche tout a fait normalement avec l'éffet de fondu dans toutes les pages.

Pascal YAP · February 27, 2005, 08:45:01 PM

bibendum,

Et bien donc, il y a un bug sur mon site

Merci de le l'avoir signalé !

ps : fonctionne aussi avec Firefox 1.0

PYAP

bibendum · February 27, 2005, 10:27:33 PM

Quote from: Frantz on February 27, 2005, 08:15:07 PM
Bonsoir,
Quotel'image s'affiche normallement rapidement puis en fondu
Chez moi, le site de Pyap s'affiche tout a fait normalement avec l'éffet de fondu dans toutes les pages.

Pour le probleme de l'image s'affichant entierement puis en fondu, c'est sur ma galerie que ca se passe !!!!!

Je suis sous FireFox 1.0.

Je ne comprends pas pourquoi le site de PYAP ne fonctionne pas chez moi

News:

[MOD/HACK] FADER "onLoad": Fondu-Enchainé sur toutes les images