Erstmal hallo an alle! Dies ist mein erster "Beitrag", ich bin auch ein totaler Neuling was Programmieren angeht; ich bin dran, ein Page für ein kleines Cafe zu machen und habs endlich geschafft, ne Slideshow hinzukriegen, allerdings noch folgende Probleme:
-wie kann ich die Slideshow an eine bestimmte Position auf der Site positionieren? (im moment ist sie ja einfach oben links)
-wie kann ich auf der Seite der Slideshow Fliesstext anzeigen lassen?
ich hatte das Script der Slideshow in das der Page eingefügt, aber dann haben sich Script und Hintergrundbild einfach überlappt, das bringt mir leider auch nichts:-( im Notfall könnte ich das Hintergrundbild aber auch rausnehmen
Vielen Dank schon im Voraus!
Das Script der Page ist folgendes:
-----------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<head>
<title>Cafe Gruebi, Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../formate.css">
<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
body {
font-family:sans-serif;
}
#hintergrund {
position:absolute;
width:100%;
height:100%;
z-index:1;
}
#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
}
#inhalt {
padding:20px 100px 30px 200px;
z-index:2;
}
</style>
</head>
<body>
<div>
<img id="hintergrund" src="../img/backgroundpng.png" alt="" title=""
style="filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;" />
</div>
<div id="scrollbereich">
<div id="inhalt">
<table>
<tr>
<th> <a href="../home/home.html">Home</a> </th>
<th> <a href="../Speisekarte/Speisekarte.html">Speisekarte</a> </th>
<th> <a href="../Lageplan/Lageplan.html">Lageplan</a> </th>
<th> <a href="../Kontakt/Kontakt.html">Kontakt</a> </th>
<th> <a href="../Links/Links.html">Links</a> </th>
</tr>
</table>
<hr>
<p> Wir sind ein junges Team, welches das Cafe Gruebi auf die Wintersaison 2012/2013 übernommen hat; wir führen das Cafe
mit grossem Engagement und Freude und würden uns freuen, Sie bei uns begrüssen zu dürfen! Unsere Spezialitäten sind
eine Fülle von hausgemachten Kuchen, dazu servieren wir Ihnen sehr gerne unseren feinen Kaffee oder selbstgemachten Glühwein.
Unser Service-Team ist stets aufgeschlossen und geniesst den Kontakt mit den Gästen aus der ganzen Welt.
Wir verwenden ausschliesslich frische Zutaten, welche wir sorgfältig und liebevoll zu leckeren Gerichten verarbeiten. Bitte überzeugen Sie sich
selbst von unserer Qualität!
</p>
<br>
<p>Wir haben wie folgt geöffnet:</p>
<table>
<tr>
<th>
Montag-Samstag</th>
<th>Sonntag</th>
</tr>
<tr>
<th>
08.30 - 18.00</th>
<th>
12.00 - 18.00</th>
</tr>
</table>
</div>
</div>
</body>
</HTML>
---------------------------------------------------------
Script der Slideshow:
---------------------------------------------------------
<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 4000 = 4 sekunden
setInterval('gallery()',4000);
}
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" >
<img title="Gruebi im Sommer" alt="Content 1" width="580" height="360" rel="<h3>Cafe Gruebi im Sommer</h3>Beschreibung" src="Slideshow/bild1.jpg" />
</a>
<a>
<img title="" alt="Content 2" width="580" height="360" rel="<h3>Eingang Cafe Gruebi</h3>Beschreibung" src="Slideshow/bild2.jpg" />
</a>
<a>
<img title="" alt="Content 3" width="360" height="580" rel="<h3>Cafe Gruebi im Winter</h3>Beschreibung" src="Slideshow/bild3.jpg" />
</a>
<a>
<img title="" alt="Content 4" width="580" height="360" rel="<h3>Unsere Speisekarte</h3>Beschreibung" src="Slideshow/bild4.jpg" />
</a>
<div class="caption">
<div class="content"> </div>
</div>
