lightbox bilder nur untereinander

bibifellow · 25.10.2009

Hallo, habe die lightbox in meine HP eingebunden. Die Bilder (thumbs) werden aber nur untereinander dargestellt. Habe sie in ein Div gepackt. Ich habe vorher alles direkt mit der lightbox gemacht dort sind sie nebeneinander aber sofern ich die dateien einbinde stehen sie untereinander. Schon viel ausprobiert aber ohne Erfolg. Auch habe ich nur beim ersten Bild ein next Button danach nur noch den prev Button. Wäre dankbar für Hilfe.
Meine Links für die bilder liegen im Ordner images die html datei im Ordner html und die css im Ordner CSS. Habe die Pfade in css geändert.

<div id="Text">
<a href="../images/image1.jpg" rel="lightbox[roadtrip]" <img src="../images/thumb1.jpg" /></a>

im Head

link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../js/lightbox.js" type="text/javascript"></script>

Bin völlig ratlos.:'(

mitstreiter · 25.10.2009

AW: lightbox bilder nur untereinander

wie untereinander?

Code:

rel="lightbox[roadtrip]"

das ist dir klar was das bedeutet?

bibifellow · 25.10.2009

AW: lightbox bilder nur untereinander

ja die Bilder gehören zur einer Gruppe aber ich möchte gerne die Bilder Nebeneinander haben und nicht untereinander. Und bei der Show habe ich nur beim ersten Bild den Next button dann nicht mehr nur noch den previous button.

sokie · 25.10.2009

AW: lightbox bilder nur untereinander

ein link zur Seite würde helfen, sich alles ansehen zu können. Deine Codeschnippsel reichen nicht aus.

bibifellow · 25.10.2009

AW: lightbox bilder nur untereinander

die Seite ist noch nicht online. Wie könnte ich das denn machen???

sokie · 25.10.2009

AW: lightbox bilder nur untereinander

am einfachsten wäre es sie komplett auf deinen Webspace zu laden, und hier die adresse zu posten. Das empfiehlt sich sowieso, allein zu Testzwecken.
oder den gesamten code der Seite und den code deiner css-Datei(en).

bibifellow · 25.10.2009

AW: lightbox bilder nur untereinander

Etwas viel hoffe es hilft den Fehler zu finden.

Die lightbox

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Die Seite

<!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>
<link href="../css/zeisel.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../css/navi1.css" rel="stylesheet" type="text/css" media="screen" />

<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../js/lightbox.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Knurt Zeisel Photostudio</title>
<style type="text/css">

</style>
</head>

<body id="Startseite">

<div id="wrapper">
<div class="style4" id="kopfbereich"></div>
<span class="style4">
</head>
<div id="navigation">
<ul>
</span>
<li> <a href="../index.html" >Home</a></li>
<li> <a href="Werbung.html" class="Stil9" >Werbung</a></li>
<li> <a href="Industrie.html" >Industrie</a>


<li> <a href="Reportage.html" >Reportage</a>

<ul >

<li> <a href="Loudenne.html" >Loudenne</a></li>
<li > <a href="Peru.html" >Peru</a></li>
<li > <a href="Schuster.html" >Schuster</a></li>
<li > <a href="Schwarze.html" >Schwarze</a></li>
<li > <a href="Winzer.html" >Winzer</a></li>
</ul>
<li><a href="Portrait.html" >Portrait</a></li>
<li> <a href="Erotik.html" >Erotik</a></li>
<li> <a href="Hochzeit.html" >Hochzeit</a></li>
<li> <a href="Kunst.html" >Kunst</a></li>
<li> <a href="Referenzen.html" class="Stil8" >Referenzen</a></li>
<li> <a href="Lebenslauf.html" >Lebenslauf</a></li>
<li> <a href="Preise.html" >Preise</a></li>

</div>

<div id="Text">
<img src="../image/Werbung.jpg" width="900" height="100" />
<a href="../images/image1.jpg" rel="lightbox[Werbung]" style="display:block; width: 30%; height: 30%;"<img src="../images/thumb1.jpg" /></a>
<a href="../images/image2.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"
<img src="../images/thumb2.jpg" /></a>
<a href="../images/image4.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb4.jpg" /></a>
<a href="../images/image6.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb6.jpg" /></a>
<a href="../images/image7.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb7.jpg" /></a>
<a href="../images/image9.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb9.jpg" /></a>
<a href="../images/image10.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb10.jpg" /></a>
<a href="../images/image12.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb12.jpg" /></a>
<a href="../images/image13.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb13.jpg" /></a>
<a href="../images/image14.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb14.jpg" /></a>
<a href="../images/image15.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb15.jpg" /></a>
<a href="../images/image5.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb5.jpg" /></a>
<a href="../images/image8.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb8.jpg" /></a>
<a href="../images/image11.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb11.jpg" /></a></div>

Die css
@charset "utf-8";
/* CSS Document */

#navigation {
width:200px;
font-weight:bold;
top: 130px;

}

ul {
list-style:none;
height:100%;
}
ul li {
width: 99px;
overflow:hidden;
height: 35px;
background: #ccc;
border-top: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-left: 1px solid #ddd;
border-right: 1px solid #aaa;
}
ul li:hover {
overflow: visible;
background: #999;
}

ul ul {
margin: -36px 0 0 100px;
width: 100px;
}
ul ul li {
height: 35px;
float: right;
width: 98px;
}
ul li a {
}
a {
text-decoration:none;
color: #444;
display:block;
padding: 5px;
height: 25px;
font-family: "Myriad Pro";
font-size: 14px;
}
a:hover {
color: #ccc;
}

/*Layout*/
#wrapper {
width: auto;
margin: 0 auto;
color: #fff;
}
#wrapper #header {
width: auto;
background: #990374;
position: relative;
}

#wrapper #main {
width: auto;
color: #990374;
padding: 40px;
}

#footer {
background: #2A4694;
width: auto;
clear: both;
position: relative;
}

/*Globals*/

* {
padding: 0px;
margin: 0px;
border: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
html,
body {
font-size: 100.01%;
}
#Text {
color:#000000;
background-color:#CCCCCC;
height: 400px;
width: 900px;
position: fixed;
top: 130px;
left: 200px;
overflow: scroll;
}

#TextBanner {
color:#000000;
background-color:#CCCCCC;
height: 100px;
width: 900px;
position: fixed;
top: 130px;
left: 200px;

}
#TextSlightshow {
color:#000000;
background-color:#999999;
height: 300px;
width: 900px;
top: 230px;
left: 200px;
overflow: scroll;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
position: fixed;
}
@charset "utf-8";
/* CSS Document */

body {
color:#000000;
background-color:#000000;
height: 400px;
width: 1200px;
position: fixed;
overflow: scroll;
}
#wrapper { color:#000000:
background-color:#999999;
height: 1000px;
width: 750px;
position: fixed;
background-color: #000000;
}
#kopfbereich {
color:#CCCCCC;
background-color:#666666;
height: 130px;
width: 1100px;
position: fixed;
}
#navigation
{
color:#000000;
background-color:#999999;
height: 400px;
width: 100px;
position: fixed;
top: 130px;
font-family: "Myriad Pro";
font-size: 14px;
}

.submenu {display:none; }

/* ==============================================
05 Patches für IE5.x und 6
============================================== */
/* IE 5.x und 6: hasLayout für Hyperlinks */
* html #navibereich ul,
* html #navibereich a,
* html #navibereich strong {
height: 1%; /* oder 1px oder irgendeinen anderen Wert */
}
/* Für IE 5.x (für IE 6 stört es nicht) */
* html #navibereich li {
float: left;
width: 100%;
}

#Actionbilder {
color:#000000;
background-color:#CCCCCC;
height: 300px;
width: 300px;
position: absolute;
top: 130px;
left: 380px;
}

#Textpreise {
color:#000000;
background-color:#999999;
height: 380px;
width: 600px;
position: fixed;
top: 130px;
left: 400px;
overflow: scroll;
}

#Fussbereich {
color:#CCCCCC;
background-color:#333333;
height: 60px;
width: 1100px;
position: fixed;
top: 530px;
left: 0px;
}

.formbox {
width: 400px;
color: #000;
background-color: #999999;
border: 1px solid #666;
left: 240px;
top: 135px;
position: fixed;
}

.reihe {
clear: both;
padding: 2px 0px;
}

.label {
float: left;
width: 100px;
text-align: right;
padding-top: 3px;
padding-right: 5px;
}

.feld {
float: right;
width: 300px;
text-align: left;
}

.knopf {
clear: both;
text-align: center;
padding-top: 0px;
padding-bottom: 30px;
}

.defbreite {
width: 260px;
}

Die lightbox js habe ich nur folgendes geändert

LightboxOptions = Object.extend({
fileLoadingImage: '../images/loading.gif',
fileBottomNavCloseImage: '../images/closelabel.gif',

sokie · 25.10.2009

AW: lightbox bilder nur untereinander

HTML:

<a href="../images/image14.jpg" rel="lightbox[Werbung]" style="display: block; width: 30%; height: 30%;"<img src="../images/thumb14.jpg" /></a>

zum einen erreichst du durch das display:block genau das, dass nach jedem <a> Element umgebrochen werden -also die Bilder untereinander angeordnet sind.
eine andere Sache ist, dass den öffnenden a-tags die schliessende klammer fehlt (>)

Wenn du erreichen willst, dass die a tags (und die thumbs) trotz des display:block nebeneinander dargestellt werden, musst du sie floaten. Die css formatierungen könntest du statt inline (also style="/*Formatierungen...;/*") auch im css bereich angeben[/code]
#Text a{
display: block;
width: 30%;
float:left;
}
[/code]
in dem Fall müsstest du als letztes Element (nach den thumbs) noch ein <div style="clear:left"></div> leer in den code einfügen, um das floaten abzuschliessen.

PS: Zum einfügen längerer Codes: im Antwortfenster "Erweitert" anklicken, und die dafür vorgesehenen Bereiche benutzen.

bibifellow · 25.10.2009

AW: lightbox bilder nur untereinander

super hat geklappt habe zu der css noch die Reihe so geändert das ist super
lieben Dank.
<a href="../images/image2.jpg" rel="lightbox[Werbung]" style="height: 30%;" <img src="../images/thumb2.jpg"/></a>

Jetzt habe ich nur noch das Problem mit dem next button warum er nur auf dem ersten Bild erscheint. Und im Explorer ist das ganze nicht sichtabr. Wäre dankbar wenn du mir da auch noch helfen könntest.

sokie · 25.10.2009

AW: lightbox bilder nur untereinander

<a href="../images/image2.jpg" rel="lightbox[Werbung]" style="height: 30%;" <img src="../images/thumb2.jpg"/></a>
dein tag ist immer noch nicht geschlossen:
<a ... rel="lightbox[Werbung]" style="height: 30%;" > <-

bibifellow · 25.10.2009

AW: lightbox bilder nur untereinander

Hab ich jetzt gemacht
<a href="../images/image1.jpg" rel="lightbox[Werbung]" style="height: 30%;"> <img src="../images/thumb1.jpg" /></a>
vielleicht noch einen Tipp zu dem next button und dem explorer.
Denn im explorer muss es ja auch laufen.