Customizing ThickBox in PrestaShop

7 Aug 2011

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

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): [js] var x = pagesize[0] – 150; var y = pagesize[1] – 150; [/js] 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>

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’>"

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:

margin:5px -15px; //place it above the image
z-index:1000; //set to a higher index than the image
font-family:’comic Sans MS’, arial;

Done! Good luck folks.

Author - Azhar Kamar