Пример работы скрипта

Появилась задача сделать увеличивающиеся в размерах изображения для товаров в категориях магазина virtuemart нашлось решение но без бубна не обошлось.

Связка Joomla 1.5 + Virtuemart 1.1.5

Скачиваем и распаковываем архив. Файлы jquery-1.6.1.min.js и zoomi.js

Нужно положить в папку /templates/ВАШ ШАБЛОН/js/ (если папки js нет то создайте ее)

Открываем файл /templates/ВАШ ШАБЛОН/index.php. И между тегами head вставляем код (не забудьте сменить «ВАШ ШАБЛОН» на имя вашего шаблона)

<script src="/templates/ВАШ ШАБЛОН/js/jquery-1.6.1.min.js" type="text/javascript"></script>
	<script src="/templates/ВАШ ШАБЛОН/js/zoomi.js" type="text/javascript"></script>

Далее нужно отредактировать файл /administrator/components/com_virtuemart/classes/ps_product.php у меня строка 1430. Вот этот код

return vmCommonHTML::imageTag( $url, '', '', $height, $width, '', '', $args.' '.$border );

заменить на

return vmCommonHTML::imageTag( $url, '', '', $height2, $width2, '', '', $args.' '.$border );

Так просто удалить переменные $height, $width не получилось я просто добавил к ним по цифре 2 что бы параметры width=»» и height=»» не выводились у нашего изображения и мы могли самостоятельно назначить его в шаблоне browse_.php

Теперь нужно отредактировать сам файл шаблона /components/com_virtuemart/themes/default/templates/browse/browse_1.php который позволяет нам настроить вывод списка категории (обратите внимание на цифру в конце названия обычно по умолчанию стоит 1).

В этом файле нужно заменить код:

<script type="text/javascript">
		// <![CDATA[
		document.write('<a href="javascript:void window.open('<?php echo $product_full_image ?>', 'win2', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=<?php echo $full_image_width ?>,height=<?php echo $full_image_height ?>,directories=no,location=no');">');
		document.write('<?php echo ps_product::image_tag( $product_thumb_image, '
		class = "browseProductImage"
		border = "0"
		title = "'.$product_name.'"
		alt = "'.$product_name .'"
		' )
// ]]>
	</script>' );--> 
	<noscript><a href="/<?php echo $product_full_image ?>" target="_blank" title="<?php echo $product_name ?>"> <span class="mcePhp" data-mce-type="php"><!-- echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?> </a>
	</noscript>

на

<a href="/<?php echo $product_flypage ?>">
          <?php echo ps_product::image_tag( $product_thumb_image, 'class="zoomi" width="170px" height="160px" border="0" title="'.$product_name.'"' ) ?>
       </a>

Этот код выводит нашу картинку. Как видно из последнего кода я задал размеры width=»170px» height=»160px» и присвоил тегу img класс class=»zoomi». Данный скрипт будет увеличивать картинку в том случае если она больше чем в параметрах width=»170px» height=»160px» которые мы присваиваем. Поэтому когда Вы грузите изображения в админке магазина нужно установить то значение ширины и высоты для маленькой картинки которое Вы хотите получить при увеличении (у меня 350 на 330 px). Хочу подчеркнуть что если изображения уже залиты на сайт то либо придется их грузить снова с учетом выше описано либо уменьшать их размер на сайте. Изменить настройки изменения изображений можно в меню virtuemart настройки вкладка сайт ширина высота мини изображения.

Но при таком подходе в карточке товара перестанет работать slimbox т.е. увеличение при клике, что бы этого не допустить нужно в index.php вместо

<script src="/templates/ВАШ ШАБЛОН/js/jquery-1.6.1.min.js" type="text/javascript"></script>
	<script src="/templates/ВАШ ШАБЛОН/js/zoomi.js" type="text/javascript"></script>

Вставить код

<?php $option1=J Request::getVar( 'option', null); $page1=J Request::getVar( 'page', null); ?>
		<?php if ( $option1=='com_virtuemart' && $page1 !='shop.product_details' or $option1=='com_content' ) { ?>
			<script src="/<?php echo $this->baseurl ?>/templates/ВАШ ШАБЛОН/js/jquery-1.6.1.min.js" type="text/javascript"></script>
			<script src="/<?php echo $this->baseurl ?>/templates/ВАШ ШАБЛОН/js/zoomi.js" type="text/javascript"></script>
			<?php } ?>

Собственно все! Если понять логику работы скрипта, то можно ее применять в любом месте сайта и не только на Joomla.

Что бы описать принцип работы скрипта я написал отдельную статью «Скрипт увеличения изображения при наведении курсора мыши.«