[MOD] - Use Fancybox instead of Thickbox

[Qphoria]

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.

[The Alchemist]

Whats the difference of Fancy vs Thick?

[Qphoria]

Whats the difference of Fancy vs Thick?

www.fancybox.net/
http://jquery.com/demo/thickbox/

[Qphoria]

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.

[supernemito]

It works great!

[basics]

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

[Qphoria]

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

[VladZablotskyy]

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!

[OSWorX]

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: viewtopic.php?f=23&t=17427 (available only at http://osworx.net)

[robster]

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

[robster]

Any takers on this please?

robster

[HTMLCSSNoob]

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?f=23&t=11323&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.

[robster]

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

[teknology3d]

Tx guys!

[svabbi]

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.

[marvmen21]

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

[marvmen21]

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.

[jeroenzelle]

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

[jeroenzelle]

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.

[webpie it.]

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