Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag25.08.2013 um 15:31 (UTC)    
Titel: Slideshow im Header?

Hallo Leutz!
Ich würde mir gerne eine art Slideshow-Header wie http://www.antenne-hannover.de.tl machen, das hab ich auch auf meiner Testseite ausprobiert. Allerdings lässt es sich nicht mit dem Header ersetzen.
Hier meine Testseite: http://www.lautbasetest.de.tl/test.htm

Kann mir da vielleicht jemand helfen? Wäre toll!
Danke im Vorraus;)
______________
Gruß Kevin
Beitrag25.08.2013 um 17:50 (UTC)    
Titel:

Hat jetzt aber geklappt oder ?
______________
Gruß Pexxi
Beitrag26.08.2013 um 06:19 (UTC)    
Titel:

Ich denke ja, daher markiere ich es mal als "erledigt" Smile.

Beste Grüße,
Mats
Beitrag05.02.2015 um 16:43 (UTC)    
Titel:

Einen wunderschönen,

im Moment habe ich das gleiche Problem, dass ich diese Slideshow gerne als header hätte.
Wenn ich den Code unter das Design setze funktioniert es wunderbar, sobald ich es aber über das Design setze gibt es nur noch Chaos.

Wenn Ihr es geschafft habt, dann wäre es schön wenn Ihr mir den Trick verraten würdet.

Vielen Dank schon einmal vorab.

<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>
<style type="text/css">
<!--

.clear {clear:both;}

#gallery {position:relative; height: 300px; }

#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>

<div id="gallery">

<a href="#" class="show">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header1.jpg" alt="Flowing Rock" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/>
</a>

<a href="#">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header2.jpg" alt="Grass Blades" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/>
</a>

<a href="#">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header3.jpg" alt="Grass Blades" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/>
</a>

<a href="#" class="show">
<img src="http://img.webme.com/pic/a/amg-autohandel/Header4.jpg" alt="Flowing Rock" alt="" title="" width="1050" height="300" rel="<h3>Deine Überschrift</h3>Hier deine Bildbeschreibung."/></a>
Beitrag06.02.2015 um 07:21 (UTC)    
Titel:

Hallo,

Einen Bilderslider müssen wir auf das Header-Bild drauf positionieren.
Damit der Slider auf das Headerfeld passt, sollte der auch die Größe des Headers besitzen.
Dein Headerfeld ist aktuell 1000 x 240 Pixel groß. Deine Bilder im Slider haben mehr Höhe.
Du müsstest als ersten Schritt bei Design | Designeinstellungen | erweiterte Einstellungen | die Headerhöhe auf 300 ändern.

Bilder-Slider auf Header platzieren. Schaue bitte hier :
http://www.homepage-baukasten.de/forum/viewtopic.php?t=134831

Der HTML-Code Deines Sliders käme bei Schritt 2 hinein.
Ersetze dort den grünen Text "Hier Dein Inhalt" durch den HTML-Code von Bilderslider <div id="gallery"> bis zum </div>

Bei Schritt 3 (dem CSS Code) Breite und Höhe angeben, die Dein Slider hat.
Und positionieren dann wie dort bei Schritt 4 beschrieben Wink

Gruß Wolle
______________


Zuletzt bearbeitet von clean-test am 26.02.2015, 18:08, insgesamt einmal bearbeitet
Beitrag06.02.2015 um 10:06 (UTC)    
Titel:

Hallo,

danke dir für deine Hilfe.
Hat soweit funktioniert, nur leider geht es bei einigen IE Versionen nicht, warum auch immer.

Fehlermeldung: node' ist undefiniert

var els = node.getElementsByTagName("*")


Zuletzt bearbeitet von AMG-Autohandel am 06.02.2015, 12:34, insgesamt einmal bearbeitet
Beitrag09.02.2015 um 08:22 (UTC)    
Titel:

Hallo,

im Internet-Explorer mal auf den "Kompatibilitätsbutton" geklickt ? Wink

Als Alternative würde ich sonst einen reinen CSS Bilder-Slider empfehlen.
Wie zum Beispiel diesen hier : http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
Ganz ohne Javascript.

Gruß Wolle
______________


Zuletzt bearbeitet von clean-test am 26.02.2015, 18:09, insgesamt 2-mal bearbeitet
Beitrag09.02.2015 um 08:37 (UTC)    
Titel:

Moinsen Wolle,
den CSS Slider kannte ich auch noch gar nicht ... der ist ja mal richtig schick. Und wenn ich mir den Code so anschaue auch recht kurz, knapp und übersichtlich Mr. Green

edit:
Aber nicht so ganz "Internet Explorer" tauglich, oder? Zumindest wird hier dann nur ein "Nachtbild ohne Sterne" angezeigt Neutral
______________
mfg SEO
---
Ist ein Thema von dir erledigt, dann schreib das [erledigt] doch BITTE auch in den Titel des ersten Postings rein!
Verwendet sinnvolle und beschreibende Titel. Wer kann mir helfen ... oder Hilfe... sind nur bedingt hilfreich!
Doppelpostings quer durchs Forum finden übrigens nicht nur Moderatoren doof!
Themenfremde Posting in den verschiedenen Kategorien sind ebenso doof und schaffen nur unnötige Arbeit!


Zuletzt bearbeitet von seo-suchmaschinenoptimierung am 09.02.2015, 09:40, insgesamt einmal bearbeitet
Beitrag10.02.2015 um 08:55 (UTC)    
Titel:

moin Seo Very Happy

stimmt, der IE9 unterstützt das nicht.


Zuletzt bearbeitet von clean-test am 10.02.2015, 10:17, insgesamt einmal bearbeitet
Beitrag10.02.2015 um 09:40 (UTC)    
Titel:

Der 11er aber leider auch nicht. Zumindest bei mir. Evil or Very Mad
Mit dem 9er kann ich nicht dienen. Je älter, desto mehr bäh!
______________
mfg SEO
---
Ist ein Thema von dir erledigt, dann schreib das [erledigt] doch BITTE auch in den Titel des ersten Postings rein!
Verwendet sinnvolle und beschreibende Titel. Wer kann mir helfen ... oder Hilfe... sind nur bedingt hilfreich!
Doppelpostings quer durchs Forum finden übrigens nicht nur Moderatoren doof!
Themenfremde Posting in den verschiedenen Kategorien sind ebenso doof und schaffen nur unnötige Arbeit!
Beitrag10.02.2015 um 09:58 (UTC)    
Titel: Slider im Header

uh ja Ursache gefunden. die Beispielseite hat da nur mit "präfix" -moz- und -webkit- gearbeitet.
Die habe ich mal alle entfernt. Also im IE 10 und 11 funzt es. http://clean-test.de.tl/CSS-Bilderslider.htm

Gruß Wolle

Edit: 26.02.2015
Für alle die hier nach - Bilderslider im Header - gesucht haben: http://clean-test.de.tl/Bilderslider-im-Header.htm
Eine Möglichkeit ohne Javascripte, reines CSS Wink
______________


Zuletzt bearbeitet von clean-test am 26.02.2015, 18:12, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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