Allgemeine Frage zur Thickbox

nicky89

Gesperrt
Hallo,
ich nutze die thickbox v.3.1 um php content auf meiner seite darzustellen.
Die Größe der thickbox kann man ja beim linkaufrauf mit &width=&height= definieren.

Das Problem: Ich möchte nun die Größe der bereits geöffneten thickbox verändern.

Beispiel:
Die thickbox öffnet sich mit nem link drin, klickt man auf den Link soll nicht nur das Ziel des Links verfolgt werden, sondern sich auch die Größe der thickbox ändern.

so wie man es beispielsweise von der lightbox kennt, die sich der bildgröße dynamisch anpasst. Leider stell ich keine bilder sondern content da.
Da bleibt mir nur die thickbox.

Ist das mit der thickbox auch möglich ?



Hab schon überlegt und gedacht das ich ich die thickbox einfach bei klick auf den link schließe, dann location.reload() und <body onload()> und schwupp geht die thickbox mit neuen Inhalt und neuer Größe auf.
Würde gehen, sieht aber überhaupt nicht schön aus
An Aus An Aus *g
Son dynamischer schicker Übergang im "lightbox-style" wär natürlich schicker :)

Freu mich über jeden Tipp

Lieben Dank schonmal jetzt
Eure nicky
 
Zuletzt bearbeitet:
Moin nicky,

suche mal in der thickbox.js folgende Passage:
Code:
if(url.indexOf('TB_inline') != -1){	
					$("#TB_ajaxContent").append($('#' + params['inlineId']).children());
					$("#TB_window").unload(function () {
						$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
					});

und ersetze sie hiermit
Code:
if(url.indexOf('TB_inline') != -1){	
				  try{$('#' + TB_BUFFER).append( $("#TB_ajaxContent").children() ); }catch(e){}
				  $("#TB_ajaxContent").children().remove();
				  TB_BUFFER=params['inlineId'];
					$("#TB_ajaxContent").append($('#' + params['inlineId']).children());
					
					$("#TB_window").unload(function () {
					  try{$('#' + TB_BUFFER).append( $("#TB_ajaxContent").children() );delete TB_BUFFER; }catch(e){
						$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
						}
					});

Hab es jetzt nicht intensiv getestet, aber es scheint zu funktionieren...die aktuelle thickbox wird resized.
Aufrufen tust du das ganze mit den üblichen Parametern.
Anmerkung: diese Änderung betrifft nur Links mit #TB_inline...hörte sich so an, als ob es dir nur darum ging:)
 
hey cool, danke für die supi hilfe, dachte ja schon fast da kommt nix mehr :)

Hab das mal probiert doch bin irgendwie zu doof dafür....
Wollte die nächste Seite (die die mit ner größeren thickbox angezeigt werden soll) aus der thickbox heraus mit

PHP:
http://localhost/index2.php#TB_inline?option=com_camapps&task=broadcast&secid=16843512912013731262960102475&height=700&width=700&inlineId=myOnPageContent
öffnen .

antwort von Joomla: Diese Seite existert nicht.
Ohne #TB_inline gehts natürlich ....

Hab ich den Anker falsch gesetzt ?
Hab mir auch nohchmal die Seite
http://jquery.com/demo/thickbox/
im punkto Inline Content zu Gemüte geführt, doch es finuzt nic so wie gehofft :)

Hab ich was grobes übersehen bzw. falsch gemacht ?

Lieben Gruß
eure Nicky
 
Inline-Content funktioniert nur mit Inhalt der aktuellen Seite....wenn du eine andere Seite in der thickbox darstellen willst, ist das IFramed Content(TB_iframe=true).....

Anmerkung: diese Änderung betrifft nur Links mit #TB_inline...hörte sich so an, als ob es dir nur darum ging
:)
 
Hallo tutorials.de Community.,
der Thread ist ja nun schon etwas älter, aber ich bin in der Sache leider noch nicht weiter :(

Gibt es noch jemanden der ne Idee hat wie man das lösen könnte ?
Wäre echt supi :)


Gruß
Eure Nicky
 
Moin nicky ;-]


Mit Bewertungen fängt man Mäuse :)

Dies direkt am Anfang von tb_show() einfügen:
Code:
if(self!=top  && url.indexOf('TB_iframe') != -1)
 {
    var queryString = url.replace(/^[^\?]+\/,'');
    var params = tb_parseQuery( queryString );
      top.TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
      top.TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
      top.$('#TB_iframeContent').css({width:(top.TB_WIDTH-1)+'px',height:(top.TB_HEIGHT + 12)+'px'});
      top.$('#TB_window').css({width:(top.TB_WIDTH)+'px',height:(top.TB_HEIGHT)+'px'});
      top.tb_position();location.replace(url);
  }

Die Links im iFrame müssen genauso aufgebaut sein wie bei "iFramed Content" beschrieben. Und in den Seiten mit den Links müssen auch jquery.js und thickbox.js eingebunden sein.
Natürlich müssen die Seiten im iFRame sich unter derselben (Sub)domain aufhalten, sonst geht da eh nix ;)

Um die "modale" Thickbox hab ich mich dabei nicht gekümmert....nur zur Info :suspekt:
 
Also ich hab jetz deinen Code eingebaut doch leider führt dies nur dazu das sich die thickbox gar nimmer öffnet :confused:

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



	try {
	
if(self!=top  && url.indexOf('TB_iframe') != -1)
 {
    var queryString = url.replace(/^[^\?]+\/,'');
    var params = tb_parseQuery( queryString );
      top.TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
      top.TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
      top.$('#TB_iframeContent').css({width:(top.TB_WIDTH-1)+'px',height:(top.TB_HEIGHT + 12)+'px'});
      top.$('#TB_window').css({width:(top.TB_WIDTH)+'px',height:(top.TB_HEIGHT)+'px'});
      top.tb_position();location.replace(url);
  }






		if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
			$j("body","html").css({height: "100%", width: "100%"});
			$j("html").css("overflow","hidden");
			if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
				$j("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
				$j("#TB_overlay").click(tb_remove);
			}
		}else{//all others
			if(document.getElementById("TB_overlay") === null){
				$j("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
				$j("#TB_overlay").click(tb_remove);
			}
		}
		
		if(tb_detectMacXFF()){
			$j("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
		}else{
			$j("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
		}
		
		if(caption===null){caption="";}
		$j("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
		$j('#TB_load').show();//show loader
		
		var baseURL;
	   if(url.indexOf("?")!==-1){ //ff there is a query string involved
			baseURL = url.substr(0, url.indexOf("?"));
	   }else{ 
	   		baseURL = url;
	   }
	   
	   var urlString = /\.jpg$j|\.jpeg$j|\.png$j|\.gif$j|\.bmp$j/;
	   var urlType = baseURL.toLowerCase().match(urlString);

		if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
				
			TB_PrevCaption = "";
			TB_PrevURL = "";
			TB_PrevHTML = "";
			TB_NextCaption = "";
			TB_NextURL = "";
			TB_NextHTML = "";
			TB_imageCount = "";
			TB_FoundURL = false;
			if(imageGroup){
				TB_TempArray = $j("a[@rel="+imageGroup+"]").get();
				for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
					var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
						if (!(TB_TempArray[TB_Counter].href == url)) {						
							if (TB_FoundURL) {
								TB_NextCaption = TB_TempArray[TB_Counter].title;
								TB_NextURL = TB_TempArray[TB_Counter].href;
								TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
							} else {
								TB_PrevCaption = TB_TempArray[TB_Counter].title;
								TB_PrevURL = TB_TempArray[TB_Counter].href;
								TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
							}
						} else {
							TB_FoundURL = true;
							TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);											
						}
				}
			}

			imgPreloader = new Image();
			imgPreloader.onload = function(){		
			imgPreloader.onload = null;
				
			// Resizing large images - orginal by Christian Montoya edited by me.
			var pagesize = tb_getPageSize();
			var x = pagesize[0] - 150;
			var y = pagesize[1] - 150;
			var imageWidth = imgPreloader.width;
			var imageHeight = imgPreloader.height;
			if (imageWidth > x) {
				imageHeight = imageHeight * (x / imageWidth); 
				imageWidth = x; 
				if (imageHeight > y) { 
					imageWidth = imageWidth * (y / imageHeight); 
					imageHeight = y; 
				}
			} else if (imageHeight > y) { 
				imageWidth = imageWidth * (y / imageHeight); 
				imageHeight = y; 
				if (imageWidth > x) { 
					imageHeight = imageHeight * (x / imageWidth); 
					imageWidth = x;
				}
			}
			// End Resizing
			
			TB_WIDTH = imageWidth + 30;
			TB_HEIGHT = imageHeight + 60;
			$j("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>"); 		
			
			$j("#TB_closeWindowButton").click(tb_remove);
			
			if (!(TB_PrevHTML === "")) {
				function goPrev(){
					if($j(document).unbind("click",goPrev)){$j(document).unbind("click",goPrev);}
					$j("#TB_window").remove();
					$j("body").append("<div id='TB_window'></div>");
					tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
					return false;	
				}
				$j("#TB_prev").click(goPrev);
			}
			
			if (!(TB_NextHTML === "")) {		
				function goNext(){
					$j("#TB_window").remove();
					$j("body").append("<div id='TB_window'></div>");
					tb_show(TB_NextCaption, TB_NextURL, imageGroup);				
					return false;	
				}
				$j("#TB_next").click(goNext);
				
			}

			document.onkeydown = function(e){ 	
				if (e == null) { // ie
					keycode = event.keyCode;
				} else { // mozilla
					keycode = e.which;
				}
				if(keycode == 27){ // close
					tb_remove();
				} else if(keycode == 190){ // display previous image
					if(!(TB_NextHTML == "")){
						document.onkeydown = "";
						goNext();
					}
				} else if(keycode == 188){ // display next image
					if(!(TB_PrevHTML == "")){
						document.onkeydown = "";
						goPrev();
					}
				}	
			};
			
			tb_position();
			$j("#TB_load").remove();
			$j("#TB_ImageOff").click(tb_remove);
			$j("#TB_window").css({display:"block"}); //for safari using css instead of show
			};
			
			imgPreloader.src = url;
		}else{//code to show html
			
			var queryString = url.replace(/^[^\?]+\/,'');
			var params = tb_parseQuery( queryString );

			TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
			TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
			ajaxContentW = TB_WIDTH - 30;
			ajaxContentH = TB_HEIGHT - 45;
			
			if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window		
					urlNoQuery = url.split('TB_');
					$j("#TB_iframeContent").remove();
					if(params['modal'] != "true"){//iframe no modal
						$j("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' > </iframe>");
					}else{//iframe modal
					$j("#TB_overlay").unbind();
						$j("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'> </iframe>");
					}
			}else{// not an iframe, ajax
					if($j("#TB_window").css("display") != "block"){
						if(params['modal'] != "true"){//ajax no modal
						$j("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
						}else{//ajax modal
						$j("#TB_overlay").unbind();
						$j("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");	
						}
					}else{//this means the window is already up, we are just loading new content via ajax
						$j("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
						$j("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
						$j("#TB_ajaxContent")[0].scrollTop = 0;
						$j("#TB_ajaxWindowTitle").html(caption);
					}
			}
					
			$j("#TB_closeWindowButton").click(tb_remove);
			
				if(url.indexOf('TB_inline') != -1){	
					$j("#TB_ajaxContent").append($j('#' + params['inlineId']).children());
					$j("#TB_window").unload(function () {
						$j('#' + params['inlineId']).append( $j("#TB_ajaxContent").children() ); // move elements back when you're finished
					});
					tb_position();
					$j("#TB_load").remove();
					$j("#TB_window").css({display:"block"}); 
				}else if(url.indexOf('TB_iframe') != -1){
					tb_position();
					if($j.browser.safari){//safari needs help because it will not fire iframe onload
						$j("#TB_load").remove();
						$j("#TB_window").css({display:"block"});
					}
				}else{
					$j("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
						tb_position();
						$j("#TB_load").remove();
						tb_init("#TB_ajaxContent a.thickbox");
						$j("#TB_window").css({display:"block"});
					});
				}
			
		}

		if(!params['modal']){
			document.onkeyup = function(e){ 	
				if (e == null) { // ie
					keycode = event.keyCode;
				} else { // mozilla
					keycode = e.which;
				}
				if(keycode == 27){ // close
					tb_remove();
				}	
			};
		}
		
	} catch(e) {
		//nothing here
	}
}

Ich dank dir für deine Bemühungen Sven, hoffe das klappt irgendwie noch :)
 
Noch näher an den Anfang bitte :suspekt:

Code:
function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
if(self!=top  && url.indexOf('TB_iframe') != -1)
 {
    var queryString = url.replace(/^[^\?]+\/,'');
	  var params = tb_parseQuery( queryString );
      top.TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
      top.TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
      top.$('#TB_iframeContent').css({width:(top.TB_WIDTH-1)+'px',height:(top.TB_HEIGHT + 12)+'px'});
      top.$('#TB_window').css({width:(top.TB_WIDTH)+'px',height:(top.TB_HEIGHT)+'px'});
      top.tb_position();location.replace(url);
  }
	try {
 
Zurück