die redde ist von der
js ad gallery
die breite ist überall auf 738px eingestellt. dann sollte ja auch das photo auf 738px d.h. gleich gross wie der weisse banner text angezeigt werden
aber dem ist nicht so
nur die thumnailliste wird richtig angezigt
was mache ich falsch
hier der link zu der seite http://eigi.pendantmusic.ch/_vectorligh ... au1ph.html
und hier der
code von wohnbau.html seite
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></meta>
<meta name="description" content="JavaScript Beispiel: Demonstration der JavaScript Galerie"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<meta http-equiv="Content-Script-Type" content="text/javascript"></meta>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="eh-wohnbau1ph.css"></link>
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="photos/js/jquery.ad-gallery.js"></script>
<script type="text/javascript" src="/photos/js/jquery.js"></script>
<script type="text/javascript" src="/photos/js/jquery.timers-1.1.2.js"></script>
<script type="text/javascript" src="/photos/js/jquery.easing-1.3.js"></script><script language="javascript">
$(function() {
$('img.image0').data('ad-desc', 'häusergruppe von der glärnischstrasse');
$('img.image1').data('ad-desc', 'häuser von westen');
$('img.image2').data('ad-desc', 'haus a von süden');
$('img.image3').data('ad-desc', 'eingang haus c');
$('img.image4').data('ad-desc', 'atrium haus a ');
$('img.image5').data('ad-desc', 'essbereich haus a');
$('img.image6').data('ad-desc', 'treppe haus a');
$('img.image7').data('ad-desc', 'entreé haus a');
$('img.image8').data('ad-desc', 'blick von essen zur küche');
$('img.image9').data('ad-desc', 'detail wohnraum');
$('img.image10').data('ad-desc', 'blick von entreé');
$('img.image11').data('ad-desc', 'entreÉ auf essbereich');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
<style type="text/css">
* {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #fff;
line-height: 140%;
}
select, input, textarea {
font-size: 1em;
}
body {
padding: 0px;
font-size: 100%;
width: 800px;
}
h2 {
margin-top: 0em;
margin-bottom: 0;
padding: 0;
-bottom: 0px dotted #4b4b4b;
}
img {
-color:#4b4b4b;
}
h3 {
margin-top: 0em;
margin-bottom: 0;
padding: 0;
}
.example {
: 0px hidden #4b4b4b;
background: #0F0;col
padding: 0px;
}
ul {
list-style-image:url(list-style.gif);
}
pre {
font-family: "Lucida Console", "Courier New", Verdana;
: #4b4b4b;
background: #4b4b4b
padding: 0px;
}
code {
font-family: "Lucida Console", "Courier New", Verdana;
margin: 0;
padding: 0;
}
#gallery {
padding: 0px;
background: #4b4b4b;
width: 738px;
}
#descriptions {
position: relative;
height: 50px;
background: #4b4b4b;
width: 738px;
overflow: hidden;
color:#FFF;
}
#descriptions .ad-image-description {
position: absolute;
color:#FFF;
}
#descriptions .ad-image-description .ad-description-title {
display: block;
color:#FFF;
}
.farbe {
color: #FF0;
}
#gallery {
position: relative;
width:738px;
height:340px;
margin:0;
padding:0;
}
#gallery li { display: block; }
a:link {
color: #ebebeb;
text-decoration: none;
}
a:visited {
color: #ebebeb;
text-decoration: none;
}
a:hover {
color: #FF0;
text-decoration: none;
}
a:active {
color: #ebebeb;
text-decoration: none;
}
-->
</style></head>
<body bgcolor="#4b4b4b">
<div id="container">
<div id="sign"><img src="images/signet 35x35.jpg" width="35" height="35" alt="sign" /></div>
<div id="banner"> urs p. eigenmann + peter hefti dipl. architekten eth sia</div>
<div id="wohnbau"><a href="eh-wohnbau.html">wohnbau</a></div>
<div id="wohnbau1">1998 - 2000 drei einfamilienhäuser glärnischstrasse stäfa zh</div>
<div id="pläne"><a href="eh-wohnbau1pl.html">pläne</a></div>
<div id="link_home"><a href="index.html">home</a></div>
<div id="link_bauten"><a href="index.html">bauten</a></div>
<div id="link_kontakt"><a href="eh-kontakt.html">kontakt</a></div>
<div id="link_links"><a href="eh-links.html">links</a></div>
<div id="grosscontainer">
<div id="photorahmen">
<div class="rahmen" id="1">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="photos/wohnbau/wohnbau-a/0.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/0.jpg" width="65" height="65" class="image0">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/1.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/1.jpg" alt="by fabian eigenmann" width="65" height="65" class="image1">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/2.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/2.jpg" alt="by fabian eigenmann" width="65" height="65" class="image2">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/3.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/3.jpg" alt="by fabian eigenmann" width="65" height="65" class="image3">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/4.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/4.jpg" alt="by fabian eigenmann" width="65" height="65" class="image4">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/5.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/5.jpg" alt="by fabian eigenmann" width="65" height="65" class="image5">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/6.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/6.jpg" alt="by fabian eigenmann" width="65" height="65" class="image6">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/7.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/7.jpg" alt="by fabian eigenmann" width="65" height="65" class="image7">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/8.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/8.jpg" alt="by fabian eigenmann" width="65" height="65" class="image8">
</a>
</li>
<li>
<a href="photos/wohnbau/wohnbau-a/9.jpg">
<img src="photos/wohnbau/wohnbau-a/thumbs/9.jpg" alt="by fabian eigenmann" width="65" height="65" class="image9">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
hier das css für die gallery
- Code: Alles auswählen
.ad-gallery {
width: 738px;
}
.ad-gallery, .ad-gallery * {
margin: 0;
padding: 0;
}
.ad-gallery .ad-image-wrapper {
width: 738px;
height: 468px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
left: 0px;
top: 0px;
}
.ad-gallery .ad-image-wrapper .ad-loader {
position: absolute;
z-index: 10;
top: 48%;
left: 48%;
}
.ad-gallery .ad-image-wrapper .ad-next {
}
.ad-gallery .ad-image-wrapper .ad-prev {
}
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(../img/non-existing.jpg)\9
}
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
}
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
}
.ad-gallery .ad-image-wrapper .ad-image {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 9;
}
.ad-gallery .ad-image-wrapper .ad-image a img {
}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
position: absolute;
bottom: 0px;
left: 0px;
padding: 0px;
text-align: left;
width: 100%;
z-index: 2;
background: url(../img/opa75.png);
color: #000;
}
* html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png');
}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title {
display: block;
}
.ad-gallery .ad-controls {
height: 20px;
}
.ad-gallery .ad-info {
float: left;
}
.ad-gallery .ad-slideshow-controls {
float: right;
}
.ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop {
padding-left: 0px;
cursor: pointer;
}
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown {
padding-left: 0px;
font-size: 0.9em;
}
.ad-gallery .ad-slideshow-running .ad-slideshow-start {
cursor: default;
font-style: italic;
}
.ad-gallery .ad-nav {
width: 738px;
position: relative;
height: 65px;
}
.ad-gallery .ad-forward, .ad-gallery .ad-back {
position: absolute;
top: 0;
height: 100%;
z-index: 10;
}
/* IE 6 doesn't like height: 100% */
* html .ad-gallery .ad-forward, .ad-gallery .ad-back {
height: 100px;
}
.ad-gallery .ad-back {
cursor: pointer;
left: -20px;
width: 13px;
display: block;
background: url(../img/ad_scroll_back.png) 0px 22px no-repeat;
}
.ad-gallery .ad-forward {
cursor: pointer;
display: block;
right: -20px;
width: 13px;
background: url(../img/ad_scroll_forward.png) 0px 22px no-repeat;
}
.ad-gallery .ad-nav .ad-thumbs {
overflow: hidden;
width: 738px;
}
.ad-gallery .ad-thumbs .ad-thumb-list {
float: left;
width: 9000px;
list-style: none;
color:#4b4b4b;
}
.ad-gallery .ad-thumbs li {
float: left;
padding-right: 0px;
color:#4b4b4b;
}
.ad-gallery .ad-thumbs li a {
display: block;
color:#4b4b4b;
}
.ad-gallery .ad-thumbs li a img {
display: block;
color:#4b4b4b;
}
.ad-gallery .ad-thumbs li a.ad-active img {
color:#4b4b4b;
}
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
position: absolute;
left: -9000px;
top: -9000px;
}