Hallo,
Heute möchte ich euch zeigen wie ihre einen Slider [Slideshow] für eure Webseite erstellen könnt.
1. Fügt den unten Stehenden Code in einen Text Editor eurer Wahl ein. [Der Text steht wirklich am Ende dieses Beitrags]
2. Nun nehmt euch den unteren Teil des Codes vor. Dieser beginnt so:
Zitat</script>
<div id="gallery">
Im vorgegebenen Code sind Platzhalter für 3 Bilder mit Überschrift, Beschreibung und Verlinkung. Falls du aber mehr Brauchst, kopier dies vor <div class="caption">
Zitat
</a><a href="http://Ziel Link vom Unteren bild bei Klick.de/">
<img title="" alt="Content 3" width="580" height="360" rel="<h3>Deine Ueberschrift</h3>Beschreibung" src="http://dein-bild.deutsch/" /> </a>............
Aber normalerweise sollten 3 ausreichen.
3. Bearbeitet nun die Platzhalter. Ersetzt http://Ziel Link vom Unteren bild bei Klick.de/ mit einen Link eurer Wahl. Das gilt aber nur für das Angezeigte Bild. Der Link kann z.b. zu einen Video führen während das Tumbnail angezeigt wird.
4. Nun kommen wir auch schon zu den angezeigten Bild. Die Maße sind "Normalerweise" Breite = 580 ; Höhe = 360. Diese könnt ihr aber auch ändern. Dazu einfach die "width" und "height" Werte entsprechend ändern.
5. Im Code findet man auch "Deine Ueberschrift", dort kommt (wie auch dieser Lückenfüller verratet.) die Überschrift hin. Dabei Lösche nicht die Zeichen, Buchstaben danach und davor. Dies gilt auch für die Beschreibung. So könnte dann das Ergebnis aussehen:
"<h3>NEUES COOLES VIDEO</h3>Super LP MINECRAFT PART ITS OVER NINETAUSEND. Schlechtes Englisch vor they fin."
6. Um euer Gewünschtes Bild benutzen zu können, ersetzt http://dein-bild.deutsch/ mit den Link zu euren Bild.
7. Diese Dinge könnt ihr nun auch bei den anderen 3 Platzhaltern beliebig Gestallten.
8. Sobald ihr Fertig seit geht es nun ans Testen. Der Obere Teil muss im Ganzen auf die Seite kopiert werden. Achtet bei einigen Baukasten, oder sonstigen das ihr erst in den Quellcode Modus wechselt. Folgender Bereich muss kopiert werden: Von <div class="clear"><style type="text/css"> bis </script>. Diesen könnt ihr dann auf die Seite kopieren. Optimal wäre am Anfang der Seite.
9. Der untere Bearbeitete Bereich könnt ihr an eine Stelle der Seite kopieren wo ihr den Slider gerne hin hättet. Dabei ist folgender Bereich gemeint: Von <div id="gallery">bis </div>. Falls es Probleme oder weitere Fragen gibt stehe ich dazu gerne Bereit. Da man mit HTML sehr viel Blödsinn anrichten kann gebe ich keine Garantie drauf das es funktioniert.
Code:
ZitatAlles anzeigen
<div class="clear"><style type="text/css">
<!--
.clear {clear:both;}
#gallery {position:relative; height: 360px; }
#gallery a {float:left; position:absolute; }
#gallery a img {border:none;}
#gallery a.show {z-index:500;}
#gallery .caption {
z-index: 600;
background-color: #000;
color: #fff;
height: 100px;
width: 100%;
position: absolute;
bottom: 0; }
#gallery .caption .content {margin:5px;}
#gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
--> </style><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script><script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Bilderwechsel Zeit 6000 = 6 sekunden
setInterval('gallery()',8000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
<div id="gallery">
<a class="show" href="http://Ziel Link vom Unteren bild bei Klick.de/">
<img title="" alt="Content 1" width="580" height="360" rel="<h3>Deine Ueberschrift</h3>Beschreibung" src="http://dein-bild.deutsch/" />
</a> <a href="http://Ziel Link vom Unteren bild bei Klick.de/">
<img title="" alt="Content 2" width="580" height="360" rel="<h3>Deine Ueberschrift</h3>Beschreibung" src="http://dein-bild.deutsch/" />
</a><a href="http://Ziel Link vom Unteren bild bei Klick.de/">
<img title="" alt="Content 3" width="580" height="360" rel="<h3>Deine Ueberschrift</h3>Beschreibung" src="http://dein-bild.deutsch/" /> </a>............
<div class="caption">
<div class="content"> </div>
</div>
Mögliches "erfolgreiches" Ergebnis:
https://dl.dropbox.com/u/82132350/ergebnis.png Fragt wenn es Probleme gibt. Hilfreich wäre es wenn ihr euren Bearbeiteten Code postet.
