Page 1 of 1
alternatives to thickbox?
Posted: Mon Oct 05, 2009 3:32 am
by yegga
hello,
are there any alternatives such as lightbox, fancybox etc for opencart?
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 3:31 am
by readyman
There's superbox... it's still jquery though. It allows you to use iframes and other external content as well.
I'm not sure if lightbox has already added this type of functionality already though.
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 4:27 am
by Qphoria
... it's still jquery though.
You say it like its a bad thing
imaginetech has successfully implemented "Fancybox", which is another jquery-based alternative
http://demo2.imaginetech.com.au/index.p ... duct_id=48 (click the main image)
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 4:10 pm
by yegga
qphoria - any documentation on how this was done?
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 7:16 pm
by Qphoria
You'd have to ask imaginetech.
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 9:06 pm
by imaginetech
Hi Yegga,
Grab the fancybox package.
Extract and upload to your catalog/view/javascript/YOURFOLDER/ directory.
Open catalog/view/theme/YOURTHEME/template/common/layout.tpl and insert the following in the <head></head> tags:
Code: Select all
<script type="text/javascript" src="catalog/view/YOURFOLDER/jquery/jquery.fancybox/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/YOURFOLDER/jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/YOURFOLDER/jquery.fancybox.css" />
Make sure to include the EASING script for the neat bouncing effect.
Open catalog/view/theme/YOURTHEME/template/product/product.tpl and add this to the bottom:
Code: Select all
<script type="text/javascript"><!--
$(document).ready(function() {
$("a#product_image").fancybox({
'overlayShow' : false,
'zoomSpeedIn' : 600,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
});
//--></script>
And finally, in product.tpl wherever you find the link tags surrounding the actual img tags change the id and insert the rel attribute as follows:
id="product_image" rel="product_image"
The id change will link fancybox to the image and the rel insert will group the main and additional images so that you can flip through them.
Hmmm, clear as mud? I think that makes sense, let me know if it doesn't.
Also, can I suggest one thing, don't remove thickbox, leave it there as I assume it's used in the add to cart animations and possibly other things.
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 9:45 pm
by Qphoria
There should be no use of the thickbox tag except for the thickbox itself so it "should" be safe to remove it.
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 10:39 pm
by imaginetech
Yeah you're right Qphoric, had my jquery and thickbox scrambled.
Re: alternatives to thickbox?
Posted: Thu Oct 08, 2009 11:25 pm
by yegga
so when should thickbox be used if at all? please clarify
Re: alternatives to thickbox?
Posted: Fri Oct 09, 2009 3:18 am
by Qphoria
never.. fancybox replaces thickbox
Re: alternatives to thickbox?
Posted: Sun Nov 01, 2009 12:15 pm
by RalphMW
as far as i read thickbox manual, it should already have gallery support...
although when i try to use rel=... it doesnt work, leading in a loading bar...
did someone get thickbox gallery to work?
Re: alternatives to thickbox?
Posted: Sat Nov 07, 2009 12:11 am
by lucyvanpelt
what about the box that a lot of stores have now...mojozoom/jqzoom? where you see an image on the left, and then there's the zoom of it that shows up on the right on top of the product details. anyone know how to implement this?
Re: alternatives to thickbox?
Posted: Sat Nov 07, 2009 12:30 am
by Qphoria
See my reply to your other post
Re: alternatives to thickbox?
Posted: Sat Nov 07, 2009 12:43 am
by lucyvanpelt
thanks!
Re: alternatives to thickbox?
Posted: Sat Nov 07, 2009 2:15 am
by bugsjr
I'm a little noob...

This is not working for me... I have done all the steps from above... Is there a way to give me an archive with the files that i need to replace?
Thanks!
Re: alternatives to thickbox?
Posted: Sat Nov 14, 2009 2:05 am
by MunDissa
I can't configure in 1.3.4, you could give me a idea, anybody

Thank's...
Nevermind, i read fix.
Instead of using:
catalog\view\theme\YOURTHEME\template\common\LAYOUT.TPL
use
catalog\view\theme\YOURTHEME\template\common\HEADER.TPL
Code: Select all
<script type="text/javascript" src="catalog/view/javascript/jquery/NOMEDASUAPASTAFANCYBOX/jquery.fancybox-1.2.5.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/NOMEDASUAPASTAFANCYBOX/jquery.fancybox-1.2.5.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/NOMEDASUAPASTAFANCYBOX/jquery.fancybox-1.2.5.css" media="screen"/>
and in:
catalog\view\theme\YOURTHEME\template\product\PRODUCT.TPL
before BOTTOM insert:
Code: Select all
<script type="text/javascript">
$(document).ready(function() {
$("a.newimage").fancybox({
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500,
'overlayShow' : false
});
});
</script>
still in "catalog\view\theme\YOURTHEME\template\product\PRODUCT.TPL"
look for:
class="thickbox" and changes for class="
newimage" rel="
newimage"
You can change the word "newimage" for another one.
Version of Fancybox, code/javascript and where to insert the codes have changed.
Thank you and please forgive my English, I'm from Brazil.
Re: alternatives to thickbox?
Posted: Wed Feb 03, 2010 5:24 am
by juanper
Re: alternatives to thickbox?
Posted: Wed Feb 03, 2010 5:27 am
by Qphoria
Yea, I added fancybox to one of my
client's sites as well
also uses the "easing" option to make it bouncy
