Hallo, ich möchte mein Kontaktformular von shopware in der Einkaufswelt in einer Thickbox anzeigen lassen. hat wer ne Idee wie ich das am leichtesten anstellen kann? Gruß aus München
Ich habe jetzt in der header.tpl meines eigenen templates folgendes eingefügt <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/ThickBox.css'%7D"><link type="text/javascript" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/thickbox.js'%7D"> der Inhalt der ThickBox.css @charset "utf-8"; /\* ----------------------------------------------------------------------------------------------------------------\*/ /\* ----------\>\>\> global settings needed for thickbox \<\<\>\> thickbox specific link and font settings \<\<\>\> thickbox settings \<\< document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB\_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; } \* html #TB\_window { /\* ie6 hack \*/ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB\_window img#TB\_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; } #TB\_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } #TB\_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB\_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB\_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB\_title{ background-color:#e8e8e8; height:27px; } #TB\_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB\_ajaxContent.TB\_modal{ padding:15px; } #TB\_ajaxContent p{ padding:5px 0px 5px 0px; } #TB\_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /\* -height/2 0 0 -width/2 \*/ } \* html #TB\_load { /\* ie6 hack \*/ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB\_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } \* html #TB\_HideSelect { /\* ie6 hack \*/ position: absolute; height: expression(document.body.scrollHeight \> document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB\_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; \_margin-bottom:1px; }/\* CSS Document \*/ der Inhalt der thickbos.js [code]/* * Thickbox 3.1 - One Box To Rule Them All. * By Cody Lindley (http://www.codylindley.com) * Copyright © 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("
„); ("#TB\_overlay").click(tb\_remove); } }else{//all others if(document.getElementById("TB\_overlay") === null){ („body“).append(“
„); ("#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("
„);//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 = " [Next \>](#)"; } else { TB\_PrevCaption = TB\_TempArray[TB\_Counter].title; TB\_PrevURL = TB\_TempArray[TB\_Counter].href; TB\_PrevHTML = " [\< Prev](#)"; } } 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(" " + "
„+caption+“
" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key
„); ("#TB\_closeWindowButton").click(tb\_remove); if (!(TB\_PrevHTML === "")) { function goPrev(){ if((document).unbind(„click“,goPrev)){(document).unbind("click",goPrev);} (“#TB_window").remove(); $(„body“).append("
„); tb_show(TB_PrevCaption, TB_PrevURL, imageGroup); return false; } ("#TB\_prev").click(goPrev); } if (!(TB\_NextHTML === "")) { function goNext(){ (“#TB_window").remove(); $(„body“).append("
„); 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 ajaxContentW = TB_WIDTH - 30; ajaxContentH = TB_HEIGHT - 45; 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("
„+caption+“
close or Esc Key
"); }else{//iframe modal $("#TB\_overlay").unbind(); $("#TB\_window").append(""); } }else{// not an iframe, ajax if($("#TB\_window").css("display") != "block"){ if(params['modal'] != "true"){//ajax no modal $("#TB\_window").append("„+caption+“
close or Esc Key
„); }else{//ajax modal ("#TB\_overlay").unbind(); (“#TB_window").append("
„); } }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‘}); } } function tb_parseQuery ( query ) { var Params = {}; 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, ’ '); Params[key] = val; } return Params; } 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; } } [/code] wenn ich nun in meiner einkaufswelt die class=„thickbox“ vergebe tut sich nichts. hat wer von euch ne Idee oder hab ich irgendwas falsch? [color=red]EDIT: die scripte hab ich von http://codylindley.com/thickbox/[/color] Gruß aus München