how to send parameters while using thickbox

[neovantage]

Hi,
I am working on an image to process it with different ways/options given in the page.

My page name is cart and it has an uploaded image having thumbnail view. When i click on that thumbnail it opens in a highfi technology thickbox. In my cart there are more than 1 images which can be process/manuplate with different options given in the cart.

Now what i want is that i need to send some extra values as a parameters so that i can process the image.

Ofcourse i am sending values through query string using "a" tag as suggested by thickbox. i am having problems while picking up that values on run time as i am unable to make a formatted query string.

Here is my code

<a href="preview.php?height=580&amp;width=500&amp;pic=<?=$pathes[$i];?>&amp;cat_id=document.forms[0].cat_id<?=$i;?>.value&amp;format=<?=$fpd['prod_stock'];?>&amp;&adjust=0&amp;ladjust=1&amp;effect=document.forms[0].effekt<?=$i;?>.value" class="thickbox"><img src="imagecreation.php?pic=<?=$pathes[$i];?>&produkt=30%20x%2020%20cm&adjust=0&ladjust=1" border="0" alt="" /></a>

when i get the value of document.forms[0].cat_id<?=$i;?> .value on the other page it gives
document.forms[0].cat_id0.value instead if it's value. How can i get it's value?



kindly help me out to sort out my problem

[Dormilich]

when i get the value of document.forms[0].cat_id<?=$i;?> .value on the other page it gives document.forms[0].cat_id0.value instead if it's value. How can i get it's value?

you have to create the complete href value through javascript in the first place. (the href value is not parsed by javascript)

[neovantage]

And how can i do that (means how can i complete href value) as i am not as much experience in this. Kindly help me out please

[Dormilich]

[I]a[/I].href = "…&key=" + encodeURIComponent(document…);

I think you get what I mean…

[neovantage]

nah still not sir, Still i need more ellaboration in detail i mean detail syntax of it. Pleaseeee

in my case

<a href="preview.php?height=580&amp;width=500&amp;pic=<?=$pathes[$i];?>&amp;cat_id=document.forms[0].cat_id<?=$i;?>.value&amp;format=<?=$fpd['prod_stock'];?>&amp;&adjust=0&amp;ladjust=1&amp;effect=document.forms[0].effekt<?=$i;?>.value" class="thickbox"><img src="imagecreation.php?pic=<?=$pathes[$i];?>&produkt=30%20x%2020%20cm&adjust=0&ladjust=1" border="0" alt="" /></a>

What will be the syntax

[neovantage]

I tried to do like this but it is not working

<a href="preview.php?height=580&amp;width=500&amp;pic=<?=$pathes[$i];?>&amp;cat_id="+encodeURIComponent(document.forms[0].cat_id<?=$i;?>.value)+"&amp;format=<?=$fpd['prod_stock'];?>&amp;&adjust=0&amp;ladjust=1&amp;effect=document.forms[0].effekt<?=$i;?>.value" class="thickbox"><img src="imagecreation.php?pic=<?=$pathes[$i];?>&produkt=30%20x%2020%20cm&adjust=0&ladjust=1" border="0" alt="" /></a>

[Dormilich]

I tried to do like this but it is not working

of course not. I said you have to create the complete URL by Javascript. anything inside href="…" is just plain text.

[neovantage]

ok i got it now and thank you very much for this great help

[henryanthony]

Hi neovantage,

I am also trying to pass parameters. Can you please post your solution with syntax.

Thanks,

Henry

[Dormilich]

the solution is the same, just with the parameters.

[neovantage]

No it's bit different if you want to send the parameters having dynamic values after loading the page.

I customised the thickbox javascript and go through n see how it parse the parameters. Then i break it's structure and concatenate my parameter values which i will have after loading my page.

*Note: One point you must keep in mind while you were concatinating the parameters and that is none of the concatenate variables have empty values or missing objects in the document from where you have to get the values.

/*
 * Thickbox 3.1 - One Box To Rule Them All.
 * By Cody Lindley (http://www.codylindley.com)
 * Copyright (c) 2007 cody lindley
 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/
var tb_pathToImage = "images/loadingAnimation.gif";
/*!!!!!!!!!!!!!!!!! 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
			if(document.getElementById("TB_overlay") === null){
				$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
				$("#TB_overlay").click(tb_remove);
			}
		}
		if(tb_detectMacXFF()){
			$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
		}else{
			$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
		}
		if(caption===null){caption="";}
		$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
		$('#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$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
	   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 = $("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;
			$("#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>");
			$("#TB_closeWindowButton").click(tb_remove);
			if (!(TB_PrevHTML === "")) {
				function goPrev(){
					if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}
					$("#TB_window").remove();
					$("body").append("<div id='TB_window'></div>");
					tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
					return false;	
				}
				$("#TB_prev").click(goPrev);
			}
			if (!(TB_NextHTML === "")) {		
				function goNext(){
					$("#TB_window").remove();
					$("body").append("<div id='TB_window'></div>");
					tb_show(TB_NextCaption, TB_NextURL, imageGroup);				
					return false;	
				}
				$("#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();
			$("#TB_load").remove();
			$("#TB_ImageOff").click(tb_remove);
			$("#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
			var indexno=params['index'];
//======================== start here is my customised code
			TB_WIDTH = 530; //defaults to 630 if no paramaters were added to URL
			TB_HEIGHT = 580; //defaults to 440 if no paramaters were added to URL
			ajaxContentW = (TB_WIDTH - 30);
			ajaxContentH = (TB_HEIGHT - 45);
			if(url.indexOf("?")!==-1){ //ff there is a query string involved
				baseURL = url.substr(0, url.indexOf("?"));
		   	}
			url = "";
			url = baseURL;
			if(url=="http://ranaposter.websitedevelopmentsolution.com/preview.php"){
				url = url+"?height="+ajaxContentH+"&;width="+ajaxContentW+"&pic="+params['pic']+"&cat_id="+document.getElementById('cat_id'+indexno).value+"&format="+params['format']+"&adjust="+document.getElementById('adjustment'+indexno).value+"&ladjust="+document.getElementById('ladjust'+indexno).value+"&effect="+document.getElementById('effekt'+indexno).value+"&rsize="+document.getElementById('rsize'+indexno).value;
			}else{
				url = url+"?height="+ajaxContentH+"&;width="+ajaxContentW;
			}
//============ end here is my customised code
			if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window		
					urlNoQuery = url.split('TB_');
					$("#TB_iframeContent").remove();
					if(params['modal'] != "true"){//iframe no modal
						$("#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
					$("#TB_overlay").unbind();
						$("#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($("#TB_window").css("display") != "block"){
						if(params['modal'] != "true"){//ajax no modal
						$("#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
						$("#TB_overlay").unbind();
						$("#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
						$("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
						$("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
						$("#TB_ajaxContent")[0].scrollTop = 0;
						$("#TB_ajaxWindowTitle").html(caption);
					}
			}
					
			$("#TB_closeWindowButton").click(tb_remove);
			
				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
					});
					tb_position();
					$("#TB_load").remove();
					$("#TB_window").css({display:"block"}); 
				}else if(url.indexOf('TB_iframe') != -1){
					tb_position();
					if($.browser.safari){//safari needs help because it will not fire iframe onload
						$("#TB_load").remove();
						$("#TB_window").css({display:"block"});
					}
				}else{
					$("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
						tb_position();
						$("#TB_load").remove();
						tb_init("#TB_ajaxContent a.thickbox");
						$("#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
	}
}

//helper functions below
function tb_showIframe(){
	$("#TB_load").remove();
	$("#TB_window").css({display:"block"});
}

function tb_remove() {
 	$("#TB_imageOff").unbind("click");
	$("#TB_closeWindowButton").unbind("click");
	$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
	$("#TB_load").remove();
	if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
		$("body","html").css({height: "auto", width: "auto"});
		$("html").css("overflow","");
	}
	document.onkeydown = "";
	document.onkeyup = "";
	return false;
}
function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
		$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
	}
}
//======================== start here is my customised function
function tb_parseQuery ( query ) {
	var Params = {};
	var lastid;
   	if ( ! query ) {return Params;}// return empty object
   	var Pairs = query.split(/[;&]/);
   	for ( var i = 0; i < Pairs.length; i++ ) {
		var KeyVal = Pairs[i].split('=');
      	if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
      	var key = unescape( KeyVal[0] );
      	var val = unescape( KeyVal[1] );
      	val = val.replace(/\+/g, ' ');
		if(key=="index"){
	  		Params[key] = val;
	  	}else{
			Params[key] = val;
	  	}
   }
   return Params;
}
//======================== end here is my customised function
function tb_getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	arrayPageSize = [w,h];
	return arrayPageSize;
}
function tb_detectMacXFF() {
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
    return true;
  }
}

[henryanthony]

Dormilich, unfortunately, I don't understand your answer. I am not so good with JS but I will work on trying to understand it.

neovantage, I will study the code you provided. I should be able to figure out what I need to do.

THANK YOU BOTH FOR YOUR QUICK REPLY!!!

[Dormilich]

Dormilich, unfortunately, I don't understand your answer.

it has been too early in the morning, when I wrote that.