nicht angemeldet
Navigation in Jquery-Slideshow
Matthias ApselHallo liebe Leute,
ich hab noch nicht viel Erfahrung mit HTML/Javaskript/CSS. Mein Problem:
Ich habe eine Jquery-Slideshow in meine Website eingebaut (sieht auch alles ganz gut aus) bloß weiß ich nicht, wie ich aus den Next und Previous-Links bzw. den vertikal angeordneten Zahlen, die einzeln auf die Bilder in der Slideshow verweisen, Buttons machen kann. Die haben zwar schon eine Hintergrundfarbe und Rahmen, die zum Layout passen, allerdings kann ich sie in ihrer Position nicht verändern. Der Next und Previous-Link soll auch lieber Nächstes und Zurück heißen und rechts und links zentriert neben den Fotos stehen.
Ich hoffe wirklich jemand kann mir helfen - probier jetzt schon Ewigkeiten allesmögliche.
Sorry wenn der Code verwirrend ist ;)
Kopier hier einfach mal den ganzen Code hin, ist nicht allzu lang.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Café zur Seerose</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<style>
.aussenrahmen {
width: 1000px;
height: 768px;
margin: 0 auto;
}
.logobereich {
height: 189px;
width: 445px;
float: none;
margin-left: 270px;
background-color: #FFF;
margin-top: 0px;
margin-bottom: 0px;
}
.navigationsbereich {
height: 40px;
width: 672px;
float: left;
background-color: #FFF;
margin-left: 215px;
margin-top: 13px;
z-index:99;
}
.navigationstypo {
font-family: "Lucida Grande", Verdana;
font-size: 15px;
font-style: normal;
color: #FFF;
background-color: #FF3333
font-weight: bold;
background-color: #F66;
text-align: center;
float: none;
font-weight: bold;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin: 0px;
padding: 10px;
}
.navigationstypopulldown {
font-family: "Lucida Grande", Verdana;
font-size: 15px;
font-style: normal;
color: #FFF;
font-weight: normal;
background-color: #e64343;
padding: 10px;
text-align: center;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin: 0px;
position: relative;
z-index:98;
}
body {
background-repeat: no-repeat;
position: static;
z-index: auto;
}
.pd_box {
float: left;
height: 44px;
overflow: hidden;
-moz-box-shadow: 1px 1px 3px #666;
-webkit-box-shadow: 1px 1px 3px #666;
box-shadow: 1px 1px 3px #666;
}
.pd_box:hover {
overflow: visible;
}
.navigationsbereich a:link {
text-decoration: none;
color: #FFF
}
.navigationsbereich a:visited {
text-decoration: none;
color: #FFF
}
.navigationsbereich a:hover {
text-decoration: none;
color: #FFF;
background-color:#F33
}
.navigationsbereich a:active {
text-decoration: none;
background-color:#F33;
}
/* Prevent the slideshow from flashing on load */
#slides {
width: 800px;
height:600px;
margin-left:100px;
display:block;
padding-top:20px;
color:#F66;
z-index:5;
font-family: "Lucida Grande; Verdana; sans-serif";
font-size: 14px;
font-weight: bold;
}
/* Center the slideshow */
.container {
font-family:"Lucida Grande", "Verdana sans-serif";
margin-top:20px;
background-position: center center;
color: #F66;
z-index:6;
font-weight: bold;
background-color: #FFF;
}
.container a:link {
TEXT-DECORATION: none;
DISPLAY: inline;
WIDTH: 0px;
FONT-FAMILY: verdana, arial, helvetica;
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
TEXT-ALIGN: center;
COLOR:#FFF;
BACKGROUND-COLOR:#F66;
border: 2px solid #FCC;
background-position: center center;
float: none;
clear: right;
}
.container a:hover {
background-color:#F33
}
/* Show active item in the pagination */
.slidesjs-pagination .active {
color:red;
}
a.menu {
display:block;
width:16ex;
border-style:ridge;
border-width:3px; padding:2px;
text-decoration:none; }
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<div class="aussenrahmen">
<div class="logobereich">
<img src="../Slideshow/bilder/logooo.png" width="445"height="189" alt="logo"/>
</div>
<div class="navigationsbereich">
<div class="pd_box">
<p class="navigationstypo">
<a href="http://www.seerose-hamminkeln.de/dascafe">Das Café</a></p>
<p class="navigationstypopulldown">
<a href="http://www.seerose-hamminkeln.de/willkommen">Willkommen</a></p>
<p class="navigationstypopulldown">
<a href="http://www.seerose-hamminkeln.de/ambiente">Ambiente</a></p>
<P class="navigationstypopulldown">
<a href="http://www.seerose-hamminkeln.de/derseeblick">Der Seeblick</a>
</div>
<div class="pd_box">
<p class="navigationstypo">
<a href="http://www.seerose-hamminkeln.de/unsereklassiker">Unsere
Klassiker</a></p>
</div>
<div class="pd_box">
<p class="navigationstypo">
<a href="http://www.seerose-hamminkeln.de/dieangebote">Die Angebote</a></p>
<p class="navigationstypopulldown">
<a href="http://www.seerose-hamminkeln.de/buffets">Buffets</a></p>
<p class="navigationstypopulldown">
<a href="http://www.seerose-hamminkeln.de/saisonaleangebote">Saisonale Angebote</a></p>
<p class="navigationstypopulldown">
<a href="http://www.seerose-hamminkeln.de/feiernundgeburtstage">Feiern
und Geburtstage</a></p>
</p>
</div>
<div>
<div class="pd_box">
<p class="navigationstypo">
<a href="http://www.seerose-hamminkeln.de/kontakt">Kontakt</a></p>
</div>
</div>
</div>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div class="menu">
<div id="slides">
<img src="foto1.jpg"><a href=""></a>
<img src="kuchen.jpg">
<img src="cafeinnen.jpg">
<img src="cafeaussen.jpg">
<img src="kuchen2.jpg">
</div>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="../basic-slide/js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 500
});
});
</script>
<!-- End SlidesJS Required -->
</div>
</body>
</html>
-
Ich habe eine Jquery-Slideshow in meine Website eingebaut ... bloß weiß ich nicht, wie ich aus den Next und Previous-Links bzw. den vertikal angeordneten Zahlen, die einzeln auf die Bilder in der Slideshow verweisen, Buttons machen kann. Die haben zwar schon eine Hintergrundfarbe und Rahmen, die zum Layout passen, allerdings kann ich sie in ihrer Position nicht verändern. Der Next und Previous-Link soll auch lieber Nächstes und Zurück heißen und rechts und links zentriert neben den Fotos stehen.
Schon fast 24 Stunden ohne Antwort -- da fühlt sich wohl keiner zuständig. Was Du willst, ist vermutlich in der Javascript-Datei enthalten, in dem geposteten Code seh ich es jedenfalls nicht. Wenn es denn überhaupt geht, in der Doku wird mehrfach auf Punkte hingewiesen, die nicht geändert werden können.
Gruß H.
-
Om nah hoo pez nyeetz, Karo!
Kopier hier einfach mal den ganzen Code hin, ist nicht allzu lang.
Deutlich zielführender wäre ein Link auf die Seite.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Karo
Ich habe eine Jquery-Slideshow in meine Website eingebaut (sieht auch alles ganz gut aus) bloß weiß ich nicht, wie ich aus den Next und Previous-Links bzw. den vertikal angeordneten Zahlen, die einzeln auf die Bilder in der Slideshow verweisen, Buttons machen kann.
Ich hoffe wirklich jemand kann mir helfen - probier jetzt schon Ewigkeiten allesmögliche.Hier findest du unter Options alles beschrieben.
Und für Fragen gibt es ein Forum
Mit besten Grüssen
Richard