✔ Bild in Hauptframe öffnen

S

sheester

Grünschnabel
Hallo Leute

Bin wiedermal an ner kleinen Page dran und brauche nun eure Hilfe.
Ich hab ne Galerie mit den Thumbnails in nem kleineren Frame. Die Galerie hab ich mit Visual Lightbox erstellt.
Nun ist das Problem, wenn ich auf ein Thumbnail klicke, öffnet sich das Bild in diesem kleinen Frame, in welcher sich die Galerie befindet. Ich möchte jedoch, dass sich das Bild im Haupframe öffnet, jedoch aber nicht in einem neuen Fenster. Wie stell ich das an?

Hier der Code, welcher Visual Lightbox erstellt hat.

HTML: 
<!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" lang="en" xml:lang="en">
    <head>
        <title>Rust '09</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="Rust '09" />
		<meta name="description" content="Rust '09" />
		<link rel="shortcut icon" href="favicon.ico" />
		<!-- Start VisualLightBox.com HEAD section -->
		<script type="text/javascript">var LightBoxOpt={autoPlay:false}</script>
		<link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
		<script src="engine/js/prototype.js" type="text/javascript"></script>
		<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
		<script src="engine/js/lightbox.js" type="text/javascript"></script>

		<style>
			.gallery {
				zoom:1;
				width:auto;				
			}
			.gallery a {
				display:block;
				float:left;
				margin:5px;
				padding:6px;
				border:solid 1px #b8b8b8;
				background-color:#f4f5f5;
				opacity:0.87;
				text-align:center;
			}
			.gallery a:hover {
				opacity:1;
			}
			.gallery a img {
				border:none;
				display:block;
			}
			.gallery a#vlightbox{display:none}
		</style>
		<!-- End VisualLightBox.com HEAD section -->
    </head>
    <body>
	
	<!-- Start VisualLightBox.com BODY section -->	
	<div class="gallery">
		<a href="./data/images/IMG_0452.jpg" rel="lightbox[sample]" title="IMG_0452"><img src="./data/thumbnails/IMG_0452.png" /></a>
	<a href="./data/images/IMG_0005.jpg" rel="lightbox[sample]" title="IMG_0005"><img src="./data/thumbnails/IMG_0005.png" /></a>
	<a href="./data/images/IMG_0076.jpg" rel="lightbox[sample]" title="IMG_0076"><img src="./data/thumbnails/IMG_0076.png" /></a>
	<a href="./data/images/IMG_0145.jpg" rel="lightbox[sample]" title="IMG_0145"><img src="./data/thumbnails/IMG_0145.png" /></a>
	<a href="./data/images/IMG_0158.jpg" rel="lightbox[sample]" title="IMG_0158"><img src="./data/thumbnails/IMG_0158.png" /></a>
	<a href="./data/images/IMG_0254.jpg" rel="lightbox[sample]" title="IMG_0254"><img src="./data/thumbnails/IMG_0254.png" /></a>
	<a href="./data/images/IMG_0324.jpg" rel="lightbox[sample]" title="IMG_0324"><img src="./data/thumbnails/IMG_0324.png" /></a>
	<a href="./data/images/IMG_0345.jpg" rel="lightbox[sample]" title="IMG_0345"><img src="./data/thumbnails/IMG_0345.png" /></a>
	<a href="./data/images/IMG_0362.jpg" rel="lightbox[sample]" title="IMG_0362"><img src="./data/thumbnails/IMG_0362.png" /></a>
	<a href="./data/images/IMG_0626.jpg" rel="lightbox[sample]" title="IMG_0626"><img src="./data/thumbnails/IMG_0626.png" /></a>

	<a id="vlightbox" href="http://visuallightbox.com/">Thumbnail Gallery Creator by VisualLightbox.com</a>
	</div>
	<!-- End VisualLightBox.com BODY section -->
    </body>
</html>

Ich hab schon versucht mit dem target befehl den Frame zu sprengen, problem ist nur, dass es durch den befehl rel="lightbox[sample]" daran gebunden ist und somit nur im Frame öffnet, lösche ich diesen Befehl, öffnet sich das Bild zwar im Hauptframe, aber eben nur das bild ohne Lightbox Rahmen und Navigation.

Hoffe auf eure Hilfe.
 
Zuletzt bearbeitet:
Zuletzt bearbeitet:
Hast du dich an diese Anleitung gehalten?
iFrames: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.
Zum Vergrößern anklicken....

mfg Maik
 
Moin,

das liegt vermutlich daran, dass du nun die Quellcodes der Lytebox und der Lightbox vermischt hast, und du die beiden Lytebox-Dateien aus zwei unterschiedlichen Verzeichnisebenen einbindest - beide sollten aber in einem Verzeichnis liegen, und dürfen nicht gemeinsam in beide Dokumente eingebunden werden.

  • In foto.php wird die CSS-Datei geladen:
HTML: 
<link rel="stylesheet" href="http://nadja.sonnenburn.net/lytebox.css" type="text/css" media="screen" />

<!-- bzw. -->

<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
  • In galerie wird die JS-Datei geladen:
HTML: 
<script type="text/javascript" language="javascript" src="http://nadja.sonnenburn.net/lytebox.js"></script>

<!-- bzw. -->

<script type="text/javascript" language="javascript" src="../lytebox.js"></script>
So werden bei mir die Galerie-Bilder in der Lytebox angezeigt, und diese im Hauptdokument foto.php über dem iFrame aufgezogen.

mfg Maik
 
hmm entweder stell ich mich einfach zu dumm an oder es will einfach nicht klappen.
Ich behaupte jetzt mal, ich habs genau so gemacht wies du hier geschrieben hast, jedoch klappts immer noch nicht.
Könntest du nochmals einen Blick drauf werfen?

Grüsse Sheester
 
Zuletzt bearbeitet:
Ich muß einräumen, dass ich heute Morgen beim lokalen Testen in der Galerie absolute URLs für die Grafiken verwendet habe. Gut möglich, dass du den relativen Pfad anpassen mußt - aus:
HTML: 
<a href="./data/images/IMG_0452.jpg" rel="lytebox[sample]" title="IMG_0452">...</a>
wird:
HTML: 
<a href="./galerie/data/images/IMG_0452.jpg" rel="lytebox[sample]" title="IMG_0452">...</a>
Im Notfall gibst du den absoluten Pfad an:
HTML: 
<a href="http://nadja.sonnenburn.net/galerie/data/images/IMG_0452.jpg"  rel="lytebox[sample]" title="IMG_0452">...</a>


mfg Maik
 
Vielen Dank nun klappts mit den absoluten Links. Komisch das es anders nicht funktioniert.

Egal hauptsache es läuft.

Riesen Dank dir Maik für dein tolle Hilfe.
 
Hallo,

habe eure Unterhaltung gelesen. Maik kannst du sagen was genau an der lytebox anders ist das man das auch die visual lightbox übertragen könnte, da ich einen Teil aus der visual lightbox brauche den die lytebox nicht bietet. kann man den entscheidenden Teil vielleicht übertragen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück