OpenCart Community

Posted: **Mon Oct 05, 2009 3:32 am**

hello,

are there any alternatives such as lightbox, fancybox etc for opencart?

Posted: **Thu Oct 08, 2009 3:31 am**

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.

Posted: **Thu Oct 08, 2009 4:27 am**

... 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)

Posted: **Thu Oct 08, 2009 4:10 pm**

qphoria - any documentation on how this was done?

Posted: **Thu Oct 08, 2009 7:16 pm**

You'd have to ask imaginetech.

Posted: **Thu Oct 08, 2009 9:06 pm**

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.

Posted: **Thu Oct 08, 2009 9:45 pm**

There should be no use of the thickbox tag except for the thickbox itself so it "should" be safe to remove it.

Posted: **Thu Oct 08, 2009 10:39 pm**

Yeah you're right Qphoric, had my jquery and thickbox scrambled.

Posted: **Thu Oct 08, 2009 11:25 pm**

so when should thickbox be used if at all? please clarify

Posted: **Fri Oct 09, 2009 3:18 am**

never.. fancybox replaces thickbox

Posted: **Sun Nov 01, 2009 12:15 pm**

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?

Posted: **Sat Nov 07, 2009 12:11 am**

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?

Posted: **Sat Nov 07, 2009 12:30 am**

See my reply to your other post

Posted: **Sat Nov 07, 2009 12:43 am**

thanks!

Posted: **Sat Nov 07, 2009 2:15 am**

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!

Posted: **Sat Nov 14, 2009 2:05 am**

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.

Posted: **Wed Feb 03, 2010 5:24 am**

Look here http://www.opencartspanish.com/demo

Posted: **Wed Feb 03, 2010 5:27 am**

Yea, I added fancybox to one of my client's sites as well

also uses the "easing" option to make it bouncy

OpenCart Community

alternatives to thickbox?

alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?

Re: alternatives to thickbox?