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