✔ slimbox 1.65 Abstände der Thumbs einstellen

[chiara34]

Hi,

ich möchte gerne bei der eingedeutschten Slimbox die Abstände der Thumbs verändern. Derzeit peppen sie mir zu nah aneinander. Habe vorübergehend das Problem mit nem Blindgif gelöst, bin damit aber nicht zufrieden. Wo kann ich die Abstände der Thumbs ändern ? In der CSS oder irgendwo im JS ?

Die CSS lautet wie folgt:

#lbOverlay {
	position: absolute;
	z-index: 9999;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	left: 50%;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(images/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(images/last.png) no-repeat 0% 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(images/next.png) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 113px;
	height: 22px;
	background: transparent url(images/schliessen.png) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}

Danke für eure Hilfe

 

[Quaese]

Hi,

von welchen Thumbs sprichst du?

slimbox ist zur Anzeige der Orginalbilder, die Formatierung der Thumbs erfolgt im allgemeinen im eigentlichen HTML-Quellcode.

Ciao
Quaese

 

[chiara34]

<a href="img/Logos/L1.jpg" rel="lightbox[logos]"><img src="img/Logos/Lk1.jpg" alt="1" width="80" height="80" border="0" />
  <img src="img/blind.png" width="10" height="10" border="0"/> </a>
  
  <a href="img/Logos/L2.jpg" rel="lightbox[logos]"><img src="img/Logos/Lk2.jpg" width="80" height="80" alt="1" border="0" />
  <img src="img/blind.png" alt="" width="10" height="10" border="0"/> </a>

das ist der Code für die Bilder. Wie oben erwähnt habe ich ein blind-png als Trennung eingefügt. Dreamweaver CS4 streikt wenn ich horizontale Abstände eingebe. Diese setzt er nicht um.

Aaahhhh ich hab ne Lösung. Ich gebe jedem Bild ne CSS-Regel:

Beispiel:

.imagegalerie {
	margin-bottom: 20px;
	margin-right: 15px;
	margin-left: 15px;

muss nun nur noch die Abstände austarrieren Manchmal findet selbst ein blindes Huhn ein Korn ;-)

Danke für den Anstubbser Quaese

 

[dino]

zu dieser Slimbox hätte ich auch eine Frage: Standartmässig erscheinen die Grafiken für "vor", "zurück" und "schliessen" unterhalb der Fotos. Ich hätte diese aber gerne oberhalb, wie müsste die css umgebaut werden?

 

[Maik]

Hi,

zu dieser Slimbox hätte ich auch eine Frage: Standartmässig erscheinen die Grafiken für "vor", "zurück" und "schliessen" unterhalb der Fotos. Ich hätte diese aber gerne oberhalb, wie müsste die css umgebaut werden?

der "Prev"- und "Next"-Button erscheint bei mir nicht standardmäßig unterhalb der Bilder, sondern im oberen Bereich der Slimbox. Ihre Hintergrundposition ist im Stylesheet slimbox.css in diesen Regeln festgelegt, und müsste für den oberen Wert von "15%" auf "0" zurückgesetzt werden:

#lbPrevLink:hover {
        background: transparent url(prevlabel.gif) no-repeat 0 15%; /* Hintergrundposition von oben 15% */
}

#lbNextLink:hover {
        background: transparent url(nextlabel.gif) no-repeat 100% 15%; /* Hintergrundposition von oben 15% */
}

Was den "Close"-Button betrifft, mußt du dir mal das Script slimbox.js näher anschauen, da dieses die einzelnen Bestandteile und den Aufbau der Slimbox generiert.

mfg Maik