[TIP] Colorbox to replace ThickBox

[MrBaseball34]

To replace ThickBox as your large image viewer on the Product page (when you click the View Full Size link),
do this:
1. Download the Colorbox files here: http://colorpowered.com/colorbox/latest

2. Extract to your shop's js directory.
Move the colorbox.css file located in the /js/colorbox/example1 directory to your shop's css directory, (/css/colorbox.css).
Move the jquery.colorbox.js and jquery.colorbox-min.js files to your shop's js directory,(/js/jquery.colorbox.js and /js/jquery.colorbox-min.js. Move the
directory /colorbox/example1/images to your shop's css directory (/css/images)
You can delete the other exampleX directories if you don't need them
Then...

3. Modify product.php like this (around line 78)

$css_files = array(
//  __PS_BASE_URI__.'css/thickbox.css' => 'screen',
 __PS_BASE_URI__.'css/colorbox.css' => 'screen'
);

$js_files = array(
//  __PS_BASE_URI__.'js/jquery/thickbox-modified.js',
 __PS_BASE_URI__.'js/jquery/jquery.idTabs.modified.js',
 __PS_BASE_URI__.'js/jquery/jquery.scrollto.js',
 __PS_BASE_URI__.'js/jquery/jquery.serialScroll.js',
 _THEME_JS_DIR_.'tools.js',
 _THEME_JS_DIR_.'product.js'
);

4. In header.tpl, place this code:

<script type="text/javascript" src="{$base_dir}js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
 var my_jQuery = jQuery.noConflict(true);
</script>

ABOVE this line:

<script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script>

5. In product.tpl, find the line below:

<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-modified.js"></script>

and modify it to this:

{*<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-modified.js"></script>*}
<script type="text/javascript">
// <![CDATA[
{literal}
$(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   my_jQuery("a[rel='cbox']").colorbox();
});
{/literal}
//]]>
</script>

6. Find this line:

{if $have_image}
{l s='View full size'}
{/if}

and modify it to this:

{if $have_image}
id}-{$image.id_image}-thickbox.jpg" 
        rel="cbox" title="" 
        class="span_link">{l s='View full size'}
 {*{l s='View full size'} *}
{/if}

Now, when the user clicks on View Full Size, it will use Colorbox .vs Thickbox.

I'm still trying to track down just how ThickBox is used elsewhere. If you have any ideas, please fill me in so I can get totally rid of that piece of outdated garbage.

[ChrisLNZ]

thanks was looking for a better way

[MrBaseball34]

No, I will not use MooTools plugins because they would be too much work. Figuring this out was hard enough.

[vive]

Which version of Prestashop? I'm trying the 1.3.7 and it still fails.

[galactic]

how to replace Fancybox with Colorbox?

[Norwegian Rat]

<p>

To replace ThickBox as your large image viewer on the Product page (when you click the View Full Size link),<br />

do this:<br />

1. Download the Colorbox files here: http://colorpowered.com/colorbox/latest<br />

<br />

2. Extract to your shop's js directory.<br />

Move the colorbox.css file located in the /js/colorbox/example1 directory to your shop's css directory, (/css/colorbox.css).<br />

Move the jquery.colorbox.js and jquery.colorbox-min.js files to your shop's js directory,(/js/jquery.colorbox.js and /js/jquery.colorbox-min.js. Move the<br />

directory /colorbox/example1/images to your shop's css directory (/css/images)<br />

You can delete the other exampleX directories if you don't need them<br />

Then...<br />

<br />

3. Modify product.php like this (around line 78)<br />

<br />
$css_files = array(<br />
// __PS_BASE_URI__.'css/thickbox.css' => 'screen',<br />
__PS_BASE_URI__.'css/colorbox.css' => 'screen'<br />
);<br />
<br />
$js_files = array(<br />
// __PS_BASE_URI__.'js/jquery/thickbox-modified.js',<br />
__PS_BASE_URI__.'js/jquery/jquery.idTabs.modified.js',<br />
__PS_BASE_URI__.'js/jquery/jquery.scrollto.js',<br />
__PS_BASE_URI__.'js/jquery/jquery.serialScroll.js',<br />
_THEME_JS_DIR_.'tools.js',<br />
_THEME_JS_DIR_.'product.js'<br />
);<br />

<br />

<br />

4. In header.tpl, place this code:<br />

<br />
<script type="text/javascript" src="{$base_dir}js/jquery.colorbox-min.js"></script><br />
<script type="text/javascript"><br/>  var my_jQuery = jQuery.noConflict(true);<br/></script><br />

<br />

ABOVE this line:<br />

<br />
<script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script><br />

<br />

<br />

5. In product.tpl, find the line below:<br />

<br />
<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-modified.js"></script><br />

<br />

and modify it to this:<br />

<br />
{*<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-modified.js"></script>*}<br />
<script type="text/javascript"><br/>// <![CDATA[<br/>{literal}<br/>$(document).ready(function(){<br/>    //Examples of how to assign the ColorBox event to elements<br/>    my_jQuery("a[rel='cbox']").colorbox();<br/>});<br/>{/literal}<br/>//]]><br/></script><br />

<br />

<br />

6. Find this line:<br />

<br />
{if $have_image}</p>
<p>*}<br />
{/if}<br />

<br />

<br />

Now, when the user clicks on View Full Size, it will use Colorbox .vs Thickbox.<br />

<br />

I'm still trying to track down just how ThickBox is used elsewhere. If you have any ideas, please fill me in so I can get totally rid of that piece of outdated garbage.<br />

</p>

<p> </p>

<p>Nice post! If you run Linux you can always use the "GREP" command for finding strings or files in a directory.</p>

<p> </p>

<p>( grep -r -i thickbox.css /path/to/prestashopfolder/ -Rin )</p>

<ul>

<li><span class="span_link" id="view_full_size">{l s='View full size'}</span></li>

<br />

{/if}<br />

[/code]<br />

and modify it to this:<br />

<br />

{if $have_image}<br />

<li><a>id}-{$image.id_image}-thickbox.jpg"<br />

rel="cbox" title=""<br />

class="span_link">{l s='View full size'}</a></li>

<br />

{*

<li><span class="span_link" id="view_full_size">{l s='View full size'}</span></li>

</ul>

 

[Ash.Krish]

To replace ThickBox as your large image viewer on the Product page (when you click the View Full Size link),

do this:

1. Download the Colorbox files here: http://colorpowered....colorbox/latest

 

2. Extract to your shop's js directory.

Move the colorbox.css file located in the /js/colorbox/example1 directory to your shop's css directory, (/css/colorbox.css).

Move the jquery.colorbox.js and jquery.colorbox-min.js files to your shop's js directory,(/js/jquery.colorbox.js and /js/jquery.colorbox-min.js. Move the

directory /colorbox/example1/images to your shop's css directory (/css/images)

You can delete the other exampleX directories if you don't need them

Then...

 

3. Modify product.php like this (around line 78)

$css_files = array(
//  __PS_BASE_URI__.'css/thickbox.css' => 'screen',
 __PS_BASE_URI__.'css/colorbox.css' => 'screen'
);

$js_files = array(
//  __PS_BASE_URI__.'js/jquery/thickbox-modified.js',
 __PS_BASE_URI__.'js/jquery/jquery.idTabs.modified.js',
 __PS_BASE_URI__.'js/jquery/jquery.scrollto.js',
 __PS_BASE_URI__.'js/jquery/jquery.serialScroll.js',
 _THEME_JS_DIR_.'tools.js',
 _THEME_JS_DIR_.'product.js'
);

 

4. In header.tpl, place this code:

<script type="text/javascript" src="{$base_dir}js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
 var my_jQuery = jQuery.noConflict(true);
</script>

ABOVE this line:

<script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script>

 

5. In product.tpl, find the line below:

<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-modified.js"></script>

and modify it to this:

{*<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-modified.js"></script>*}
<script type="text/javascript">
// <![CDATA[
{literal}
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
my_jQuery("a[rel='cbox']").colorbox();
});
{/literal}
//]]>
</script>

 

6. Find this line:

{if $have_image}
 [list]
[*]{l s='View full size'}
{/if}

and modify it to this:

{if $have_image}
 [*][url=""]id}-{$image.id_image}-thickbox.jpg"
	 rel="cbox" title=""
	 class="span_link">{l s='View full size'}[/url]
{*[*]{l s='View full size'}
*}
{/if}

 

Now, when the user clicks on View Full Size, it will use Colorbox .vs Thickbox.

 

I'm still trying to track down just how ThickBox is used elsewhere. If you have any ideas, please fill me in so I can get totally rid of that piece of outdated garbage.

thanks baseball for your kind tuts...

kindly update this tuts to latest version of PS...it will b great for all....

 

FYI: i wont able to find any thing on product.php in main directory or classes/product.php....please gimme a solution for this...

 

Many thanks

Ash

[kelotz]

thanks, it works!

[silentRun]

thanks, it works!

 

Which version of prestashop are you using ? Thanks