Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

how to send parameters while using thickbox

Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#1: Oct 25 '09
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

Expand|Select|Wrap|Line Numbers
  1. <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>
  2.  
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
best answer - posted by Dormilich
Expand|Select|Wrap|Line Numbers
  1. a.href = "…&key=" + encodeURIComponent(document…);
I think you get what I mean…

Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,681
#2: Oct 25 '09

re: how to send parameters while using thickbox

Quote:

Originally Posted by neovantage View Post

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)
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#3: Oct 25 '09

re: how to send parameters while using thickbox

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's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,681
#4: Oct 25 '09

re: how to send parameters while using thickbox

Expand|Select|Wrap|Line Numbers
  1. a.href = "…&key=" + encodeURIComponent(document…);
I think you get what I mean…
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#5: Oct 25 '09

re: how to send parameters while using thickbox

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

in my case

Expand|Select|Wrap|Line Numbers
  1. <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>
  2.  
What will be the syntax
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#6: Oct 25 '09

re: how to send parameters while using thickbox

I tried to do like this but it is not working

Expand|Select|Wrap|Line Numbers
  1. <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>
  2.  
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,681
#7: Oct 25 '09

re: how to send parameters while using thickbox

Quote:

Originally Posted by neovantage View Post

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.
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#8: Oct 25 '09

re: how to send parameters while using thickbox

ok i got it now and thank you very much for this great help
Newbie
  
Join Date: Nov 2009
Posts: 2
#9: 3 Weeks Ago

re: how to send parameters while using thickbox

Hi neovantage,

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

Thanks,

Henry
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,681
#10: 3 Weeks Ago

re: how to send parameters while using thickbox

the solution is the same, just with the parameters.
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#11: 3 Weeks Ago

re: how to send parameters while using thickbox

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.

Expand|Select|Wrap|Line Numbers
  1. /*
  2.  * Thickbox 3.1 - One Box To Rule Them All.
  3.  * By Cody Lindley (http://www.codylindley.com)
  4.  * Copyright (c) 2007 cody lindley
  5.  * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
  6. */
  7. var tb_pathToImage = "images/loadingAnimation.gif";
  8. /*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/
  9. //on page load call tb_init
  10. $(document).ready(function(){   
  11.     tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
  12.     imgLoader = new Image();// preload image
  13.     imgLoader.src = tb_pathToImage;
  14. });
  15. //add thickbox to href & area elements that have a class of .thickbox
  16. function tb_init(domChunk){
  17.     $(domChunk).click(function(){
  18.     var t = this.title || this.name || null;
  19.     var a = this.href || this.alt;
  20.     var g = this.rel || false;
  21.     tb_show(t,a,g);
  22.     this.blur();
  23.     return false;
  24.     });
  25. }
  26. function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
  27.     try {
  28.         if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
  29.             $("body","html").css({height: "100%", width: "100%"});
  30.             $("html").css("overflow","hidden");
  31.             if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
  32.                 $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
  33.                 $("#TB_overlay").click(tb_remove);
  34.             }
  35.         }else{//all others
  36.             if(document.getElementById("TB_overlay") === null){
  37.                 $("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
  38.                 $("#TB_overlay").click(tb_remove);
  39.             }
  40.         }
  41.         if(tb_detectMacXFF()){
  42.             $("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
  43.         }else{
  44.             $("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
  45.         }
  46.         if(caption===null){caption="";}
  47.         $("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
  48.         $('#TB_load').show();//show loader
  49.         var baseURL;
  50.        if(url.indexOf("?")!==-1){ //ff there is a query string involved
  51.             baseURL = url.substr(0, url.indexOf("?"));
  52.        }else{ 
  53.                baseURL = url;
  54.        }
  55.        var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
  56.        var urlType = baseURL.toLowerCase().match(urlString);
  57.         if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
  58.             TB_PrevCaption = "";
  59.             TB_PrevURL = "";
  60.             TB_PrevHTML = "";
  61.             TB_NextCaption = "";
  62.             TB_NextURL = "";
  63.             TB_NextHTML = "";
  64.             TB_imageCount = "";
  65.             TB_FoundURL = false;
  66.             if(imageGroup){
  67.                 TB_TempArray = $("a[rel="+imageGroup+"]").get();
  68.                 for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
  69.                     var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
  70.                         if (!(TB_TempArray[TB_Counter].href == url)) {                        
  71.                             if (TB_FoundURL) {
  72.                                 TB_NextCaption = TB_TempArray[TB_Counter].title;
  73.                                 TB_NextURL = TB_TempArray[TB_Counter].href;
  74.                                 TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
  75.                             } else {
  76.                                 TB_PrevCaption = TB_TempArray[TB_Counter].title;
  77.                                 TB_PrevURL = TB_TempArray[TB_Counter].href;
  78.                                 TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
  79.                             }
  80.                         } else {
  81.                             TB_FoundURL = true;
  82.                             TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);                                            
  83.                         }
  84.                 }
  85.             }
  86.             imgPreloader = new Image();
  87.             imgPreloader.onload = function(){        
  88.             imgPreloader.onload = null;
  89.             // Resizing large images - orginal by Christian Montoya edited by me.
  90.             var pagesize = tb_getPageSize();
  91.             var x = pagesize[0] - 150;
  92.             var y = pagesize[1] - 150;
  93.             var imageWidth = imgPreloader.width;
  94.             var imageHeight = imgPreloader.height;
  95.             if (imageWidth > x) {
  96.                 imageHeight = imageHeight * (x / imageWidth); 
  97.                 imageWidth = x; 
  98.                 if (imageHeight > y) { 
  99.                     imageWidth = imageWidth * (y / imageHeight); 
  100.                     imageHeight = y; 
  101.                 }
  102.             } else if (imageHeight > y) { 
  103.                 imageWidth = imageWidth * (y / imageHeight); 
  104.                 imageHeight = y; 
  105.                 if (imageWidth > x) { 
  106.                     imageHeight = imageHeight * (x / imageWidth); 
  107.                     imageWidth = x;
  108.                 }
  109.             }
  110.             // End Resizing
  111.  
  112.             TB_WIDTH = imageWidth + 30;
  113.             TB_HEIGHT = imageHeight + 60;
  114.             $("#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>");
  115.             $("#TB_closeWindowButton").click(tb_remove);
  116.             if (!(TB_PrevHTML === "")) {
  117.                 function goPrev(){
  118.                     if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}
  119.                     $("#TB_window").remove();
  120.                     $("body").append("<div id='TB_window'></div>");
  121.                     tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
  122.                     return false;    
  123.                 }
  124.                 $("#TB_prev").click(goPrev);
  125.             }
  126.             if (!(TB_NextHTML === "")) {        
  127.                 function goNext(){
  128.                     $("#TB_window").remove();
  129.                     $("body").append("<div id='TB_window'></div>");
  130.                     tb_show(TB_NextCaption, TB_NextURL, imageGroup);                
  131.                     return false;    
  132.                 }
  133.                 $("#TB_next").click(goNext);
  134.  
  135.             }
  136.             document.onkeydown = function(e){     
  137.                 if (e == null) { // ie
  138.                     keycode = event.keyCode;
  139.                 } else { // mozilla
  140.                     keycode = e.which;
  141.                 }
  142.                 if(keycode == 27){ // close
  143.                     tb_remove();
  144.                 } else if(keycode == 190){ // display previous image
  145.                     if(!(TB_NextHTML == "")){
  146.                         document.onkeydown = "";
  147.                         goNext();
  148.                     }
  149.                 } else if(keycode == 188){ // display next image
  150.                     if(!(TB_PrevHTML == "")){
  151.                         document.onkeydown = "";
  152.                         goPrev();
  153.                     }
  154.                 }    
  155.             };
  156.  
  157.             tb_position();
  158.             $("#TB_load").remove();
  159.             $("#TB_ImageOff").click(tb_remove);
  160.             $("#TB_window").css({display:"block"}); //for safari using css instead of show
  161.             };
  162.  
  163.             imgPreloader.src = url;
  164.         }else{//code to show html
  165.             var queryString = url.replace(/^[^\?]+\??/,'');
  166.             var params = tb_parseQuery( queryString );
  167.  
  168.             //TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
  169.             //TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
  170.             var indexno=params['index'];
  171. //======================== start here is my customised code
  172.             TB_WIDTH = 530; //defaults to 630 if no paramaters were added to URL
  173.             TB_HEIGHT = 580; //defaults to 440 if no paramaters were added to URL
  174.             ajaxContentW = (TB_WIDTH - 30);
  175.             ajaxContentH = (TB_HEIGHT - 45);
  176.             if(url.indexOf("?")!==-1){ //ff there is a query string involved
  177.                 baseURL = url.substr(0, url.indexOf("?"));
  178.                }
  179.             url = "";
  180.             url = baseURL;
  181.             if(url=="http://ranaposter.websitedevelopmentsolution.com/preview.php"){
  182.                 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;
  183.             }else{
  184.                 url = url+"?height="+ajaxContentH+"&;width="+ajaxContentW;
  185.             }
  186. //============ end here is my customised code
  187.             if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window        
  188.                     urlNoQuery = url.split('TB_');
  189.                     $("#TB_iframeContent").remove();
  190.                     if(params['modal'] != "true"){//iframe no modal
  191.                         $("#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>");
  192.                     }else{//iframe modal
  193.                     $("#TB_overlay").unbind();
  194.                         $("#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>");
  195.                     }
  196.             }else{// not an iframe, ajax
  197.                     if($("#TB_window").css("display") != "block"){
  198.                         if(params['modal'] != "true"){//ajax no modal
  199.                         $("#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>");
  200.                         }else{//ajax modal
  201.                         $("#TB_overlay").unbind();
  202.                         $("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");    
  203.                         }
  204.                     }else{//this means the window is already up, we are just loading new content via ajax
  205.                         $("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
  206.                         $("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
  207.                         $("#TB_ajaxContent")[0].scrollTop = 0;
  208.                         $("#TB_ajaxWindowTitle").html(caption);
  209.                     }
  210.             }
  211.  
  212.             $("#TB_closeWindowButton").click(tb_remove);
  213.  
  214.                 if(url.indexOf('TB_inline') != -1){    
  215.                     $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
  216.                     $("#TB_window").unload(function () {
  217.                         $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
  218.                     });
  219.                     tb_position();
  220.                     $("#TB_load").remove();
  221.                     $("#TB_window").css({display:"block"}); 
  222.                 }else if(url.indexOf('TB_iframe') != -1){
  223.                     tb_position();
  224.                     if($.browser.safari){//safari needs help because it will not fire iframe onload
  225.                         $("#TB_load").remove();
  226.                         $("#TB_window").css({display:"block"});
  227.                     }
  228.                 }else{
  229.                     $("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
  230.                         tb_position();
  231.                         $("#TB_load").remove();
  232.                         tb_init("#TB_ajaxContent a.thickbox");
  233.                         $("#TB_window").css({display:"block"});
  234.                     });
  235.                 }
  236.  
  237.         }
  238.  
  239.         if(!params['modal']){
  240.             document.onkeyup = function(e){     
  241.                 if (e == null) { // ie
  242.                     keycode = event.keyCode;
  243.                 } else { // mozilla
  244.                     keycode = e.which;
  245.                 }
  246.                 if(keycode == 27){ // close
  247.                     tb_remove();
  248.                 }    
  249.             };
  250.         }
  251.  
  252.     } catch(e) {
  253.         //nothing here
  254.     }
  255. }
  256.  
  257. //helper functions below
  258. function tb_showIframe(){
  259.     $("#TB_load").remove();
  260.     $("#TB_window").css({display:"block"});
  261. }
  262.  
  263. function tb_remove() {
  264.      $("#TB_imageOff").unbind("click");
  265.     $("#TB_closeWindowButton").unbind("click");
  266.     $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
  267.     $("#TB_load").remove();
  268.     if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
  269.         $("body","html").css({height: "auto", width: "auto"});
  270.         $("html").css("overflow","");
  271.     }
  272.     document.onkeydown = "";
  273.     document.onkeyup = "";
  274.     return false;
  275. }
  276. function tb_position() {
  277. $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
  278.     if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
  279.         $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
  280.     }
  281. }
  282. //======================== start here is my customised function
  283. function tb_parseQuery ( query ) {
  284.     var Params = {};
  285.     var lastid;
  286.        if ( ! query ) {return Params;}// return empty object
  287.        var Pairs = query.split(/[;&]/);
  288.        for ( var i = 0; i < Pairs.length; i++ ) {
  289.         var KeyVal = Pairs[i].split('=');
  290.           if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
  291.           var key = unescape( KeyVal[0] );
  292.           var val = unescape( KeyVal[1] );
  293.           val = val.replace(/\+/g, ' ');
  294.         if(key=="index"){
  295.               Params[key] = val;
  296.           }else{
  297.             Params[key] = val;
  298.           }
  299.    }
  300.    return Params;
  301. }
  302. //======================== end here is my customised function
  303. function tb_getPageSize(){
  304.     var de = document.documentElement;
  305.     var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
  306.     var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
  307.     arrayPageSize = [w,h];
  308.     return arrayPageSize;
  309. }
  310. function tb_detectMacXFF() {
  311.   var userAgent = navigator.userAgent.toLowerCase();
  312.   if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
  313.     return true;
  314.   }
  315. }
  316.  
Newbie
  
Join Date: Nov 2009
Posts: 2
#12: 3 Weeks Ago

re: how to send parameters while using thickbox

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's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,681
#13: 3 Weeks Ago

re: how to send parameters while using thickbox

Quote:

Originally Posted by henryanthony View Post

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

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

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,585 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved