[Решено] highslide в Virtuemart 1.1.2 и 1.0.15 - красивые всплывающие окна

[PaLyCH]

Делается в простые 5 шагов. Только для карточки товара
1) качаем  у авторов последнюю версию.
2) или качаем в низу темы.
3) закачиваем в корень сайта в папку highslide
4) открываем index.php шаблона, и перед тегом </head> прописываем следующие строки

Код

<?php
	if (@$option=='com_virtuemart' ) { ?>
	<script type="text/javascript" src="/highslide/highslide.packed.js"></script>
	<script type="text/javascript">
		    // override Highslide settings here
		    // instead of editing the highslide.js file
		    hs.graphicsDir = '/highslide/graphics/';
	</script>
<?php }  ?>

Это необходимо, чтобы скрип подгружался только в virtuemart
5) Открываем htmlTools.class.php
Находим

Код

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );

меняем на

Код

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'class="highslide" onclick="return hs.expand(this)"' );

Ну вот и все.

[Fetka]

 а как сделать такой эффект для всех фотографий на сайте?

[SergyBoiko]

На какой версии виртуемарта тестили?
в моей версии BMPE в файле htmlTools.class.php

кода 

Код:

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );

нет

[PaLyCH]

На какой версии виртуемарта тестили?
в моей версии BMPE в файле htmlTools.class.php

кода 

Код:

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );

нет

А ты не заметил в теме? Внимательнее-внимательнее

[SergyBoiko]

В натуре.. ступил..
под версию 1.0.15 поможете с решением? шаманил с browse_1.php но открывается просто в новом окне.

[PaLyCH]

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

[morph]

млин...чтото глючит - ставлю,щелкаю на картинке - loading... и стопор...

[Mirsaytov]

кроме файла js, дополнительно нужно создать папку "graphic" и запихнуть туда картинки для данного скрипта

Скрипты и картинки можно скачать отсюда:
http://www.denison.edu/share/highslide/

[PaLyCH]

И так. Нарыл вроде и для 1.0.15 Virtuemart. Сразу начнем с 5 пункта. Открываем файл shop.product_details.php. Ищем код

Код:

if( @$_REQUEST['output'] != "pdf" ) {
$link = $imageurl;
$text = $ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."<br/>".$VM_LANG->_PHPSHOP_FLYPAGE_ENLARGE_IMAGE;
// vmPopupLink can be found in: htmlTools.class.php
$product_image = vmPopupLink( $link, $text, $width, $height );
} else {
$product_image = "<a href=\"$imageurl\" target=\"_blank\">".$ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."</a>";
}

меняем на

Код:

$product_image = "<a href=\"$imageurl\" class=\"highslide\" onclick=\"return hs.expand(this)\">".$ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."</a>";

Вот и усе

[Growbar]

всё сделал как написано выше...  работает но частично... как сделать чтоб задний фон при открытии картинки изменялся...

И второй вопрос как сделать чтоб этот эффект действовал и на дополнительные картинки у товара...

версия магазина ВМРЕ 1.0.15b

как я понял надо что то сдесь поменять:

Код:

$href = "javascript:void window.open('$src_full', 'win$image->file_id$titlewsp', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=$width_full,height=$height_full,directories=no,location=no');";

И ещё странная вещь... На сайте стоит шапка на флеше... и картинка которая открывается , открывается под флешкой (( в чём может быть проблема?

Заранее спасибо....

[Growbar]

С открытием дополнительных картинок у товара решил проблему.... осталась проблема с флешем и задним фоном...

[Sulpher]

С открытием дополнительных картинок у товара решил проблему....

Поделитесь решением с сообществом. Будет полезно другим.

И ещё странная вещь... На сайте стоит шапка на флеше... и картинка которая открывается , открывается под флешкой (( в чём может быть проблема?

нужно добавить пару параметров в флэш объект.
Вот этот:
    <param name="wmode" value="opaque">
а перед закрытием embed вот это: wmode="opaque"

т.е. вывод флэш объекта будет выглядеть примерно след. образом:

Код:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="313" height="141">
    <param name="movie" value="<?php echo $mosConfig_live_site; ?>/templates/template/images/logo.swf" />
    <param name="wmode" value="opaque">
    <param name="quality" value="high" />
    <embed src="<?php echo $mosConfig_live_site; ?>/templates/template/images/logo.swf"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="313" height="141" wmode="opaque"></embed>
</object>

[Growbar]

спасибо помогло..... 

решение открытие дополнительных картинок:

shop.product_details.php

этот код

Код:

$href = "javascript:void window.open('$src_full', 'win$image->file_id$titlewsp', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=$width_full,height=$height_full,directories=no,location=no');";

сменил на

Код:

$href = "$src_full\" class=\"highslide\" onclick=\"return hs.expand(this)\"";

всё заработало....

кто подскажет как изменить задний фон?

[Growbar]

спасибо всё зараболало....

это в index.php

hs.dimmingOpacity = 0.75;

это в стиль

.highslide-dimming {
   background: black;
}

решение было найдено

Код:

http://highslide.com/ref/hs.dimmingOpacity

[Sulpher]

спасибо помогло..... 

решение открытие дополнительных картинок:

этот код

Код:

$href = "javascript:void window.open('$src_full', 'win$image->file_id$titlewsp', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=$width_full,height=$height_full,directories=no,location=no');";

сменил на

Код:

$href = "$src_full\" class=\"highslide\" onclick=\"return hs.expand(this)\"";

Укажите, какой файл редактируете. Укажите в своём старом комментарии.

[Old Badger]

Пардон... А это откуда?

Код:

$href = "javascript:void window.open('$src_full', 'win$image->file_id$titlewsp', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=$width_full,height=$height_full,directories=no,location=no');";

Ни и 1.1.2, ни в 1.0.15 я ничего подобного не нашёл...
Скорее уж где-то здесь... (точнее, точно здесь в 1.0.15b) но вот как?:
shop.view_images.php, линии ~ 42-63

Код:

$href = $_SERVER['PHP_SELF']."?option=com_virtuemart&page=$page&product_id=$product_id&image_id=product&Itemid=".$Itemid;
  $title = $db->f("product_name");
  echo "<a href=\"$href\" target=\"_self\" title=\"$title\">\n";
  $ps_product->show_image( $db->f("product_thumb_image"), "alt=\"$alt\" align=\"center\" border=\"$border\"");
  echo "</a>&nbsp;&nbsp;&nbsp;";
  $dbi = new ps_DB();
// Let's have a look wether the product has more images.
  $dbi->query( "SELECT * FROM #__{vm}_product_files WHERE file_product_id='$product_id' AND file_is_image='1'" );
  $images = $dbi->record;
  $i = 0;
  foreach( $images as $image ) {
    $info = pathinfo( $image->file_name );
   
    $src = dirname($image->file_url) ."/resized/". basename($image->file_name, ".".$info["extension"])."_".PSHOP_IMG_WIDTH."x".PSHOP_IMG_HEIGHT.".".$info["extension"];
    $alt = $image->file_title;
    $height = empty($image->file_image_thumb_height) ? PSHOP_IMG_HEIGHT : $image->file_image_thumb_height;
    $width = empty($image->file_image_thumb_width) ? PSHOP_IMG_WIDTH : $image->file_image_thumb_width;
   
    $border = ($image->file_id == $image_id) ? "4" : "1";
    $href = $_SERVER['PHP_SELF']."?option=com_virtuemart&page=$page&product_id=$product_id&image_id=".$image->file_id."&Itemid=".$Itemid;
    $title = $image->file_title;
    echo "<a href=\"$href\" target=\"_self\" title=\"$title\"><img src=\"$src\" alt=\"$alt\" align=\"center\" width=\"$width\" border=\"$border\" /></a>\n&nbsp;&nbsp;&nbsp;";

Если делать по аналогии с основной картинкой, показывается только окошко загрузки и усё... 

[slavkin]

Делается в простые 5 шагов. Только для карточки товара
1) качаем  у авторов последнюю версию.
2) или качаем в низу темы.
3) закачиваем в корень сайта в папку highslide
4) открываем index.php шаблона, и перед тегом </head> прописываем следующие строки

Код

<?php
	if (@$option=='com_virtuemart' ) { ?>
	<script type="text/javascript" src="/highslide/highslide.packed.js"></script>
	<script type="text/javascript">
		    // override Highslide settings here
		    // instead of editing the highslide.js file
		    hs.graphicsDir = '/highslide/graphics/';
	</script>
<?php }  ?>

Это необходимо, чтобы скрип подгружался только в virtuemart
5) Открываем htmlTools.class.php
Находим

Код

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );

меняем на

Код

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'class="highslide" onclick="return hs.expand(this)"' );

Ну вот и все.

Можно где-то демо  посмотреть, что получается?

[mickymouse]

Ещё вопросик где бы подправить что-бы эта вещь срабатывала и при просмотре категории а не только при просмотре продукта?

ПыСы. И вот ещё вопросик у меня почему то меню получается поверх картинки, хотя в фаилике темплейта <?php
   if (@$option=='com_virtuemart' ) { ?>
   <script type="text/javascript" src="/highslide/highslide.packed.js"></script>
   <script type="text/javascript">
          // override Highslide settings here
          // instead of editing the highslide.js file
          hs.graphicsDir = '/highslide/graphics/';
   </script>
<?php }  ?> стоит первый.

[sotkom]

а как же таблица стилей? highslide.css? чет ни одного слова про него... и в приложенном ув.PaLyCH архиве  highslide.packed.zip его нет...

[booro]

А зачем вообще использовать что-то стороннее, если в самом вм есть lightbox?

Это вставляем в head:

Код:

<?php
if (@$option=='com_virtuemart' ) { ?>
<script language="JavaScript" type="text/javascript" src="
<?php
echo $mainframe->getCfg('live_site'); ?>components/com_virtuemart/js/mootools/mootools-release-1.11.js">
    </script>
<script language="JavaScript" type="text/javascript" src="
<?php
echo $mainframe->getCfg('live_site'); ?>components/com_virtuemart/js/mootools/mooPrompt.js">
    </script>
<script language="JavaScript" type="text/javascript" src="
<?php
echo $mainframe->getCfg('live_site'); ?>components/com_virtuemart/js/slimbox/js/slimbox.js">
    </script>
<link type="text/css" rel="stylesheet" media="screen, projection" href="components/com_virtuemart/js/mootools/mooPrompt.css" />
<link type="text/css" rel="stylesheet" media="screen, projection" href="components/com_virtuemart/js/slimbox/css/slimbox.css" />
<?php }  ?>

Теперь можно сделать красивые картинки и для browse, просто в добавляем rel="lightbox" к ссылке на большую картинку.

Код:

<a href="<?php echo $product_full_image ?>" rel="lightbox">

Для flypage вообще ничего никуда вставлять не надо, все и так работает.

[Wiegraf]

Пробовал на Virtuemart 1.0.4 таким методом не встает, может кто поможет?, не думаю что я один сталкивался с такой проблемой

[Wiegraf]

Для product_detail.php  настроил, но никак не получается для Browse_1.php

Вот кусок кода подскажите что я должен в нем прописать, для подключения hislide

<script type="text/javascript">//<![CDATA[
        document.write('<a href="javascript:void window.open(\'{image_url}product/{product_full_image}\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width={full_image_width},height={full_image_height},directories=no,location=no\');">');

Версия Virtuemart 1.0.4

[nevigen]

Прикрутил на 1.1.2.
работает..... но...... не очень красиво, картинки в рамочку берет, стиль прописать как ноу-бордер на примерах Хайславда, не нашел как.... а было бы ярче....

Причем я захотел поопробовать лишь по одной причине, если ставить YooEffects то они тоже юзают лайтбокс, и при включении плагина начинает глючить Виртумарт, выдавая на увеличение 2 раза фото......

Вот есть решение такого вопроса ?
Чтобы не глючили рядом ЙоЕффектс и Виртумарт

[k.gubareva]

А зачем вообще использовать что-то стороннее, если в самом вм есть lightbox?

Это вставляем в head:

Код:

<?php
if (@$option=='com_virtuemart' ) { ?>
<script language="JavaScript" type="text/javascript" src="
<?php
echo $mainframe->getCfg('live_site'); ?>components/com_virtuemart/js/mootools/mootools-release-1.11.js">
    </script>
<script language="JavaScript" type="text/javascript" src="
<?php
echo $mainframe->getCfg('live_site'); ?>components/com_virtuemart/js/mootools/mooPrompt.js">
    </script>
<script language="JavaScript" type="text/javascript" src="
<?php
echo $mainframe->getCfg('live_site'); ?>components/com_virtuemart/js/slimbox/js/slimbox.js">
    </script>
<link type="text/css" rel="stylesheet" media="screen, projection" href="components/com_virtuemart/js/mootools/mooPrompt.css" />
<link type="text/css" rel="stylesheet" media="screen, projection" href="components/com_virtuemart/js/slimbox/css/slimbox.css" />
<?php }  ?>

Теперь можно сделать красивые картинки и для browse, просто в добавляем rel="lightbox" к ссылке на большую картинку.

Код:

<a href="<?php echo $product_full_image ?>" rel="lightbox">

Для flypage вообще ничего никуда вставлять не надо, все и так работает.

Уважаемый booro и другие пользователи этого форума, пожалуйста, объясние начинающим пользователям joomla как пользоваться lightbox,  lightbox работает в flypage, но ни как не заставлю его работать в browse , открывается картинка в окне с белым фоном.

Код который вы дали в начале нужно вставить в head index.php который в теме лежит?

Мои данные Joomla! 1.0.15Стабильная версия и VM 1.1.3

код для вызова ligthbox

Код:

<a href="<?php echo $product_full_image ?>" rel="lightbox"  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>

[nevigen]

LightBox VS HighSlide !!!!

Продолжаем править под хайслайд !!!!

Для категории тоже самое, только меняете например в browse_1

Код:

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

на

Код:

<div class="browseProductImageContainer">
      <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>
    </div>

[nevigen]

как прикрутить хайслайд чтобы он выводил ссылку на производителя, как iframe ? не тупо в новом окне а именно во всплывающем, может даже при наведении.... хиде и что поправить ?
чета не могу допетрать...

Да и еще момент, не могу понять как сделать чтобы при хайслайд всплывающем окне, выводил Каптион картинки....

[nestless]

Решение проблемы двойного открытия lightbox с установленным YOOeffects

[zmeyx]

Сделал все как описано, но, проблемка такая, при нажатии на картинку, она не открывается, только Loading... и на этом останавливается.. подскажите, как бороться?
VM 1.0.15 Joomla 1.0.15 Стабильная

[nevigen]

проверь пути
и посмотри чтобы было написано return hs.expand не с больших, а только так, и ничего лишнего там.
Больше ничего особенного на это не влияет...

[zmeyx]

проверь пути
и посмотри чтобы было написано return hs.expand не с больших, а только так, и ничего лишнего там.
Больше ничего особенного на это не влияет...

Сорри, а можно чуть подробнее.... сделано все строго по этому описанию

И так. Нарыл вроде и для 1.0.15 Virtuemart. Сразу начнем с 5 пункта. Открываем файл shop.product_details.php. Ищем код

Код:

if( @$_REQUEST['output'] != "pdf" ) {
$link = $imageurl;
$text = $ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."<br/>".$VM_LANG->_PHPSHOP_FLYPAGE_ENLARGE_IMAGE;
// vmPopupLink can be found in: htmlTools.class.php
$product_image = vmPopupLink( $link, $text, $width, $height );
} else {
$product_image = "<a href=\"$imageurl\" target=\"_blank\">".$ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."</a>";
}

меняем на

Код:

$product_image = "<a href=\"$imageurl\" class=\"highslide\" onclick=\"return hs.expand(this)\">".$ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."</a>";

Вот и усе

естественно, сначала сделано по первому топику.