Dia-Show-Modul (javascript-basierend)

Peer
Beiträge: 309
Registriert: Fr 9. Sep 2005, 17:22
Kontaktdaten:

Beitrag von Peer » So 17. Dez 2006, 23:38

Hallo Leute,

hier der Code der funktioniert, dank emergence.

Input:

Code: Alles auswählen

//$query = "SELECT * FROM ".$cfg["tab"]["upl"];
$query = "SELECT * FROM con_upl where FILETYPE =\"JPG\" OR FILETYPE =\"GIF\" OR FILETYPE =\"PNG\" ORDER BY dirname, filename ASC";

$db->query($query);

while ($db->next_record()) {
//$bild replaces old $filename
$bild[$db->f("idupl")] = "".$db->f("dirname").$db->f("filename");
} // end while


echo "<table width=100%>
<tr><td>Bild 1: <select name=\"CMS_VAR[0]\">\n";
 echo("<option value=\"none\">Bild auswählen</option>");
 foreach ($bild as $key => $value) {
 if ("CMS_VALUE[0]" == $value) {
 echo "<option selected=\"selected\" value=\"". $cfgClient[1]["frontendpath"]["img"].$value ."\">". $value ."</option>";
 } else {
 echo "<option value=\"". $value ."\">". $value ."</option>";
 } // end if
 } // end foreach
 echo "</select></td></tr>";
 
 echo "<tr><td>Bild 2: <select name=\"CMS_VAR[1]\">\n";
 echo("<option value=\"none\">Bild auswählen</option>");
 foreach ($bild as $key => $value) {
 if ("CMS_VALUE[1]" == $value) {
 echo "<option selected=\"selected\" value=\"". $cfgClient[1]["frontendpath"]["img"].$value ."\">". $value ."</option>";
 } else {
 echo "<option value=\"". $value ."\">". $value ."</option>";
 } // end if
 } // end foreach
 echo "</select></td></tr>";
 
 echo "<tr><td>Bild 3: <select name=\"CMS_VAR[2]\">\n";
 echo("<option value=\"none\">Bild auswählen</option>");
 foreach ($bild as $key => $value) {
 if ("CMS_VALUE[2]" == $value) {
 echo "<option selected=\"selected\" value=\"". $cfgClient[1]["frontendpath"]["img"].$value ."\">". $value ."</option>";
 } else {
 echo "<option value=\"". $value ."\">". $value ."</option>";
 } // end if
 } // end foreach
 echo "</select></td></tr>";
 
 echo "<tr><td>Bild 4: <select name=\"CMS_VAR[3]\">\n";
 echo("<option value=\"none\">Bild auswählen</option>");
 foreach ($bild as $key => $value) {
 if ("CMS_VALUE[3]" == $value) {
 echo "<option selected=\"selected\" value=\"". $cfgClient[1]["frontendpath"]["img"].$value ."\">". $value ."</option>";
 } else {
 echo "<option value=\"". $value ."\">". $value ."</option>";
 } // end if
 } // end foreach
 echo "</select></td></tr>";
 
 echo "<tr><td>Bild 5: <select name=\"CMS_VAR[4]\">\n";
 echo("<option value=\"none\">Bild auswählen</option>");
 foreach ($bild as $key => $value) {
 if ("CMS_VALUE[4]" == $value) {
 echo "<option selected=\"selected\" value=\"". $cfgClient[1]["frontendpath"]["img"].$value ."\">". $value ."</option>";
 } else {
 echo "<option value=\"". $value ."\">". $value ."</option>";
 } // end if
 } // end foreach
 echo "</select></td></tr>";
 
 echo "<tr><td>Bild 6: <select name=\"CMS_VAR[5]\">\n";
 echo("<option value=\"none\">Bild auswählen</option>");
 foreach ($bild as $key => $value) {
 if ("CMS_VALUE[5]" == $value) {
 echo "<option selected=\"selected\" value=\"". $cfgClient[1]["frontendpath"]["img"].$value ."\">". $value ."</option>";
 } else {
 echo "<option value=\"". $value ."\">". $value ."</option>";
 } // end if
 } // end foreach
 echo "</select></td></tr>";

 

// <tr><td>Dateipfad mit Endung: </td><td><input type=text size=20 name=\"CMS_VAR[5]\" value=\"CMS_VALUE[5]\"></td></tr>

echo "
<tr><td>Breite (ohne 'px'):</td>
<td><input type=text size=20 name=\"CMS_VAR[7]\" value=\"CMS_VALUE[7]\"></td></tr>
<tr><td>Höhe (ohne 'px'):</td>
<td><input type=text size=20 name=\"CMS_VAR[8]\" value=\"CMS_VALUE[8]\"></td></tr>
<tr><td>Hintergrundfarbe (z.B. #FFFFFF): </td>
<td><input type=text size=20 name=\"CMS_VAR[9]\" value=\"CMS_VALUE[9]\"></td></tr>
<tr><td>Random (nein=leer lassen, ja=R): </td>
<td><input type=text size=20 name=\"CMS_VAR[10]\" value=\"CMS_VALUE[10]\"></td></tr>
<tr><td>Übergangszeit (z.B. 1000 für 1000 ms): </td>
<td><input type=text size=20 name=\"CMS_VAR[11]\" value=\"CMS_VALUE[11]\"></td></tr>
</table>

";
Output:

Code: Alles auswählen

<script type="text/javascript">

 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["upload/CMS_VALUE[0]", "", ""]
fadeimages[1]=["upload/CMS_VALUE[1]", "", ""]
fadeimages[2]=["upload/CMS_VALUE[2]", "", ""]
fadeimages[3]=["upload/CMS_VALUE[3]", "", ""]
fadeimages[4]=["upload/CMS_VALUE[4]", "", ""]
fadeimages[5]=["upload/CMS_VALUE[5]", "", ""]
 

 
var fadebgcolor="white"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, CMS_VALUE[7], CMS_VALUE[8], 0, CMS_VALUE[11], 1, "CMS_VALUE[8]")
 
</script>

Dodger77
Beiträge: 3626
Registriert: Di 12. Okt 2004, 20:00
Wohnort: Voerde (Niederrhein)
Kontaktdaten:

Beitrag von Dodger77 » Do 1. Feb 2007, 12:05

Hier eine kleine Änderung, die das Modul auch mit anderen Datenbankprefixen als "con" zusammenarbeiten lässt:

http://www.contenido.org/forum/viewtopi ... 5585#95585

qotsa
Beiträge: 29
Registriert: Di 6. Jun 2006, 09:09
Kontaktdaten:

Beitrag von qotsa » Mo 12. Feb 2007, 14:13

Hallo,

In welchem Verzeichnis müssen die Bilder liegen, damit ich sie auswählen kann? Bei mir steht da nur "Bild auswählen".

EDIT: Sorry, ich hatte ganz vergessen, dass mein Tabellenpräfix nicht "con" ist. Jetzt funzt es!

dormor
Beiträge: 10
Registriert: Mi 22. Aug 2007, 10:01
Kontaktdaten:

Beitrag von dormor » Fr 25. Jan 2008, 11:08

Hallo,

die slide-show läuft bei mir auf Explorer und Firefox einwandfrei. Nur auf Safari ist nichts zu sehen.
Hat jemand eine Idee? Liegt es an dem Code oder an einer Safari-Einstellung?

Gruß,
d.

dormor
Beiträge: 10
Registriert: Mi 22. Aug 2007, 10:01
Kontaktdaten:

Beitrag von dormor » Mi 30. Jan 2008, 12:51

Hallo nochmals,

also in safari sollten die Einstellungen stimmen (Javascript aktiviert). Hab auch schon in anderen Foren geschaut, da wurde empfohlen

new Image()

durch

document.createElement("img")

zu ersetzen, hat aber nichts gebracht.

wie gesagt bei safari ist in der Fläche in der die Slideshow laufen sollte nichts zu sehen, d.h. da wo sonst die slideshow ist, ist nun eine Fläche in der Hintergrundfarbe.

Hat keiner ne idee?

Vielen Dank und Gruß,
d.

dormor
Beiträge: 10
Registriert: Mi 22. Aug 2007, 10:01
Kontaktdaten:

Beitrag von dormor » Fr 1. Feb 2008, 12:03

Hallo nochmals,

Problem gelöst. Für alle die es interessiert:

else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100

durch:

else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100

ersetzen.

Gruß,
d.

Gesperrt