Page 1 of 2
[MOD] - Use Fancybox instead of Thickbox
Posted: Fri Feb 19, 2010 6:17 am
by 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.
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Feb 19, 2010 7:27 am
by The Alchemist
Whats the difference of Fancy vs Thick?
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Feb 19, 2010 10:19 am
by Qphoria
The Alchemist wrote:Whats the difference of Fancy vs Thick?
www.fancybox.net/
http://jquery.com/demo/thickbox/
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Feb 19, 2010 11:46 am
by nzjollyroger
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.
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Mar 26, 2010 11:53 am
by supernemito
It works great!
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Mar 26, 2010 9:05 pm
by 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" />
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Mar 26, 2010 9:18 pm
by Qphoria
Yea, thats why I specifically mention 1.3.0 but you got the right idea
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri May 28, 2010 12:46 am
by 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!
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Mon Jul 19, 2010 5:15 pm
by OSWorX
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)
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Sun Nov 07, 2010 8:14 am
by 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
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Tue Nov 09, 2010 8:34 pm
by robster
Any takers on this please?
robster
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Thu Nov 11, 2010 9:28 am
by HTMLCSSNoob
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.
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Fri Nov 12, 2010 1:07 am
by 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
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Sun Nov 28, 2010 12:25 pm
by teknology3d
Tx guys!
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Thu Feb 10, 2011 7:06 am
by 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.
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Wed Mar 02, 2011 5:09 am
by marvmen21
I followed the steps but fancybox is not working for me, images open in a plain page
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Wed Mar 02, 2011 5:15 am
by marvmen21
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.
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Wed Mar 02, 2011 6:23 am
by jeroenzelle
I cannot get it working for the newest opencart version. Can some-one tell me if I have to change anything?
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Wed Mar 02, 2011 6:36 am
by jeroenzelle
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.
Re: [MOD] - Use Fancybox instead of Thickbox
Posted: Sun May 08, 2011 4:34 am
by 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