Slider-Effekt im Baukasten
Ein Tutorial im Auftrag und im Namen von Daniel ( http://omba.de.tl )
Viele Homepage-Baukasten User fragen sich, wie man einen eigenen Slider in seine Homepage einbinden kann. Hier findet Ihr ein Tutorial für einen Slider.
Schritt 1: HTML-Code für den Seiteninhalt
- ein Beispiel für 3 Bilder im Slider
- die Breite bei width: 580px; an Euren Seiteninhalt anpassen !
- die Höhe bei height: 360px, anpassen an die Höhe des Bildes (oder die Bilder in gewählter Höhe passend erstellen)
- auf "Seiten" im Hauptmenü klicken
- Seite wählen, wo der Slider hinein soll
- oben links im Editor auf "Quellcode" klicken
- nun kann der HTML-Code eingefügt werden:
Zitat:
<div id="gallery">
<a href=" #" class="show">
<img src=" grafikadresse.jpg" alt=" Flowing Rock" alt="" title="" width=" 580" height=" 360" rel="<h3> Deine Überschrift</h3> Hier deine Bildbeschreibung."/>
</a>
<a href=" #">
<img src=" grafikadresse.jpg" alt=" Grass Blades" alt="" title="" width=" 580" height=" 360" rel="<h3> Deine Überschrift</h3> Hier deine Bildbeschreibung."/>
</a>
<a href=" #">
<img src=" grafikadresse.jpg" alt=" Grass Blades" alt="" title="" width=" 580" height=" 360" rel="<h3> Deine Überschrift</h3> Hier deine Bildbeschreibung."/>
</a>
............
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
So ändern Sie wichtige Stellen im HTML Code:
Rosa: Die rosa Felder können Sie durch eine beliebige URL austauschen (z. B.: http://omba.de.tl). Dies bewirkt, dass das Bild im Slider auf etwas verlinkt.
Dunkelrot: Hier kommt eure Bild URL rein. Also die Bilder, die später im Slider wechseln sollen.
Grün: Hier kommt eine kleine Erklärung des Bildes rein.
Blau: Hier lässt sich die größe des Sliders verändern. Wichtig ist, das die Maße gleich bleiben!
Orange: Hier lässt sich die Überschrift für die einzelnen Bilder ändern.
Rot: Hier kommt eure Bild Erklärung rein.
Cyan: Der Slider kann beliebig erweitert werden. Dazu müsst Ihr einfach diesen Teil kopieren und wieder einfügen:
Zitat:
<a href=" #" class="show">
<img src=" grafikadresse.jpg" alt=" Flowing Rock" alt="" title="" width=" 580" height=" 360" rel="<h3> Deine Überschrift</h3> Hier deine Bildbeschreibung."/></a>
Schritt 2: Der CSS Code
• auf "Extras"
• das Extra Eigener <head> Inhalt wählen
• hier sind CSS Codes am besten aufgehoben
Zitat:
<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>
Blau: Hier müsst ihr die Höhe des Sliders eintragen. Die Höhe musst natürlich genau so groß sein, wie im HTML Teil.
Lila: Hier lässt sich die Farbe der Überschrift ändern.
Dunkelrot: In diesem Teil lässt sich das schwarze Transparente Feld bearbeiten. Bei color: #fff; lässt sich die Textfarbe verändern. Bei Background-color: #000, kann man die Farbe des Feldes verändern.
Wir würden die Farben lassen, da diese gut angepasst sind.
Schritt 3: Der Javascript-Code
• auf "Design" gehen
• auf "Designeinstellungen"
• auf "Erweiterte Designeinstellungen"
• im Feld Text ÜBER Design
• habt Ihr dort CSS-Codes ?
• dann diesen JAVASCRIPT-Code NACH dem --></style> einfügen
Zitat:
<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()',6000);
}
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>
FERTIG! Jetzt habt ihr euren eigenen jQuery Slider. Wir hoffen das Tutorial hat euch weitergeholfen.
Code und Original Tutorial powered by QUENESS.
mfg Daniel / www.omba.de.tl
.
Edit by Matsk: 14.04.14 - 21:04 Uhr
Edit by clean-test 25.02.2015 - 16:59 Uhr
Eine reine CSS Alternative (ohne Javascript) findet sich auf http://clean-test.de.tl/CSS-Bilderslider.htm
Auch für den Header: http://clean-test.de.tl/Bilderslider-im-Header.htm
Zuletzt bearbeitet von find-templates am 23.02.2015, 17:01, insgesamt 24-mal bearbeitet
|
