0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 6631 Просмотров
*

artlux

  • Захожу иногда
  • 466
  • 58 / 0
Наболевшая тема, как всегда ничего толкового найти не смог, пришлось делать под себя... (тестировано 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>

Пример работы галереи на сайте , и внешний вид собственно

Спойлер
[свернуть]

Возможно понадобится, что-либо подстроить под вас (но это уже впринципе мелочи)...

Хотел сделать перемотку фото в самом лайте, но пока такой задачи не ставили - возможно ктото и доработает данный вариант в будушем...
Хотелось бы попросить модератеров закрепить данную тему куда нить в видное место, так как вопрос поднимается часто и уже готовые решения на данном форуме иногда не совсем подходят...
« Последнее редактирование: 19.04.2012, 00:32:47 от era »
Разработка расширений: Joomla 1.5+, Bitrix 12+, Мобильные приложения для сайтов под Android (PhoneGap).
Для бонусов: Z136221252622, R242724126443, U423945028202. +79211696184(Мегафон), или плюсик в репу!
*

Garyk01

  • Осваиваюсь на форуме
  • 22
  • 1 / 0
Спасибо большое!
Давно такое искал.
нужна помощь или подсказка - я немного изменил код - смена изображений не по клику а при наведении мышки:
Код
<script type="text/javascript">
jQuery.noConflict();
(function($) {
  $(function() {
jQuery('a.MagicThumb-swap img').mouseover(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').mouseover(function() {
jQuery('a.MagicZoomPlus2').attr('href',jQuery(this).attr('href'));
});
});
    });
})(jQuery);
</script>

и теперь еще хочу добавить возврат первого изображения после того как отводят курсор скажем через 5 сек, но чтото все без успеха
*

dydy

  • Осваиваюсь на форуме
  • 29
  • 4 / 0
что-то не получается.. с маленькими картинками все ок, но при попытке увеличить изображение открывается не в лайтбоксе, а тупо внизу страницы появляется

может подскажете в чем может быть проблема?
*

alen

  • Захожу иногда
  • 72
  • 0 / 0
  • http://www.mycybersport.com
fancybox конфликтует с Magic Tabs ....из за Lightbox... что ж делать, табы превращаются в список ссылок, и галерея не работает....

Решено: в настройках fancybox ставим Load jQuery на НЕТ. Всё работает так же, но не конфликтует :)
« Последнее редактирование: 16.03.2012, 23:47:14 от alen »
*

dydy

  • Осваиваюсь на форуме
  • 29
  • 4 / 0
что-то не получается.. с маленькими картинками все ок, но при попытке увеличить изображение открывается не в лайтбоксе, а тупо внизу страницы появляется

может подскажете в чем может быть проблема?

Всё ещё не работает:( Помогите кто плз
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вывод фото зависимого товара во всплываюm

Автор AndyEk

Ответов: 1
Просмотров: 1119
Последний ответ 02.03.2014, 21:35:51
от AndyEk
Карусель категорий на Jquery! Сделал модуль, помогите собрать!

Автор Stems

Ответов: 2
Просмотров: 3241
Последний ответ 24.12.2013, 16:42:28
от KARATIST
Валютный знак рубля вместо "руб."

Автор qmar1

Ответов: 2
Просмотров: 10091
Последний ответ 03.10.2013, 17:19:55
от Dobreff
Вывод всех фото товара (вместо одной) в &

Автор printlogo

Ответов: 12
Просмотров: 3229
Последний ответ 07.05.2013, 02:05:57
от Иоланта
Описание товара во всплывающем окне!

Автор zmancer

Ответов: 90
Просмотров: 22275
Последний ответ 12.10.2012, 15:16:24
от GoodWill