✔ Fragen zu Lightbox2 Anpassung

[netzjunkie]

Hallo
ich habe das Lightbox2 in meine Gallerie eingebunden, nun aber ein paar Fragen dazu

1.) Wie bekomme ich den ALT-Ausdruck weg, das heißt wenn der Mauszeiger über dem Bild ist, daß der Bldtitel nicht angezeigt wird ?
*erledigt dank Maik aus dem forum*

2.) Obwohl im css-Style steht #lightbox{ position: absolute wird das Popup im IE nicht in der Mitte sondern immer am oberen Rand angezeigt, im Firefox geht das aber.
Was muss ich denn hier evtl. ändern ?

3.) Wie bekomme ich an den unteren Rand einen feste Text , z.B. Copyright by....

Gruss

 

[Maik]

Hi,

1. Indem du das title-Attribut im <a>-Tag entfernst.
   
   
2. Zeig mal bitte den vollständigen Code, oder nenn uns den Link zu deiner Seite.
   
   
3. Falls du vom "Caption"-Text der Bilder sprichst, müsstest du dies im title-Attribut des <a>-Tags angeben.

mfg Maik

 

[netzjunkie]

Hallo Maik

ich habe die Lightbox in ein bestehendes 4images eingebaut, dager weiß ich leir nicht genau wo ich das <a> suchen muss, aber ohne die Lightboserweiterung war vorher keine Anzeige des Dateinamen.
Das musste ich aber in einer anderen Datei ergänzen damit Lightbos läuft

if ($show_link) {
if ($open_window) {
$thumb = "<a href=\"".$media_src."\" border=\"".$width_height." rel=\"lightbox\" title=\"".$image_name."\">".$thumb."</a>";
}
else {
$thumb = "<a href=\"".$media_src."\" border=\"".$width_height." rel=\"lightbox\" title=\"".$image_name."\">".$thumb."</a>";

An Stelle des Dateinamen möchte ich da halt einen festen Text unter dem Bild stehen habe. Das Ganze ist durch die Einbindung in 4 images bestimmt sehr schwierig, wenn überhaupt machbar....

Meine lightbox-css mit de rich das Bild wenigstens komplett mittig bekommen möchte:

#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 #bottomNavClose{ padding:0 10px; 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; }

Den Link schicke ich dir per PN

Gruss

 

[Maik]

Der CSS-Thread Lightbox Fenster Startposition verändern sollte dir weiterhelfen, was die Positionskorrektur der Lightbox betrifft.

Desweiteren solltest du den Stylesheet-Bereich <style> ... </style> vor der Doctype-Deklaration in den Dokumentheader verschieben, da er an dieser Stelle des Quellcodes nichts zu suchen hat, und für die Seite einen Dokumenttyp wählen, der das Dokument den Browsern im standardkonformen Modus übergibt, um weitere Fehlinterpretationen von seitens des IE zu vermeiden.

Mit "4images" kenn ich mich nicht aus, sodass ich hierzu auch nichts sagen / empfehlen kann, außer, dass in dem "Tooltip" nicht der Dateiname, sondern der Titel angezeigt wird, der sich im besagten title-Attribut befindet - also z.B.:

<a href="./data/media/48/1.jpg" border=" width="100" height="98" rel="lightbox[4images rockt]" title="No.01">

Und das entspricht in deinem gezeigten Code-Snippet diesen beiden Passagen:

if ($show_link) {
    if ($open_window) {
      $thumb = "<a href=\"".$media_src."\" border=\"".$width_height." rel=\"lightbox\" title=\"".$image_name."\">".$thumb."</a>";
    }
    else {
      $thumb = "<a href=\"".$media_src."\" border=\"".$width_height." rel=\"lightbox\" title=\"".$image_name."\">".$thumb."</a>";

mfg Maik

 

[netzjunkie]

Hallo Maik

Danke für deine Hilfe
Leider bin ich was CSS betrifft noch nicht so bewandert.
Was meinst du denn mit

Desweiteren solltest du den Stylesheet-Bereich <style> ... </style> vor der Doctype-Deklaration in den Dokumentheader verschieben, da er an dieser Stelle des Quellcodes nichts zu suchen hat, und für die Seite einen Dokumenttyp wählen, der das Dokument den Browsern im standardkonformen Modus übergibt,

Den anderen Link begzüglich der Position werde ich mir später mal intensiv zu Genüge führen.
Den tip mit dem title werde ich gleich mal testen

Nochmals Danke für deine Hilfe

Gruss

 

[Maik]

Was meinst du denn mit

Desweiteren solltest du den Stylesheet-Bereich <style> ... </style> vor der Doctype-Deklaration in den Dokumentheader verschieben, da er an dieser Stelle des Quellcodes nichts zu suchen hat, und für die Seite einen Dokumenttyp wählen, der das Dokument den Browsern im standardkonformen Modus übergibt,

Das hier:

<style type="text/css">
<!--
[...]
-->
</style>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

gehört hierher:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<title>SP-Fotomobil</title>
[...]

<style type="text/css">
<!--
[...]
-->
</style>

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

</head>

... und Der »DOCTYPE-Switch« und seine Auswirkungen.

mfg Maik

 

[netzjunkie]

Super
Der Punkt der Anzeige mit dem title hat geklappt
Das 'Problem' ist gelöst
Danke nochmals !

Der ander Typ mit der css-Verschiebung ist im 4images so nicht möglich das ich den einfach verschiebe, da er im originalen Quelltext nixht vorkommt, sondern evrschlüsselt von einer anderen Seite. ist also leider nicht so leicht umzusetzen, gucke ich mir aber trotzdem nochmal an.

Gruss

 

[Maik]

Der ander Typ mit der css-Verschiebung ist im 4images so nicht möglich das ich den einfach verschiebe, da er im originalen Quelltext nixht vorkommt, sondern evrschlüsselt von einer anderen Seite.

Versteh ich jetzt nicht, was es mit der verschlüsselten Quellcode-Version von einer anderen Seite auf sich hat, denn das Lightbox-Stylesheet liegt doch, wie auch die dazugehörigen Script-Dateien, auf deinem Server -> http://www.***.de/css/lightbox.css

mfg Maik

 

[netzjunkie]

Ich weiß glaube ich nur nicht was du genau meinst
Denn den Schnipsel

<style type="text/css">
<!--
[...]
-->
</style>

finde ich in keinem Quellcode

Gruss

 

[Maik]

Ich seh ihn klar und deutlich



(links: Startseite, rechts: Galerieseite)

... um hier exemplarisch mal zwei Seiten zu nennen.

mfg Maik