Post by Qphoria » Fri Feb 19, 2010 6:17 am

To use Fancybox instead of Thickbox (1.3.4 or greater):


1. DOWNLOAD: v1.3.0 version of fancybox

2. Unzip "fancybox" folder from the zip file and upload it to your FTP location under:
"catalog/view/javascript/jquery"

Now you should have a folder path like this:
catalog/view/javascript/jquery/fancybox/*.*

There should be 4 js files and 1 css file and many png files inside the folder.

3. EDIT: catalog/view/theme/YOURTHEME/template/common/header.tpl

4. FIND:

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/thickbox/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/thickbox/thickbox.css" />
5. REPLACE WITH:

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.0.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
	$("a.thickbox").attr('rel','group');
	$("a.thickbox img").parent().fancybox({
		'overlayShow' : true,
		'speedIn' : 600,
		'speedOut' : 500,
		'transitionIn': 'elastic',
		'transitionOut': 'elastic',
		'easingIn' : 'easeOutBack',
		'easingOut' : 'easeInBack'
	}); 		
});
</script>

That is all that needs to happen. Now all images that were previously thickbox should be fancyboxed and have the left/right arrows for going through all additional images.

thx to joop for the corrections.

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by The Alchemist » Fri Feb 19, 2010 7:27 am

Whats the difference of Fancy vs Thick?

User avatar
Active Member

Posts

Joined
Sun Nov 22, 2009 11:04 am

Post by Qphoria » Fri Feb 19, 2010 10:19 am

The Alchemist wrote:Whats the difference of Fancy vs Thick?
www.fancybox.net/
http://jquery.com/demo/thickbox/

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by nzjollyroger » Fri Feb 19, 2010 11:46 am

got this working on 1.3.2,
made all the changes q was talking about except that they needed to be applied to the layout.tpl instead.
Last edited by Qphoria on Mon Mar 01, 2010 9:03 am, edited 2 times in total.
Reason: You've been here long enough to know how to use the code tags. Use them!

New member

Posts

Joined
Mon Nov 16, 2009 5:26 am

Post by supernemito » Fri Mar 26, 2010 11:53 am

It works great!

Newbie

Posts

Joined
Fri Mar 26, 2010 10:52 am

Post by basics » Fri Mar 26, 2010 9:05 pm

Works great! Just be mindful that the jquery versions have now been updated so if you download version v1.3.1 version of fancybox, you will have to update the version numbers in the code
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.0.css" media="screen" />
should read
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.1.css" media="screen" />

........................................................................
http://www.basicsdesignerclothing.co.uk
........................................................................


User avatar
Newbie

Posts

Joined
Fri Mar 26, 2010 4:44 pm

Post by Qphoria » Fri Mar 26, 2010 9:18 pm

Yea, thats why I specifically mention 1.3.0 but you got the right idea

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by VladZablotskyy » Fri May 28, 2010 12:46 am

Qphoria,

I noticed that on your website you have implemented a popup using the fancybox. I believe it now has an announcement about your modules compatibility with the latest version of the OC.... Is there a way/module to do that?

Thanks in advance!

New member

Posts

Joined
Wed Oct 07, 2009 3:47 am

Post by OSWorX » Mon Jul 19, 2010 5:15 pm

VladZablotskyy wrote:Qphoria,

I noticed that on your website you have implemented a popup using the fancybox. I believe it now has an announcement about your modules compatibility with the latest version of the OC.... Is there a way/module to do that?

Thanks in advance!
Here is the module: http://forum.opencart.com/viewtopic.php?f=23&t=17427 (available only at http://osworx.net)

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by robster » Sun Nov 07, 2010 8:14 am

I know that this thread is a bit old now but tonight I added this nice effect to my site and it is looks good. However the pop up terms and conditions no longer ... err.... pop up! Instead it opens a plain web page.

How can I fix this please?

I am using 1.4.9.1

Thanks

robster

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by robster » Tue Nov 09, 2010 8:34 pm

Any takers on this please?

robster

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by HTMLCSSNoob » Thu Nov 11, 2010 9:28 am

robster wrote:Any takers on this please?

robster
Hey robster,

I was having the same problem as you. If you go to this thread http://forum.opencart.com/viewtopic.php ... 23&p=61729, and follow steps 7, 8, and 9 then the fancybox will work for your terms & conditions, however, the text within the fancybox is center aligned despite the fact this is in the code..

Code: Select all

<style type="text/css">
div#fancybox-inner { text-align: left; }
</style>
If you figure out how to get the text left-aligned let me know.

Plus, there is probably an easier way to get this done because if you already use the fancybox MOD, and then you follow steps 7, 8, and 9 from the link above, you are basically going to have 2 code sets for fancybox. I don't think it's necessary to have two though I'm not sure...I haven't been able to get it to work trying to merge both code sets together. If you figure that one out as well let me know.

Active Member

Posts

Joined
Fri Aug 20, 2010 7:53 am

Post by robster » Fri Nov 12, 2010 1:07 am

Hi and thanks for the pointer.

I did 7, 8 and 9 and it all works perfectly - text is to the left on mine! :)

www dot g18crafts dot com

Cheers

robster

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by teknology3d » Sun Nov 28, 2010 12:25 pm

Tx guys!

New member

Posts

Joined
Tue Nov 16, 2010 8:33 am

Post by svabbi » Thu Feb 10, 2011 7:06 am

I have changed to Fancybox and it works fine. Now I need to add a link on the product page so that a single image will pop up in a fancybox. You can see the page here: www.hippo.is

I have added this to product.tpl:

<tr>
<td><a id="image" class="thickbox" href="catalog/view/theme/darkwood/image/size_women.png">
Stærðartafla</a><br />
</td>
</tr>

But this is not working for me. It only opens the image in the same window. Any help will be great.

Thanks.

New member

Posts

Joined
Wed Sep 23, 2009 6:50 pm

Post by marvmen21 » Wed Mar 02, 2011 5:09 am

I followed the steps but fancybox is not working for me, images open in a plain page

You want to thank me for my time! :) Click here to donate


Active Member

Posts

Joined
Tue Nov 09, 2010 4:54 am

Post by marvmen21 » Wed Mar 02, 2011 5:15 am

marvmen21 wrote:I followed the steps but fancybox is not working for me, images open in a plain page
My bad, it was due to permissions! Solved. :)

You want to thank me for my time! :) Click here to donate


Active Member

Posts

Joined
Tue Nov 09, 2010 4:54 am

Post by jeroenzelle » Wed Mar 02, 2011 6:23 am

I cannot get it working for the newest opencart version. Can some-one tell me if I have to change anything?

Newbie

Posts

Joined
Mon Jul 23, 2007 3:28 pm

Post by jeroenzelle » Wed Mar 02, 2011 6:36 am

jeroenzelle wrote:I cannot get it working for the newest opencart version. Can some-one tell me if I have to change anything?
Ok got it working! Just be care which code you replace in the header.

The newer opencart versions got other code in the header.

Newbie

Posts

Joined
Mon Jul 23, 2007 3:28 pm

Post by webpie it. » Sun May 08, 2011 4:34 am

What code in the headre did you replace for your latest version?

I ma guessing you are using 1.4.9.3 or 4?

What fancybox version did you use, it now has updated a lot since Qs original post.

thnaks

Chris

Regards

Chris


Active Member

Posts

Joined
Mon Jan 31, 2011 7:28 pm
Who is online

Users browsing this forum: No registered users and 53 guests