<?php
class PHPDiapo {
var $relPath;
var $images;
var $id;
var $className;
var $transition_time=3;
var $transition_pause;
function PHPDiapo ($path,$id,$className="",$timeout=3, $attrs=array()) {
$this->attrs = $attrs;
$this->relPath = $path;
$this->id = $id;
$this->className = $className;
if ($timeout) $this->transition_pause = $timeout;
$this->init();
$this->write();
}
function init() {
$this->images=array();
$dir = $_SERVER["PATH_TRANSLATED"];
$dir = substr($dir,0,strrpos($dir,"/")+1);
$dir .= $this->relPath;
$hdl = opendir($dir);
while (false !== ($file = readdir($hdl))) {
if($file!="." && $file!="..") {
// check file extension
$pattern = '/\.(gif|png|jpg|jpeg)$/i';
if (!preg_match($pattern, $file, $matches)) continue;
if(is_file($dir."/".$file))
$this->images[]="$this->relPath/$file";
}
}
}
function write() {
$this->write_func();
$first=$this->images[0];
$this->write_JS_init();
echo $this->img($first,$id=$this->id,$className=$this->className);
$this->write_JS_launch();
}
function write_JS_init() {
echo "images['".$this->id."']=new Array();\r";
for ($i=0;$i<sizeof($this->images);$i++) {
echo "images['".$this->id."'][$i]=new Image();\r";
echo "images['".$this->id."'][$i].src=\"http://doubsoccase.free.fr/ebay/".$this->images[$i]."\";\r";
echo "images['".$this->id."'][$i].alt=\"".$this->get_alt($this->images[$i])."\";\r";
}
echo "</script>\r\r";
}
function write_func(){
echo "\r<script type=\"text/javascript\">\r";
static $already_write = false;
if ($already_write) {
}
else {
echo "
var FRAME_PER_SEC = 20;
function set_opacity(el, op) {
el.style.opacity = op;
el.style.MozOpacity = op;
el.style.KhtmlOpacity = op;
el.style.filter = 'alpha(opacity=' + op*100 + ')';
el.opacity = op;
}
function fade_in(imageId) {
var img = document.getElementById(imageId);
var incr = 1/((img.transition_time/3)*FRAME_PER_SEC);
var newOp = img.opacity+incr;
newOp = (newOp > 1) ? 1.0 : newOp;
set_opacity(img, newOp);
if (newOp < 1) setTimeout('fade_in(\"'+imageId+'\")',1000/FRAME_PER_SEC);
}
var images = new Array();
function run_diapo(diapoId) {
obj = document.getElementById(diapoId);
obj.src = images[diapoId][obj.index].src;
obj.alt = images[diapoId][obj.index].alt;
obj.title = images[diapoId][obj.index].alt;
obj.opacity = 0.0;
fade_in(diapoId);
obj.index+=1;
if (obj.index >= obj.length_diapo) obj.index=0;
obj.timeout = setTimeout('run_diapo(\"'+diapoId+'\")', obj.transition_pause * 1000);
}\r";
$already_write = true;
}
}
function write_JS_launch() {
$diapoID=$this->id;
echo "\r<script type=\"text/javascript\">\r";
echo "obj = document.getElementById('".$diapoID."');\r";
echo "obj.transition_time=".$this->transition_time.";\r";
echo "obj.transition_pause=".$this->transition_pause.";\r";
echo "obj.index=0;\r";
echo "obj.length_diapo=images['".$diapoID."'].length;\r";
echo "obj.timeout;\r";
echo "if (obj.length_diapo > 0) run_diapo('".$diapoID."');\r";
echo "</script>\r\r";
}
function get_alt($src) {
# strip path
$txt=substr($src,strrpos($src,"/")+1);
# strip extension
$txt=substr($txt,0,strrpos($txt,"."));
# strip special chars
$tostrip=array("_",",","-");
for ($i=0;$i<sizeof($tostrip);$i++) $txt=str_replace($tostrip[$i]," ",$txt);
return $txt;
}
function img($src,$id="",$class="") {
$has_link = false;
$alt=$this->get_alt($src);
$img = "<img id='$id' name='$id' class='$class' alt='$alt' title='$alt' src='$src'";
foreach($this->attrs as $key=>$value)
{
if ($key=="href" && !$has_link) {
$has_link = true;
$img = "<a href=$value>$img";
}
else {
$img .= " $key='$value' ";
}
}
$img .= "/>\r";
if ($has_link) $img .= "</a>";
return $img;
}
}
?>la communauté d'entraide francophone dédiée au PHP
Besoin d'aide pour modif code diapo
casdale
Invité n'ayant pas de compte PHPfrance
Bonjour, je viens vous voir parce que je suis pas trop doué en javascript. J'aimerais un peu d'aide pour modifié mon code. Mon diapo marche très bien mais j'aimerais qu'il change les images avec un flou et non en slide comme c est actuellement le cas. pouvez vous m'aidez :
Casdale
Invité n'ayant pas de compte PHPfrance
Si cela peux vous aidé j'ai un autre diapo qui fonctionne en flou mais j'arrive pas a modifié mon premier pour avoir le même effet voici le code du diapo flou. Et je souhaitai utilise ma première version de code.
// Diaporama
// Version : 6.04.03
//
// http://so.fun.free.fr
if (monDiaporama == null)
{
var monDiaporama = new Array();
}
function Diaporama(id_diaporama, frequenceH, vitesseH, delai, largeurMax, hauteurMax, typeTransition)
{
this.id_diaporama = id_diaporama;
this.diapo = new Array();
this.calque1 = "";
this.calque2 = "";
this.frequenceH = frequenceH;
this.vitesseH = vitesseH;
this.delai = delai; // délai entre chaque rotations
this.largeurMax = largeurMax;
this.hauteurMax = hauteurMax;
this.indexDiapo = 2;
this.masquePanneauCommande = true;
this.epaisseurCadre = 0;
this.couleurCadre = "#000000";
if (!typeTransition) // slide ou flou
{
this.typeTransition = "slide";
}
else
{
this.typeTransition = "flou";
}
this.stats = new Image();
this.stats.src = "http://so.fun.free.fr/modules/stats/image_bidon.php?script=diaporama&version=6.04.03";
}
function ajoutePhoto(url_photo)
{
nb_diapo = this.diapo.length;
this.diapo[nb_diapo] = new Image();
this.diapo[nb_diapo].src = url_photo;
}
function progressionChangeDiapoH()
{
if (this.calque1.offsetWidth > 0)
{
if ( (this.calque1.offsetWidth - this.vitesseH) < 0)
{
this.calque1.style.width = "0px";
}
else
{
this.calque1.style.width = (this.calque1.offsetWidth - this.vitesseH) + "px";
}
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.frequenceH);
}
else
{ // inversion des calques
this.calque1.style.zIndex = 1; // le calque écrasé passe au dessous
this.calque2.style.zIndex = 2; // le calque visible passe au dessus
this.calque1.style.width = this.largeurMax + "px"; // le calque du dessous reprends sa taille initiale
// Mise en place d'une nouvelle image dans le calque qui se trouve en arrière
this.calque1.style.backgroundImage = "url('" + this.diapo[this.indexDiapo].src + "')";
this.indexDiapo++;
if (this.indexDiapo >= this.diapo.length) this.indexDiapo = 0;
//inversion des références des calques car seul calque1 rétrécit
calqueTemp = this.calque2;
this.calque2 = this.calque1;
this.calque1 = calqueTemp;
if ( !(document.getElementById('cb_defilement_' + this.id_diaporama)) || document.getElementById('cb_defilement_' + this.id_diaporama).checked )
{
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.delai);
}
else
{
setTimeout("monDiaporama[" + this.id_diaporama + "].pause()", this.delai);
}
}
}
function progressionChangeDiapoFlou()
{
this.vitesse = this.vitesseH;
this.frequence = this.frequenceH;
if (this.calque1.style.opacity > 0)
{// disparition de l'image du dessus
// pour Firefox (le paramètre existe sous IE mais n'a pas d'influence)
// ce paramètre sert de base commune pour les deux navigateurs pour tester l'état du calque
opacite = parseFloat(this.calque1.style.opacity) - parseFloat(this.vitesse / 100);
if (opacite < 0)
{
opacite=0;
}
this.calque1.style.opacity = opacite
// pour IE
if (this.calque1.style.filter)
{
texte = this.calque1.style.filter;
opacite = texte.replace(/alpha\(opacity=([0-9]*)\)/, '$1');
opacite = parseFloat(opacite) - this.vitesse;
if (opacite < 0)
{
opacite=0;
}
//nouveau_texte = texte.replace(/alpha\(opacity=([0-9]*)\)/, 'alpha(opacity=' + opacite + ')');
nouveau_texte = 'alpha(opacity=' + opacite + ')';
this.calque1.style.filter = nouveau_texte;
}
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.frequence);
}
else
{ // inversion des calques
this.calque1.style.zIndex = 1; // le calque écrasé passe au dessous
this.calque2.style.zIndex = 2; // le calque visible passe au dessus
this.calque1.style.opacity = 1; // le calque du dessous reprends sa taille initiale
if (this.calque1.style.filter)
{
this.calque1.style.filter = 'alpha(opacity=100)';
}
// Mise en place d'une nouvelle image dans le calque qui se trouve en arrière
this.calque1.style.backgroundImage = "url('" + this.diapo[this.indexDiapo].src + "')";
this.indexDiapo++;
if (this.indexDiapo >= this.diapo.length) this.indexDiapo = 0;
//inversion des références des calques car seul calque1 rétrécit
calqueTemp = this.calque2;
this.calque2 = this.calque1;
this.calque1 = calqueTemp;
if ( !(document.getElementById('cb_defilement_' + this.id_diaporama)) || document.getElementById('cb_defilement_' + this.id_diaporama).checked )
{
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.delai);
}
else
{
setTimeout("monDiaporama[" + this.id_diaporama + "].pause()", this.delai);
}
}
}
function pause()
{
if ( !(document.getElementById('cb_defilement_' + this.id_diaporama)) || document.getElementById('cb_defilement_' + this.id_diaporama).checked )
{
if (this.typeTransition == "slide")
{
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.delai);
}
else if (this.typeTransition == "flou")
{
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.delai);
}
}
else
{
setTimeout("monDiaporama[" + this.id_diaporama + "].pause()", 1000);
}
}
function placeDiaporama()
{
document.write('<table align="center" border="' + this.epaisseurCadre + '" bordercolor="' + this.couleurCadre + '" cellpadding="0" cellspacing="0" style="border-style:solid; border-width:' + this.epaisseurCadre + '"><tr><td valign="top">'); // début du tableau pour le cadre
document.write('<table align="center" border="0" cellpadding="0" cellspacing="0">');
document.write('<tr height="' + this.hauteurMax + '">');
document.write('<td width="' + this.largeurMax + '" valign="top" align="left" style="width:' + this.largeurMax + '">');
document.write('<img src="' + this.diapo[0].src + '" width="' + this.largeurMax + '" height="0" border="0" style="visibility:hidden; border:0; width:' + this.largeurMax + '; height:0"><div></div>'); // je réutilise une des images à la place d'un pixel transparent
document.write('<div id="div_diapo2_' + this.id_diaporama + '" style="position:absolute; display:block; width:' + this.largeurMax + '; height:' + this.hauteurMax + '; overflow:hidden; background-image:url(\'' + this.diapo[1].src + '\'); opacity:1; filter: alpha(opacity=100)"><table align="left" border="0" cellpadding="0" cellspacing="0"><tr height="' + this.hauteurMax + '"><td width="' + this.largeurMax + '"></td></tr></table></div>');
document.write('<div id="div_diapo1_' + this.id_diaporama + '" style="position:absolute; display:block; width:' + this.largeurMax + '; height:' + this.hauteurMax + '; overflow:hidden; background-image:url(\'' + this.diapo[0].src + '\'); opacity:1; filter: alpha(opacity=100)"><table align="left" border="0" cellpadding="0" cellspacing="0"><tr height="' + this.hauteurMax + '"><td width="' + this.largeurMax + '"></td></tr></table></div>');
document.write('</td></tr><tr><td width="' + this.largeurMax + '"><center><i><div id="div_chargement_' + this.id_diaporama + '" height="20" class="diaporama_cmd"></div></i></center></td></tr></table>');
document.write('</td></tr></table>'); // fin du tableau pour le cadre
this.calque1 = document.getElementById('div_diapo1_' + this.id_diaporama);
this.calque2 = document.getElementById('div_diapo2_' + this.id_diaporama);
this.calque1.style.height = this.hauteurMax;
this.calque2.style.height = this.hauteurMax;
this.calque1.style.width = this.largeurMax;
this.calque2.style.width = this.largeurMax;
this.calque1.style.zIndex = 2; // dessus
this.calque2.style.zIndex = 1; // dessous
}
function testImagesOk()
{
this.nbImagesOk = 0;
// boucle pour compter le nombre d'images chargées
nbImagesOk = 0;
for (i=0; i<this.diapo.length;i++)
{
if (this.diapo[i].complete) nbImagesOk++;
}
//document.getElementById('div_chargement_' + this.id_diaporama).innerHTML = "Images chargées : " + nbImagesOk + "/" + this.diapo.length;
if ( nbImagesOk >= this.diapo.length)
{
if (this.masquePanneauCommande)
{
panneauCommande = '';
}
else
{
panneauCommande = '<input id="cb_defilement_' + this.id_diaporama + '" type="checkbox" CHECKED>automatique';
}
document.getElementById('div_chargement_' + this.id_diaporama).innerHTML = panneauCommande;
if (this.typeTransition == "slide")
{
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.delai);
}
else if (this.typeTransition == "flou")
{
setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.delai);
}
}
else
{
setTimeout("monDiaporama[" + this.id_diaporama + "].testImagesOk()", 1000);
}
}
function masquerPanneauCommande()
{
this.masquePanneauCommande = true;
}
function ajouteCadre(epaisseur, couleur)
{
this.epaisseurCadre = epaisseur;
this.couleurCadre = couleur;
}
// liaison des fonctions à l'objet
Diaporama.prototype.ajoutePhoto = ajoutePhoto;
Diaporama.prototype.progressionChangeDiapoH = progressionChangeDiapoH;
Diaporama.prototype.progressionChangeDiapoFlou = progressionChangeDiapoFlou;
Diaporama.prototype.pause = pause;
Diaporama.prototype.placeDiaporama = placeDiaporama;
Diaporama.prototype.testImagesOk = testImagesOk;
Diaporama.prototype.masquerPanneauCommande = masquerPanneauCommande;
Diaporama.prototype.ajouteCadre = ajouteCadre;