jQuery Layer - direkten Link abfangen

M

mgraf

Erfahrenes Mitglied
Hi,
und zwar verwende ich eine Lightbox-Alternative um gewisse Links in einem neuen Layer zu öffnen - funktioniert auch soweit.
Aber wenn ich den Ajax-Link direkt in der Adressleiste angebe, öffnet sich natürlich auch die Seite - ohne Lightbox, auch verständlich.

Aber:
Kann ich diese (mehrere) URLs abfangen, auf die Startseite weiterleiten und dort die Lightbox mit dem richtigen (Ajax-)Link öffnen?

lg & danke & schönes WE :-)
michi
 
Den Seiten, die man nicht direkt aufrufen können soll, würde ich ein JavaScript verpassen, dass einfach weiterleitet und einen hash mitgibt. Auf der eigentlichen Seite prüfst du beim Laden, ob ein hash da ist und wenn ja, öffnest du die Lightbox ( z.B. $('a:first').click() ).

Ich werde mich mal kurz an ein Beispiel setzen. Aber sollte hoffentlich auch so klar sein.

Edit: Beispiel

Es gibt zwei Dateien. lightbox_host.html (enthält die Links und öffnet die Lightbox) und lightbox_content.html (der Inhalt, der nicht direkt aufgerufen werden soll. Davon kann es mehrere geben.)

Anstelle eines Lightbox Skripts lade ich zur Demonstration die Seite einfach in dein DIV.

lightbox_host.html

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Link in Lightbox öffnen</title>
</head>

<body>
	<div id="container"></div>
	
	<div>
		<a href="http://www.google.com">Google</a>
		<a href="lightbox_content.html" rel="lightbox">In Lightbox</a>
		<a href="http://www.amazon.com">Amazon</a>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	//Damit der Inhalt weis, dass er von einem Lightbox aufgerufen wurde.
	window.host = true;
	
	$(function() {
		//Lightbox dummy
		var container = $('#container');
		
		//Alle links, die sich in Lighbox öffnen sollen
		var links = $('a[rel=lightbox]').click(function(e) {
			e.preventDefault();
			
			container.load(this.href);
		});
		
		//Falls ein hash übergeben wurde, sofort Lightbox öffnen
		if(location.hash.length > 1) {
			var hash = location.hash.substr(1);
			
			container.load(unescape(hash));
		}
	});
	/* ]]> */
	</script>
</body>

</html>


lightbox_content.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Inhalt</title>
</head>

<body>
	<script type="text/javascript">
	/* <![CDATA[ */
	//Wurde von der anderen Seite gesetzt, damit wir wissen, ob wir in einer Lightbox sind.
	if(!window.host) {
		//Umleitung
		window.location = 'lightbox_host.html#' + escape(location.href);
	}
	/* ]]> */
	</script>
	
	<div>Der Inhalt hier soll nur in lightbox aufrufbar sein!</div>
</body>

</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück