By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,492 Members | 1,210 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,492 IT Pros & Developers. It's quick & easy.

how to send parameters while using thickbox

100+
P: 245
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
Oct 25 '09 #1

✓ answered by Dormilich

Expand|Select|Wrap|Line Numbers
  1. a.href = "…&key=" + encodeURIComponent(document…);
I think you get what I mean…

Share this Question
Share on Google+
12 Replies


Dormilich
Expert Mod 5K+
P: 8,639
@neovantage
you have to create the complete href value through javascript in the first place. (the href value is not parsed by javascript)
Oct 25 '09 #2

100+
P: 245
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
Oct 25 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. a.href = "…&key=" + encodeURIComponent(document…);
I think you get what I mean…
Oct 25 '09 #4

100+
P: 245
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
Oct 25 '09 #5

100+
P: 245
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.  
Oct 25 '09 #6

Dormilich
Expert Mod 5K+
P: 8,639
@neovantage
of course not. I said you have to create the complete URL by Javascript. anything inside href="…" is just plain text.
Oct 25 '09 #7

100+
P: 245
ok i got it now and thank you very much for this great help
Oct 25 '09 #8

P: 2
Hi neovantage,

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

Thanks,

Henry
Nov 4 '09 #9

Dormilich
Expert Mod 5K+
P: 8,639
the solution is the same, just with the parameters.
Nov 4 '09 #10

100+
P: 245
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.  
Nov 4 '09 #11

P: 2
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!!!
Nov 4 '09 #12

Dormilich
Expert Mod 5K+
P: 8,639
@henryanthony
it has been too early in the morning, when I wrote that.
Nov 4 '09 #13

Post your reply

Sign in to post your reply or Sign up for a free account.