✔ Suchergebnisse in Lightview anzeigen

[Vectormaster]

Hallo,
ich will auf meiner Homepage eine Suche realisieren. Das ganze soll so aussehen, dass man einen Suchbegriff eingibt, dann öffnet sich das „Lightviewscript“ . Das Lightviewscript findet Ihr hier: http://www.nickstakenburg.com/projects/lightview/
In der durch das Script erzeugen „Lightbox“, sollen dann die Ergebnisse der Suche angezeigt werden.

Mein Problem besteh darin, dass ich nicht weis, wie ich es schaffe, dass wenn ich das Formular absende, das Script öffne und so die Ergebnisse anzeige. Die Suche wird gestartet indem ich das Suchscript folgendermaßen aufrufe: http://meinurl.de/suche/suche.php?query=suchbegriff. Suchbegriff wird dann durch das eingegebene Wort getauscht. Wie dass gehen soll weis ich auch noch nicht so genau. Wenn jemand eine Idee hätte währe ich auch darüber sehr dankbar.

Das Formular sieht so aus:

<form id="suche" name="suche" method="post" action="#">
           <input type="text" name="textfield" id="textfield" onfocus="this.value=''" />
           <input type="submit" name="button" id="button" value="&gt;&gt;" />
 </form>

Ich hoffe Ihr könnt mir so einigermaßen folgen.

MfG Vectormaster

 

[Sven Mintel]

Moin,

für soetwas ist thickbox besser geeignet, du kannst dort innerhalb eines iframes in der BOX HTML-Dokumente aufrufen lassen, also bspw. deine Ergebnisseite.

 

[Vectormaster]

Hi, danke für Deine Antwort. Meines Wissens geht das mit dem Script von mir auch.

 

[Gumbo]

Erzeuge beim Absenden (onsubmit-Ereignis) einen solchen Schaukasten mit Inline Frame und weise dem Formular diesen Frame als Ziel zu.

 

[Vectormaster]

Danke für Deine Antwort. Wie muss dass dann aussehen? So funktioniert es nicht:

<form id="suche" name="suche" method="post" action="#" onsubmit="Lightview.show({ href: 'http://www.google.com', rel: 'iframe', options: { width: 800, height: 500 }});">
           <input type="text" name="textfield" id="textfield" onfocus="this.value=''" />
           <input type="submit" name="button" id="button" value="&gt;&gt;" />
          </form>

Wenn ich jedoch im Browser auf zurück klicke, dann ist die Box plötzlich da. Hat jemand ne Idee wie ich das Problem lösen kann?

 

[Gumbo]

Probier mal Folgendes:

<form … onsubmit="Lightview.show({ href: 'about:blank', rel: 'iframe', options: { width: 800, height: 500 }});this.target=document.getElementById('lightviewContent').name">

 

[Vectormaster]

@ Gumbo:
Nein Funktioniert schon wider nicht . So langsam hab ich keine Hoffnung mehr. Ich habe auf der Herstellerseite folgendes gefunden: http://www.nickstakenburg.com/forum/comments.php?DiscussionID=405&page=1#Item_0. Ich selbst kann es jedoch nicht wirklich deuten.

@ Sven Mintel:
Wie würde ich das ganze mit der Thickbox lösen? Weil ich hab mir das ganze nochmal überlegt und bin zum Entschluss gekommen, dass es nicht unbedingt das Lightviewscript sein muss. Hauptsächlich soll es ja funktionieren und die Thickbox lässt sich ja sicherlich auch so modifizieren, dass sie so ähnlich aussieht wie das „Erzeugnis“ des Lightviewscriptes.

 

[Sven Mintel]

Wie es mit thickbox geht, ist hier beschrieben:
http://codylindley.com/thickboxforum/comments.php?DiscussionID=408&page=1#Item_0

Übrigens ist LightView nicht gratis, dies nur zur Info, weil man es recht schnell übersehen kann.
Hilft vielleicht etwas bei der Entscheidung, welches Skript man nun nehmen sollte.

 

[Vectormaster]

Danke für Deine Antwort. Habe mir das Script schon gekauft. Kostet ja nur 3EUR. Ich werd mir Deinen Lösungsvorschlag sofort ansehen und dann umgehend berichten.

Soo…
Also ich hab das Script mal herunter geladen und installiert, GENAU so wie es in der Anleitung steht. Leider funktioniert es nicht =( ich habe keine Ahnung was ich falschmache Hier mal der Quellcode der Seite mit dem Formular und ein Teil des Quellcodes der thinkbox.js, den ich nach der Anleitung im Forum (Ich habe die Lösung von „ay“ vom 2. Februar 2007, also aus Post 7 von oben verwendet.) veränder muss.

Link zum Forum mit der Anleitung

Quellcode der HTML Seite mit Formular:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="scripte/thinkbox/jquery.js"></script>
<script type="text/javascript" src="scripte/thinkbox/thickbox.js"></script>
<link rel="stylesheet" type="text/css" href="scripte/thinkbox/thickbox.css">
</head>
<body>
<form id="myform" name="myform" target="TB_iframeContent" class="thickbox" method="post" action="test.html?keepThis=true&TB_iframe=true&height=300&width=500" title="Suchen">
<input type="text" name="subegriff" size="20" id="subegriff">
<input type="submit" value="Send">
</form>
</body>
</html>

Code der thinkbox.js:

… /*!! edit below this line at your own risk !!*/

//on page load call tb_init
$(document).ready(function(){   
	tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
	imgLoader = new Image();// preload image
	imgLoader.src = tb_pathToImage;
});

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
	$(domChunk).click(function(){
	var t = this.title || this.name || null;
	var a = this.href || this.alt;
	var g = this.rel || false;
	tb_show(t,a,g);
	this.blur();
	return false;
	});
}

function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link

	try {
		if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
			$("body","html").css({height: "100%", width: "100%"});
			$("html").css("overflow","hidden");
			if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
				$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
				$("#TB_overlay").click(tb_remove);
			}
		}else{//all others …

Ich habe jetzt schon mindestens 1ne h rumprobiert aber ich bekomme es einfach nicht hin. So langsam bin ich der Meinung dass ich dafür wohl zu doof bin.

MfG Vectormaster

 

[Sven Mintel]

Hier mal nen (derweil nur per GET) funktionierendes Beispiel:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=UTF-8"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-01-28" />
<title>thickbox example</title>

<script type="text/javascript" 
        src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript" 
        src="http://jquery.com/demo/thickbox/thickbox-code/thickbox.js"></script>
<link   rel="stylesheet"  type="text/css" media="screen"
        href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" />

</head>
<body>

<form title="Suche" 
      target="TB_iframeContent" 
      method="get" 
      class="thickbox" 
      action="http://www.google.de/search?keepThis=true&TB_iframe=true&height=300&width=500" >
  
  <input name="q">
  <input type="submit">

</form>
<script type="text/javascript">

$("form.thickbox").submit(function(){
var u = String(this.action).match(/^([^\?]*)\??([^\?]*)$/);
var a = u[1]+'?'+
            $.param($.merge($(this).children("input[type!=submit]"), []))+'&'+u[2];
var t = this.title+': Ergebnisse';
tb_show(t,a,false);
this.blur();
return false;
});

//-->
</script>
</body>
</html>

An den verwendeten Bibliotheken muss nichts verändert werden.
Übermittelt werden alle enthalten inputs ausser dem Submit-Button.

Was das Formular-Element betrifft, die Attribute target und class müssen bleiben wie sie sind, bei title kommt das hin, was bei der Thickbox als Überschrift gewünscht ist.
Bei action gilt alles das, was in der Thickbox-Doku zum iframed Content gesagt wurde.