Отображение картинок товара в ligtbox из списка товаров

elvikene

Новичок
4
0 / 0

Отображение картинок товара в ligtbox из списка товаров

« : 08.03.2010, 23:46:00 »

Здравствуйте!
Использую VirtueMart в качестве каталога
Так как инфа о товаре помещается в пару строк, хотелось бы избавиться от страницы подробная инфо о товаре (flypage) и выводить большой вариант фотографии при клике на тумбнаил при выводе товаров категории (browse).

В PHP я чайник

Пока только разобралась что сам лайтбокс описывается в файле theme.php


А ссылка формируется кажется здесь:

   function vmBuildFullImageLink( $product ) {
      global $VM_LANG;
      $product_image = '';
      $img_attributes= 'alt="'.$product['product_name'].'"';

В фаиле flypage.tpl картинка выводится в этой строке
   <?php echo $product_image ?><br/><br/><?php echo $this->vmlistAdditionalImages( $product_id, $images )?>

Как сделать что бы это заработало в browse_3.tpl (насколько я поняла именно он отвечает за вывод объектов )

Помогите пожалуйста "особо одаренной"

« Последнее редактирование: 09.03.2010, 14:10:40 от elvikene »

Записан

elvikene

Новичок
4
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #1 : 09.03.2010, 14:10:19 »

Неужели никто не сталкивался?

Записан

xTMx

Захожу иногда
145
4 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #2 : 04.04.2010, 10:01:52 »

На данный момент при клике на тамб куда ведет ссылка ? на флайпейдж?

Записан

XoJlToH

Новичок
2
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #3 : 11.04.2010, 21:46:28 »

думал-думал как по хитрому прикрутить лайтбокс, день промучался в итоге сделал методом топора и напильника
1) кладем в \templates папку highslide
2) идем в каталог используемого шаблона \templates\ja_purity\index.php
в хэдере дописываем

Код: php-brief

<script type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>templates/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $tmpTools->baseurl(); ?>templates/highslide/highslide.css" />
<script type="text/javascript">
	hs.graphicsDir = '<?php echo $tmpTools->baseurl(); ?>templates/highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
</script>

3) находим используемый брауз файл \components\com_virtuemart\themes\default\templates\browse\browse_Х.php
меняем

Код: php-brief

<a href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>"><?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' )?></a>

на

Код: php

<a href="<?php echo $product_full_image?>" class="highslide" onclick="return hs.expand(this)">
	<img src="<?php echo $product_thumb_image?>" alt="Нажмите для увеличения"
		title="Нажмите для увеличения"/></a></center></div>

4) лайтбок должен заработать

highslide берем тут http://evgeniypopov.com/files/34/high44.zip

Записан

xTMx

Захожу иногда
145
4 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #4 : 12.04.2010, 11:32:24 »

тут вот посредством стандартных джумловских тулзов можно это сделать. сделал себе и забыл куда просили скинуть ответ)

http://forum.virtuemart.net/index.php?topic=52989.0

Записан

John316

Осваиваюсь на форуме
31
1 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #5 : 27.11.2010, 04:27:24 »

Так как писал XoJlToH у меня не вышло, а вот так все получилось с первого раза.

1. Качаем скрипты highslide от сюда (офф. сайт) http://highslide.com/download.php

2. Распаковываем архив в корень сайта например в папку highslide.

3. В <head> файла index.php вставляем это:

Код

<script type="text/javascript" src="highslide/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />
<!--
	2) Optionally override the settings defined at the top
	of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
	hs.graphicsDir = 'highslide/highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
</script>

4. В browse_х.php вставляем это:

Код

<a href="<?php echo $product_full_image ?>" class="highslide" onclick="return hs.expand(this)">
     <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'. $product_name .'"' )?></a>

Вместо этого:

Код

<a href="<?php echo $product_flypage ?>">
          <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' )?>

Вот и все.
Примечание.
Если вы назвали папку иначе чем highslide, то поменяйте название в пути к скриптам: <script type="text/javascript" src="highslide/highslide/highslide.js">.

« Последнее редактирование: 27.11.2010, 07:00:00 от John316 »

Записан

aslanamirov

Захожу иногда
87
4 / 0
Ййехаа!

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #6 : 29.11.2010, 09:16:40 »

оооо ща попробую

Записан

rewuxiin

Давно я тут
544
38 / 6

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #7 : 07.04.2011, 14:51:14 »

с highslide класно задумано. но у меня рокетовский шаблон, а внем все скрипты от mootols и внутри rokbox, а я очень нехочу конфликтов этих скриптов.

Может кто нибудь подскажет как прикрутить рокетовские плагины?

вот HTML из FireBug страница со всплывающей картинкой

Код

<div id="rokbox-overlay" class="rokbox-overlay" style="visibility: visible; opacity: 0.7; position: absolute; top: 0px; left: 0px; cursor: pointer; background-color: rgb(255, 255, 255); z-index: 65550; width: 1343px; height: 1403px;"></div>
<div id="rokbox-wrapper" class="rokbox-mynxx" style="position: absolute; z-index: 65555; visibility: visible; opacity: 1; top: 694px; left: 488px; width: 368px; height: 522px;"><div id="rokbox-top" class="rokbox-left"><div class="rokbox-right"><div class="rokbox-center"></div></div></div><div id="rokbox-middle" class="rokbox-left"><div class="rokbox-right"><div class="rokbox-center" style="width: 300px; height: 265px;"><a id="rokbox-close" href="#" style="visibility: visible;"><span>[x] close</span></a><div id="rokbox-container" class="rokbox-container" style="width: 300px; height: 422px;"><img src="http://solara.by/components/com_virtuemart/shop_image/product/Michelin_Pilot_S_4bd2ce7766dee.jpg" id="rokboxobject"></div><div id="rokbox-caption" style="visibility: visible; opacity: 1;"><p>Michelin Pilot Sport-2 101Y</p></div></div></div></div><div id="rokbox-bottom" class="rokbox-left"><div class="rokbox-right"><div class="rokbox-center"></div></div></div><div class="clr"></div></div>

а вот код из flypage.tpl

Код

<div class="product-image">
			<div class="product-image-first"><?php echo $product_image ?></div>
			<div class="product-image-add"><?php echo $this->vmlistAdditionalImages( $product_id, $images )?></div>
		</div>

« Последнее редактирование: 07.04.2011, 15:31:13 от rewuxiin »

Записан

nc

Осваиваюсь на форуме
29
11 / 0
Эх раззз, да еще разззз...

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #8 : 08.04.2011, 18:20:41 »

Цитата: rewuxiin от 07.04.2011, 14:51:14

... Может кто нибудь подскажет как прикрутить рокетовские плагины? ...

попробуй поиграть с темой ( vm_mynxx.tgz ) для VM... у меня стоит шаблон "RT Mynxx версия 1.5.2" и эта тема в VM, там все уже работает нормально... прада я там что-то правил в коде, но не помню что... основной код для рокбокса в файле theme.php, "class rokCommonHTML extends vmCommonHTML {..."... если будут проблемы - пиши, наладим...

и поставь, если еще не стоит, новую версию RokBox http://www.rockettheme.com/extensions-downloads/club/1005-rokbox, она более корректно с VM работает...

Записан

Попали в ДТП? Нужна помощь? Поможем, чем сможем: Онлайн оценка ущерба от ДТП

Нужен быстрый / стабильный / дешевый хостинг для сайта? Вот он!

rewuxiin

Давно я тут
544
38 / 6

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #9 : 12.04.2011, 12:34:59 »

Цитата: nc от 08.04.2011, 18:20:41

попробуй поиграть с темой ( vm_mynxx.tgz ) для VM... у меня стоит шаблон "RT Mynxx версия 1.5.2" и эта тема в VM, там все уже работает нормально... прада я там что-то правил в коде, но не помню что... основной код для рокбокса в файле theme.php, "class rokCommonHTML extends vmCommonHTML {..."... если будут проблемы - пиши, наладим...

и поставь, если еще не стоит, новую версию RokBox http://www.rockettheme.com/extensions-downloads/club/1005-rokbox, она более корректно с VM работает...

какраз этот шаблон и стоит)) Версия 1.5.7.

выложи пожалуйста свою модификацию шаблона и компонента

Записан

nc

Осваиваюсь на форуме
29
11 / 0
Эх раззз, да еще разззз...

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #10 : 12.04.2011, 15:13:32 »

Цитата: rewuxiin от 12.04.2011, 12:34:59

какраз этот шаблон и стоит)) Версия 1.5.7.
выложи пожалуйста свою модификацию шаблона и компонента

тема - vm_mynxx_my.zip , а компонент я вроде не модифицировал, не помню, давно это было... попробуй тему... не пойдет - ковырну сам VM на предмет модификаций...

Записан

Попали в ДТП? Нужна помощь? Поможем, чем сможем: Онлайн оценка ущерба от ДТП

Нужен быстрый / стабильный / дешевый хостинг для сайта? Вот он!

rewuxiin

Давно я тут
544
38 / 6

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #11 : 12.04.2011, 15:45:52 »

Цитата: nc от 12.04.2011, 15:13:32

тема - vm_mynxx_my.zip , а компонент я вроде не модифицировал, не помню, давно это было... попробуй тему... не пойдет - ковырну сам VM на предмет модификаций...

шикарнейше! то что нужно!! ты там правда высоту зафиксил ну да хрен с ним.

даже не знаю чем отблагодарить.

может понадобится Б.Д на шины диски с картинками. Небольшая (позиций 300) правда но для старта сойдет
У меня есть, я её первый раз год назад в этот шаблон запихивал - запарился.

Записан

nc

Осваиваюсь на форуме
29
11 / 0
Эх раззз, да еще разззз...

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #12 : 12.04.2011, 15:50:34 »

Цитата: rewuxiin от 12.04.2011, 15:45:52

даже не знаю чем отблагодарить.

спасибо! "+" достаточно

рад был помочь!

Записан

Попали в ДТП? Нужна помощь? Поможем, чем сможем: Онлайн оценка ущерба от ДТП

Нужен быстрый / стабильный / дешевый хостинг для сайта? Вот он!

adjuster

Давно я тут
786
55 / 2

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #13 : 26.04.2011, 14:07:17 »

Цитата: xTMx от 12.04.2010, 11:32:24

тут вот посредством стандартных джумловских тулзов можно это сделать. сделал себе и забыл куда просили скинуть ответ)

http://forum.virtuemart.net/index.php?topic=52989.0

+1 - отличное решение.
Если кому-то пригодится - вот решение для browse_listtable.tpl

Ищем строки $img_cell = "<div style='position: relative; width: 145px;'>";

Далее переделываем следующую строку:

Цитировать

$img_cell = "<div style='position: relative; width: 145px;'>";
      $img_cell .= '<a class="modal" href="'.$product['product_full_image'].'" title="'.$product['product_name'].'">'
                  . ps_product::image_tag( $product['product_thumb_image'] )
                  . '</a>';
      $img_cell .= "<div style='position: absolute; right: 200px; top: 0;'>".$product['new_img']."</div><div style='position: absolute; right: 0px; bottom: 0;'>".$product['leader_img']."</div></div>";


      $data[$row][] = $img_cell;

Ну и в шаблоне после Хеда вставляем ту строку, которая написана в описании: <?php JHTML::_('behavior.modal'); ?>

Записан

GIPER__X

Осваиваюсь на форуме
25
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #14 : 04.05.2011, 11:11:38 »

$data[$row][] = '<a href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';
Это отвечает за вывод картинки и соответсвенно за ссылку на подробнее в browse_listtable.tpl. Я уже 4 дня пытаюсь его взяческими способами переделать, чтобы не на подробнее ссылалось, а открылось в ligtbox. Помогите, если можете.

Записан

adjuster

Давно я тут
786
55 / 2

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #15 : 04.05.2011, 11:47:32 »

Цитата: GIPER__X от 04.05.2011, 11:11:38

$data[$row][] = '<a href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';
Это отвечает за вывод картинки и соответсвенно за ссылку на подробнее в browse_listtable.tpl. Я уже 4 дня пытаюсь его взяческими способами переделать, чтобы не на подробнее ссылалось, а открылось в ligtbox. Помогите, если можете.

У тебя какая версия марта? - спрашиваю потому, что выше есть ответ для browse_listtable.tpl - и у меня там по другому.

А твое решение вот:

Цитировать

$data[$row][] = '<a class="modal" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

Главное не забудь после Хеда добавить нужную строку:

1. в файле templates/your_template/index.php
После HEAD добавляем:

Цитировать

<?php JHTML::_('behavior.modal'); ?>

Записан

GIPER__X

Осваиваюсь на форуме
25
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #16 : 04.05.2011, 12:01:15 »

Цитата: adjuster от 04.05.2011, 11:47:32

У тебя какая версия марта?

1.1.8 А за терпение и ответ + и человеческое спасибо!

Записан

adjuster

Давно я тут
786
55 / 2

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #17 : 04.05.2011, 12:03:30 »

У меня версия 1.1.4 (может кому-нибудь пригодится)

Записан

GIPER__X

Осваиваюсь на форуме
25
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #18 : 04.05.2011, 12:08:37 »

Все сделал, тока теперь в лайтбоксе он открывает полностью сайт, а не картинку.

Записан

GIPER__X

Осваиваюсь на форуме
25
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #19 : 04.05.2011, 12:16:27 »

Сделал. Вот текст

$data[$row][] = '<a class="modal" href="'.$product['product_full_image'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

Записан

adjuster

Давно я тут
786
55 / 2

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #20 : 04.05.2011, 16:26:08 »

Цитировать

$data[$row][] = '<a class="modal" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

А в чем разница между твоим и тем, что я выше написал?

Записан

GIPER__X

Осваиваюсь на форуме
25
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #21 : 05.05.2011, 06:56:04 »

$data[$row][] = '<a class="modal" href="'.$product['product_full_image'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

$data[$row][] = '<a class="modal" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

Записан

adjuster

Давно я тут
786
55 / 2

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #22 : 06.05.2011, 09:51:17 »

Цитата: GIPER__X от 05.05.2011, 06:56:04

$data[$row][] = '<a class="modal" href="'.$product['product_full_image'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

$data[$row][] = '<a class="modal" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
. ps_product::image_tag( $product['product_thumb_image'] )
. '</a>';

Ну, да - логично.

Записан

dars73

Новичок
6
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #23 : 30.09.2011, 01:50:05 »

Добрый вечер.
И большое спасибо за популярность и доходчивость.
Получилось сделать отображение картинок.

Хотел еще чтобы и описание внизу на списке товара под картинкой выводило.
попытался сделать а не выходит.
Не отображается.

Код

<table width="260" border="0px">
  <tr>
    <td width="260" height="50px">
 <div style=" text-align:center;  font-size:14px; width:100% " >
 <?php echo $product_name ?></div>
</td>
  </tr>
  <tr>
    <td height="150px">
  <div align="center">
  
  <a href="<?php echo $product_full_image ?>" target="_blank" class="modal">
 <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' )?></a>
  </div>
 </td>
  </tr>
  <tr>
    <td>
    <div align="center">
  <?php echo $product_description ?> <-- Если правильно понял эта переменная -->
     </div>  
    </td>
  </tr>
</table>

Записан

yaroslav87

Захожу иногда
126
1 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #24 : 21.04.2012, 20:50:43 »

Цитата: xTMx от 12.04.2010, 11:32:24

тут вот посредством стандартных джумловских тулзов можно это сделать. сделал себе и забыл куда просили скинуть ответ)

http://forum.virtuemart.net/index.php?topic=52989.0

решение супер!
за товары в категории отвечает "components/com_virtuemart/themes/default/templates/browse/browse_X.php"
а какой файл отвечает за вывод подкатегорий? необходимо чтобы тумбы подкатегорий также увеличивались в лайтбоксе..

Записан

HeoH

Новичок
3
0 / 0

Re: Отображение картинок товара в ligtbox из списка товаров

« Ответ #25 : 04.07.2012, 03:50:26 »

John316

Цитата: John316 от 27.11.2010, 04:27:24

Так как писал XoJlToH у меня не вышло, а вот так все получилось с первого раза.

1. Качаем скрипты highslide от сюда (офф. сайт) http://highslide.com/download.php

2. Распаковываем архив в корень сайта например в папку highslide.

3. В <head> файла index.php вставляем это:
Код
<script type="text/javascript" src="highslide/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />

<script type="text/javascript">
	hs.graphicsDir = 'highslide/highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
</script>
4. В browse_х.php вставляем это:
Код
<a href="<?php echo $product_full_image ?>" class="highslide" onclick="return hs.expand(this)">
     <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'. $product_name .'"' )?></a> 
Вместо этого:

Код
<a href="<?php echo $product_flypage ?>">
          <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' )?>
Вот и все.
Примечание.
Если вы назвали папку иначе чем highslide, то поменяйте название в пути к скриптам: <script type="text/javascript" src="highslide/highslide/highslide.js">.

Спасибо, помогло! Только возник косяк:
по скрипту картинки должны лежать в корневом каталоге (например домен.ру/_________________4ff2de5a74c98.jpg)
а в VM они загружаются в другой каталог (домен.ру/components/com_virtuemart/shop_image/product/_________________4ff2de5a74c98.jpg)
Подскажите пожалуйста что в скрипте надо дописать чтобы поправить путь?

_________________________________________________________________________

Решил проблему:

Код

<a href="<?='components/com_virtuemart/shop_image/product/' . $product_full_image?>" class="highslide" onclick="return hs.expand(this)">

« Последнее редактирование: 04.07.2012, 17:05:36 от HeoH »

Записан

Настройки отображения товара Автор wectra	Ответов: 2 Просмотров: 4373	12.07.2017, 22:12:27 от wectra
Несколько изображений для товара/ Лупа для изображения/ Magic Zoom Автор antoha333	Ответов: 41 Просмотров: 26880	13.11.2015, 16:08:16 от sonics
Как реализовать на VirtueMart такую карточку товара? Автор AdmbVlad	Ответов: 0 Просмотров: 1833	14.10.2015, 17:01:55 от AdmbVlad
[download] Модуль вывода товаров для VirtueMart (1.2.3 и 2.1) Автор beliyadm	Ответов: 1448 Просмотров: 378756	21.07.2015, 06:21:55 от Серегин
Альтернативный модуль вывода категорий товаров (mod_kdz_vm_categories) Автор kordima	Ответов: 89 Просмотров: 29261	19.02.2015, 22:02:14 от kordima

VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5

Swiper.js, документация на русском языке

Модуль материалов Joomla на Vue.js.Модуль выводит материалы с помощью JavaScript фреймворка Vue.js

Похожие темы