Azharkamar.com

Customizing ThickBox in PrestaShop

Tutorials
7 Aug 2011
3 comments

ThickBox is a webpage UI dialog widget coded using the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content via AJAX in a hybrid modal window.

Unfortunately, ThickBox is no longer maintained by its developers so it is not recommended that you implement ThickBox on your website.

I wonder why the PrestaShop developers decided on ThickBox. Only when I started using PrestaShop, then I knew about ThickBox. Most of us were using the popular ones like Lightbox or Highslide right? Strangely, version 1.4 that just rolled out about a month ago is still using ThickBox…

Anyway, I’ll just share a bit on how to customize ThickBox – Increasing the size of the image, and positioning the ‘Close’ button to the top right. I’m running PrestaShop version 1.3.7.0.

Files to be Edited

There are 2 files that mainly control how ThickBox displays and works:

  • /js/jquery/thickbox-modified.js
  • /css/thickbox.css

Increasing the Image in ThickBox

Open thickbox-modified.js and search for this code below (around line 20):

 var x = pagesize[0] - 150; var y = pagesize[1] - 150; 

Then change ‘-150′ to a positive number for both variables. This requires some trial and error to get to the ideal size you want. For my case, ‘+100′ turned out well. The product image I uploaded has a width of 600 and height of 901 pixels. Honestly, I didn’t bother to figure out the math behind these calculations cause I got the size I wanted quick. Now, after getting your right size, you might notice that the ThickBox is exceeding the browser width but annoyingly unscrollable. To fix this, open css/thickbox.css and look for the #TB_closeWindow CSS selector. Simply change the position to absolute and you can now scroll the enlarged image.

Shifting the Close Button to the Top Right

Most ‘Close’ buttons are on the top area of a window but somehow for Thickbox, it’s seated at the bottom right. Such a sad place. So here’s what I did to move it to the place where he belongs.

Open up and look for this code:

$("#TB_window").append("<img id='TB_Image' src='"+url+"' width='"+imageWidth+
"' height='"+imageHeight+"' alt='"+caption+"'/>"+"<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='"+ThickboxI18nClose+"'>"+ThickboxI18nClose+"</a>
"+ThickboxI18nOrEscKey+"</div>");

You can see that this code will display the image first, then caption, and lastly the Close button.
So you’ll just have to move the Close button below the image tag and you’re almost done.

Here’s the modified code:

$("#TB_window").append("<div id='TB_closeWindow'><a href='#'
id='TB_closeWindowButton' title='"+ThickboxI18nClose+"'>x</a>
</div>"+"<img id='TB_Image' src='"+url+"' width='"+imageWidth
+"' height='"+imageHeight+"' alt='"+caption+"'/>"+
"<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>"
+TB_imageCount+TB_PrevHTML+TB_NextHTML+
"</div></div>");

You’ll notice that I changed the Close text to an ‘x’. Now we’ll need to tweak the CSS styles for the Close button.
Here’s the CSS stuff:

#TB_closeWindow{
	padding:0;
	float:right;
	width:100%;
	margin:5px -15px; //place it above the image
	position:absolute;
	z-index:1000; //set to a higher index than the image
	font-family:'comic Sans MS', arial;
	text-align:right;
	font-size:20px;
	font-weight:bold
}

Done! Good luck folks.

Author - Azhar Kamar
3 Comments Revolving around this Article
  1. ashish

    I am trying to insert an extra button on the thick box where I would be able to share it on facebook, any idea?

    Thank you.

  2. 4DECOR

    Thanks! I’m also interested with the solution, I’m working on 1.4.8.2

  3. murat

    Hi
    Thanks for the tuttorial about changing the thickbox, but it does not work for 1.4.6.2… do you have any solution for this?

    Thanks

Write a Comment! NOW! :)

Current ye@r *