[x] Navigation

[x] Languages

[x] Design
Each user can view the site with a different theme.
Themes marked with a * also change the forum look.

[x] Downloads (Top)

Slidebanner anstelle von nur einem Bild
Alle Fragen über die Entwicklung und Bearbeitung von Templates.(Design, Theme, css)
Neues Thema eröffnen    Neue Antwort erstellen    Druckversion     Foren-Übersicht ›  Templates und Design

Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
Janusz87
Investigator
Investigator

Offline Offline
Dabei seit: Apr 19, 2012
Beiträge: 11

BeitragVerfasst am: 20.07.2012 19:50
Titel: Slidebanner anstelle von nur einem Bild

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


Janusz87's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/././.
Nach oben
Benutzer-Profile anzeigen
Ertan
Webmaster
Webmaster

Offline Offline
Dabei seit: Mar 19, 2004
Beiträge: 1264
Wohnort: Germany
BeitragVerfasst am: 07.09.2012 14:27
Titel: Re: Slidebanner anstelle von nur einem Bild

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

_________________
.: USE THE FORCE :.
Helft mit ! Keine Unbeantworteten Beiträge mehr

Ertan's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Nach oben
Benutzer-Profile anzeigen E-Mail an diesen Benutzer senden Website dieses Benutzers besuchen Bildergalerie
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen    Neue Antwort erstellen    Druckversion    Foren-Übersicht ›  Templates und Design
Seite 1 von 1
Alle Zeitangaben sind in GMT + 1 Stunden



Gehe zu:  


Du kannst keine Beiträge schreiben.
Du kannst auf Beiträge nicht antworten.
Du kannst Deine Beiträge nicht bearbeiten.
Du kannst Deine Beiträge nicht löschen.
Du kannst an Umfragen nicht mitmachen.
Du kannst keine Dateien anhängen.
Du kannst keine Dateien herunterladen.




Interactive software released under GNU GPL, Code Credits, Privacy Policy