Dragonfly CMS - German Community

Janusz87 · Investigator Offline Joined: Apr 19, 2012 Posts: 11

Hallo Gemeinde,

ich habe folgendes Problem:

Ich hab auf der Forumsseite oben ein PotD : Pic of the Day
Darüber habe ich einen Text, darunter zwei Links und alles in einem Container hier ist der Code dazu:

<center>Null Poster werden gelöscht! User ohne Vorstellung werden spätestens nach 1 Monat wieder gelöscht.
</center><p></p><center>
<a href="http://www.uscartreffen.de/viewtopic.php?f=163&t=1910&sid=d8052a7af7c099d23eaf4e47493927ba"><img src="http://www.dr-mustang.com/modules/coppermine/albums/pic_of_the_day_3/201003/dr_2750.jpg"></a>
</center>
<p></p>
<marquee behavior="scroll" direction="left" scrollamount="4" scrolldelay="0">
<a href="http://www.uscartreffen.de/viewforum.php?f=163&sid=8c8272620b88a409b59ef820aa12c517"> :convertible: 9.US Car Treffen am CentrO Oberhausen 21./22.7.2012 :wave: </a>
</marquee><p></p>

<p></p>
<center>[url=LINK(nur als Beispiel)[/url]
</center>
<p></p>
<center>[url=LINK(nur als Beispiel)[/url]
</center>
<p></p>

Ich möchte nun anstelle von einem Bild ein Slidebanner haben, jedoch zerschießt mir mein erstellter Code mit Java Script die Seite, kann mir jemand von euch helfen ?

Hier der Code den ich anstelle vom Bild eingefügt habe:

<style>
body{
background-color:black;
padding:0;
margin:0;
with:320;
height:480;

}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration: 3s;
position:absolute;
width: 320px;
height:auto;
}
img.fade-out{opacity:0}
img.fade-in{opacity:1}
</style>
<body>
<img src="images/image01.jpg"/>
<img src="images/image02.jpg"/>
<img src="images/image03.jpg"/>
<img src="images/image04.jpg"/>
<script>
var interval = 4 * 20; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 100);
};
fade();
</script>
</body>

Leider wie gesagt, wird mir der Slidebanner nicht angezeigt, genauso wie die restlichen Bilder riesig werden.

Kann mir jemand helfen ? Oder kennt jemand ein Modul oder ähnliches welches ich als Slidebanner nutzen kann ?

Gruß,
Jan

Ertan

javascript immer in head
und es nutzt

Array:

var images = document.getElementsByTagName("img");

img --> zu allgemein - betrifft dann alle images

bau doch ein jquery slide banner ein

anleitungen gibt es im netz genug

z.b slidesjs.com/ oder google