People who also want to show the flash file in a dynamic popup (example: http://www.devuurwerkhandel.nl/kruitvaatje-17-shots-p-26.html)
-
Download Fancybox: http://fancybox.net/
-
Upload the following files into: includes/templates/YOURTEMPLATEFOLDER/templates
- the map fancybox (drag and drop)
- the file jquery-1.4.3.min.js
-
Open de example index.html file included in the .rar file
- now copy the javascript out of it (you can also copy this one):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="http://www.URL.nl/includes/templates/TEMPLATE/templates/jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://www.URL.nl/includes/templates/TEMPLATE/templates//fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="http://www.URL.nl/includes/templates/TEMPLATE/templates//fancybox//jquery.fancybox-1.3.3.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.URL.nl/includes/templates/TEMPLATE/templates//fancybox/jquery.fancybox-1.3.3.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
Be sure to edit the URLS at the top of this script. Then copy the whole script into your tpl_products_info_display.php page somewhere at the top.
- You now need to edit the link that opens the flash file/video:
- go to: includes/modules/pages/product_info/main_template_vars_product_type.php
- edit this line:
<a href="javascript:popupWindow(\''.zen_href_link(FILENAME_FLASH).'&id='.$_GET[products_id]. '\') ">'. $products_video_title . '</a>
into this:
if (!empty($products_video)) $products_video_link = '<a id="various3" href="'.zen_href_link(FILENAME_FLASH).'&id='.$_GET[products_id]. ' ">'. $products_video_title . '</a>';
Thats it!
Please keep in mind this is just a quick solution and not very smart. I just needed this done asap. When you use lightbox (or slimbox) for your product images to enlarge, fancybox will possibly disable that.
You need to use fancybox for your images also by doing this:
go to includes/templates/yourtemplatefolder/templates/tpl_modules_main_product_image.php and add id="example1" to the <a> functions. Very easy.
:D
