Наболевшая тема, как всегда ничего толкового найти не смог, пришлось делать под себя... (тестировано VirtueMart 1.1.4)
flypage.tpl.php
Подключаем необходимые скрипты и стили (качаем галерею fancybox)
вставляем в начало файла, после
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
<script type="text/javascript" src="/fancybox/jsjquery.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/style.css" media="screen" />
У меня примерно так...
Далее скрипт, что он делает описывать не буду, просто копируете и вставляете
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
jQuery(document).ready(function() {
jQuery("a[rel=lytebox]#trainers").fancybox({
'showNavArrows' : false
});
jQuery("#inline").fancybox();
jQuery("#frame").fancybox();
});
});
})(jQuery);
(function($) {
$(function() {
jQuery(document).ready(function() {
jQuery('a.MagicThumb-swap').click(function(){
return false;
});
});
});
})(jQuery);
</script>
Сам шаблон вывода галереи
<div id="imageblock">
<?php
$img_big = $product_full_image;
$pieces = explode(".", $img_big);
$thumb_2 = "/components/com_virtuemart/shop_image/product/resized/" . $pieces[0] . "_250x250." . $pieces[1];
if( file_exists( $thumb_2 ) ) {
?>
<a href="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" title="<?php echo $product_name; ?>" id="trainers" class="MagicZoomPlus2" width="315px" rel="lytebox">
<img src="<?php echo $thumb_2 ?>" alt="<?php echo $product_name ?>" title="<?php echo $product_name ?>" border="0" align="center" width="315px"/></a>
<?php
} else {
?>
<a href="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" title="<?php echo $product_name; ?>" id="trainers" class="MagicZoomPlus2" width="315px" rel="lytebox">
<img src="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" alt="<?php echo $product_name ?>" title="<?php echo $product_name ?>" border="0" align="center" width="315px"/></a>
<?php } ?>
<br/>
<?php if( !empty($images)) { ?>
<div class="MagicToolboxSelectorsContainer">
<p style="color:black;text-align:center;"><b>ПРИБЛИЗИТЬ > > ></b></p>
<?php
echo "<a href='/components/com_virtuemart/shop_image/product/".$product_full_image."' title='".$product_name."'
style=\"padding-right:6px;\" rel=\"lytebox\"
class=\"MagicThumb-swap\"><img src='/components/com_virtuemart/shop_image/product/".$product_full_image."' alt='".$product_name."' width='100'/></a>";
foreach( $images as $image )
{
echo "<a href='".$image->file_url."' title='".$product_name."'
style=\"padding-right:6px;\" rel=\"lytebox\"
class=\"MagicThumb-swap\"><img src='".$image->file_url."' alt='".$product_name."' width='100'/></a>";
}; ?>
</div>
<?php } ?>
</div>
У меня получилось чтото вроди этого, возможно чтото лишнее есть (но вроди все случаи вывода изображений учел)
Далее в конец шаблона вставляем скрипт
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
jQuery('a.MagicThumb-swap img').click(function(){
jQuery('.MagicZoomPlus2 img').animate({
opacity:"0",
}, 500 );
jQuery('.MagicZoomPlus2 img').delay(500).animate({
opacity:"1",
}, 500 );
var imageName = jQuery(this).attr("src");
setTimeout(function(){
jQuery('.MagicZoomPlus2 img').attr('src', imageName);
},500);
jQuery('a.MagicThumb-swap').click(function() {
jQuery('a.MagicZoomPlus2').attr('href',jQuery(this).attr('href'));
});
});
});
})(jQuery);
</script>
Пример работы галереи на сайте , и внешний вид собственно
Возможно понадобится, что-либо подстроить под вас (но это уже впринципе мелочи)...
Хотел сделать перемотку фото в самом лайте, но пока такой задачи не ставили - возможно ктото и доработает данный вариант в будушем...
Хотелось бы попросить модератеров закрепить данную тему куда нить в видное место, так как вопрос поднимается часто и уже готовые решения на данном форуме иногда не совсем подходят...
02.03.2014, 21:35:51