Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag18.12.2011 um 20:17 (UTC)    
Titel: Bilder-Slider im Baukasten einfügen

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
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de