Bonjour,
Ce qui suit est destiné à Coppermine 1.3.xUn 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://forum.coppermine-gallery.net/index.php?action=dlattach;topic=14438.0;id=1099;image)
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 :
<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.:
"<img src=\"/" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">"
par ce code :
"<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 :
<img src=\
et tous les
TAG img ne contenant pas /images/spacer.gif ajoutez le code suivant :
id=\"thephoto_".$ri."\" onLoad=\"initImage('thephoto_".$ri."');\"
Then before every entry of it, you should place the string:
$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.
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 :
$template_thumbnail_view = <<<EOT
dans ce bloc, recherchez
{THUMB}
et remplacez par ce code
<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 :
#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 :
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 :
$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 :
$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