Я долго мучился по данному вопросу, бродя по поисковикам и на данном форуме, но все таки докопался.....решил побыть полезным
На моем сайте
http://anchor-mr.ru/ я настроил так....(скоро, где то через неделю я его залью обновленным с локалки) а пока все работает
в общем приступим...(если у Вас версия 2.5 Joomla и последняя версия VirtueMart):
1) В файле \components\com_virtuemart\views\category\tmpl\
default.php находим что-то вроде
<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb ('class="browseProductImage" border="0" title="' . $product->product_name . '" ', TRUE, 'class="modal"');
?>
2) Меняем всё это на:
<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb ('class="browseProductImage" border="0" title="' . $product->product_name . '" ', TRUE, 'class="fancybox" rel="group"',true,true);
?>
Я думаю внимательные поймут, в чем фишка изменения...
3) Далее идем по адресу templates\
ваш_шаблон\index.phpДобавляем туда в <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $document->baseurl; ?>/components/com_virtuemart/assets/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php echo $document->baseurl; ?>/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="<?php echo $document->baseurl; ?>/components/com_virtuemart/assets/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
понятно, что никаких файлов не надо добавлять, так они уже есть по умолчанию в VirtueMart, просто кто-то по своей дебильности их не задействовал(я про разработчиков)
если их все таки не нашлось по этим адресам, что выше, то бежим сюда
http://fancybox.net/ , скачиваем их и припрятываем по этим путям..(если поменяется версия, меняем соответственно в коде)
4) После этих кодов, что добавили добавляем в head:
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
transitionIn : "elastic",
transitionOut : "elastic"
});
});
</script>
тут -
transitionIn : "elastic",
transitionOut : "elastic"
для прикольного выезжания
это было для картинок...
5) А для отображения
PDF доков я добавил туда же рядом
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
width : 850,
height : 600,
transitionIn : "elastic",
transitionOut : "elastic"
});
});
</script>
а в ссылке с доком пишем так:
<a class="iframe" href="ПУТЬ_К ДОКУМЕНТУ/ДОКУМЕНТ.pdf" title="Заголовок документа">Название документа</a>
Всё.. пойду пить чай)
26.07.2021, 22:11:25