# Thickbox in die Einkaufswelt einfügen

**URL:** <https://forum.shopware.com/t/thickbox-in-die-einkaufswelt-einfugen/19742>\
**Category:** Shopware 3.5\
**Tags:** themes--design\
**Created:** [14. April 2014 um 15:37 UTC](https://forum.shopware.com/t/thickbox-in-die-einkaufswelt-einfugen/19742 "2014-04-14T15:37:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![freier-Techniker](https://avatars.discourse-cdn.com/v4/letter/f/c2a13f/32.png) [@freier-Techniker](https://forum.shopware.com/u/freier-Techniker)\
**Post date:** [14. April 2014 um 15:37 UTC](https://forum.shopware.com/t/thickbox-in-die-einkaufswelt-einfugen/19742/1 "2014-04-14T15:37:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![freier-Techniker](https://avatars.discourse-cdn.com/v4/letter/f/c2a13f/32.png) [@freier-Techniker](https://forum.shopware.com/u/freier-Techniker)\
**Post date:** [15. April 2014 um 12:58 UTC](https://forum.shopware.com/t/thickbox-in-die-einkaufswelt-einfugen/19742/2 "2014-04-15T12:58:35Z")

</div>

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](http://www.codylindley.com)) \* Copyright © 2007 cody lindley \* Licensed under the MIT License: [http://www.opensource.org/licenses/mit-license.php](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 = "&nbsp;&nbsp;[Next \\>](#)"; } else { TB\_PrevCaption = TB\_TempArray[TB\_Counter].title; TB\_PrevURL = TB\_TempArray[TB\_Counter].href; TB\_PrevHTML = "&nbsp;&nbsp;[\\< 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+"]()" + "  
„+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/](http://codylindley.com/thickbox/)[/color] Gruß aus München