Community Forums

[MOD] - Use Fancybox instead of Thickbox

Community created contributions & mods for OpenCart 1.x

[MOD] - Use Fancybox instead of Thickbox

Postby Qphoria » Thu Feb 18, 2010 5:17 pm

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.
ImageImage
Donate!|OpenCart Basics|GeoZones
Help me get more development cloud storage - Click Here to get DropBox
User avatar
Qphoria
Administrator
 
Posts: 19127
Joined: Mon Jul 21, 2008 2:02 pm
Donate to Qphoria

Re: [MOD] - Use Fancybox instead of Thickbox

Postby The Alchemist » Thu Feb 18, 2010 6:27 pm

Whats the difference of Fancy vs Thick?
User avatar
The Alchemist
 
Posts: 304
Joined: Sat Nov 21, 2009 10:04 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby Qphoria » Thu Feb 18, 2010 9:19 pm

The Alchemist wrote:Whats the difference of Fancy vs Thick?


www.fancybox.net/
http://jquery.com/demo/thickbox/
ImageImage
Donate!|OpenCart Basics|GeoZones
Help me get more development cloud storage - Click Here to get DropBox
User avatar
Qphoria
Administrator
 
Posts: 19127
Joined: Mon Jul 21, 2008 2:02 pm
Donate to Qphoria

Re: [MOD] - Use Fancybox instead of Thickbox

Postby nzjollyroger » Thu Feb 18, 2010 10:46 pm

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 Sun Feb 28, 2010 8:03 pm, edited 2 times in total.
Reason: You've been here long enough to know how to use the code tags. Use them!
nzjollyroger
 
Posts: 54
Joined: Sun Nov 15, 2009 4:26 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby supernemito » Thu Mar 25, 2010 10:53 pm

It works great!
supernemito
 
Posts: 6
Joined: Thu Mar 25, 2010 9:52 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby basics » Fri Mar 26, 2010 8:05 am

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
basics
 
Posts: 10
Joined: Fri Mar 26, 2010 3:44 am

Re: [MOD] - Use Fancybox instead of Thickbox

Postby Qphoria » Fri Mar 26, 2010 8:18 am

Yea, thats why I specifically mention 1.3.0 but you got the right idea
ImageImage
Donate!|OpenCart Basics|GeoZones
Help me get more development cloud storage - Click Here to get DropBox
User avatar
Qphoria
Administrator
 
Posts: 19127
Joined: Mon Jul 21, 2008 2:02 pm
Donate to Qphoria

Re: [MOD] - Use Fancybox instead of Thickbox

Postby VladZablotskyy » Thu May 27, 2010 11: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!
VladZablotskyy
 
Posts: 25
Joined: Tue Oct 06, 2009 2:47 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby OSWorX » Mon Jul 19, 2010 4:15 am

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: viewtopic.php?f=23&t=17427 (available only at http://osworx.net )
EU-Buttonlösung EU-Cookie-Solution OpenCart Rechtskonform
LiveSupport (Chat) Deutsches OpenCart / OCIE Forum
http://osworx.net :: Installation & Update Services for OpenCart, Custom Development
Individual modules - Payment modules - Shipping modules
Dt. Sprachpaket - Sofortüberweisung
User avatar
OSWorX
Global Moderator
 
Posts: 2679
Joined: Mon Jan 11, 2010 9:52 am
Location: Austria

Re: [MOD] - Use Fancybox instead of Thickbox

Postby robster » Sat Nov 06, 2010 7:14 pm

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
robster
 
Posts: 399
Joined: Tue Jul 13, 2010 7:08 am
Location: North Yorkshire, UK

Re: [MOD] - Use Fancybox instead of Thickbox

Postby robster » Tue Nov 09, 2010 7:34 am

Any takers on this please?

robster
I know my place...!
User avatar
robster
 
Posts: 399
Joined: Tue Jul 13, 2010 7:08 am
Location: North Yorkshire, UK

Re: [MOD] - Use Fancybox instead of Thickbox

Postby HTMLCSSNoob » Wed Nov 10, 2010 8:28 pm

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?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.
HTMLCSSNoob
 
Posts: 160
Joined: Thu Aug 19, 2010 6:53 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby robster » Thu Nov 11, 2010 12:07 pm

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
robster
 
Posts: 399
Joined: Tue Jul 13, 2010 7:08 am
Location: North Yorkshire, UK

Re: [MOD] - Use Fancybox instead of Thickbox

Postby teknology3d » Sat Nov 27, 2010 11:25 pm

Tx guys!
teknology3d
 
Posts: 45
Joined: Mon Nov 15, 2010 7:33 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby svabbi » Wed Feb 09, 2011 6:06 pm

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.
svabbi
 
Posts: 25
Joined: Wed Sep 23, 2009 5:50 am

Re: [MOD] - Use Fancybox instead of Thickbox

Postby marvmen21 » Tue Mar 01, 2011 4:09 pm

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
marvmen21
 
Posts: 381
Joined: Mon Nov 08, 2010 3:54 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby marvmen21 » Tue Mar 01, 2011 4:15 pm

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
marvmen21
 
Posts: 381
Joined: Mon Nov 08, 2010 3:54 pm

Re: [MOD] - Use Fancybox instead of Thickbox

Postby jeroenzelle » Tue Mar 01, 2011 5:23 pm

I cannot get it working for the newest opencart version. Can some-one tell me if I have to change anything?
jeroenzelle
 
Posts: 7
Joined: Mon Jul 23, 2007 2:28 am

Re: [MOD] - Use Fancybox instead of Thickbox

Postby jeroenzelle » Tue Mar 01, 2011 5:36 pm

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.
jeroenzelle
 
Posts: 7
Joined: Mon Jul 23, 2007 2:28 am

Re: [MOD] - Use Fancybox instead of Thickbox

Postby webpie it. » Sat May 07, 2011 3:34 pm

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
webpie it.
 
Posts: 381
Joined: Mon Jan 31, 2011 6:28 am

Next

Return to Free Contributions

Who is online

Users browsing this forum: No registered users and 7 guests

Hosted by Arvixe Web Hosting