Перейти к содержанию
Форум поддержки пользователей VamShop
VamShop Смотреть Скачать Купить

cloud-zoom картинок

karaush

Автор karaush,
в Проблемы и решения

 Share Подписчики 0

Рекомендуемые сообщения

karaush

karaush 0

Опубликовано
Опубликовано

здравствуйте! пытаюсь переделать вывод картинок в карточке товара.

я удалил старый вывод

<div class="ProductInfoLeft">

{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}

{if $PRODUCTS_POPUP_LINK!=''}<a href="{$PRODUCTS_POPUP_IMAGE}" title="{$PRODUCTS_NAME}" class="zoom" {if $PRODUCTS_MO_IMAGES}rel="group"{/if} target="_blank">{/if}<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />{if $PRODUCTS_POPUP_LINK!=''}<img src="{$tpl_path}img/zoom.gif" alt="{#text_zoom#}" border="0" width="16" height="12" /></a>{/if}

{/if}

{if $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}

<p>

<!-- more images -->

{if $PRODUCTS_MO_IMAGES}

{foreach name=mo_pic item=img_values from=$mo_img}

{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}<a href="{$img_values.PRODUCTS_MO_POPUP_IMAGE}" title="{$PRODUCTS_NAME}" class="zoom" rel="group" target="_blank">{/if}<img src="{$img_values.PRODUCTS_MO_IMAGE}" alt="{$PRODUCTS_NAME}" />{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}<img src="{$tpl_path}img/zoom.gif" alt="{#text_zoom#}" border="0" width="16" height="12" /></a>{/if}&nbsp;

{/foreach}

{/if}

<!-- more images eof -->

</p>

<p>

{if $PRODUCTS_IMAGE_LINK!=''}

<a href="{$PRODUCTS_IMAGE_LINK}" onclick="window.open(this.href); return false;">{$PRODUCTS_TEXT_ZOOM}</a>

{/if}

</p>

{/if}

и вот у меня стала проблема!!!

не понимаю какие метки надо вставлять

<div class="zoom-section">

<div class="zoom-small-image" style="float:left; margin-right:21px; border:4px #CCC solid;">

<a href='{$img_values.PRODUCTS_MO_POPUP_IMAGE}'class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">

<img src="{$img_values.PRODUCTS_MO_POPUP_IMAGE}" alt='' title="{$PRODUCTS_NAME}">

</a>

</div>

<div class="zoom-desc">

<p>

<a href='{$img_values.PRODUCTS_MO_POPUP_IMAGE}' class='cloud-zoom-gallery' title='{$PRODUCTS_NAME}' rel="useZoom: 'zoom1', smallImage: '{$PRODUCTS_IMAGE}' ">

<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="{$img_values.PRODUCTS_MO_THUMBNAIL_IMAGE}" alt = "Thumbnail 1"/>

</a>

<a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='{$PRODUCTS_NAME}' rel="useZoom: 'zoom1', smallImage: ' images/smallimage-1.jpg'">

<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-1.jpg" alt = "Thumbnail 2"/>

</a>

<a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='{$PRODUCTS_NAME}' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' ">

<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-2.jpg" alt = "Thumbnail 3"/>

</a>

</p>

</div>

</div>

я взял с этого примера

html>

<head>

<!-- Загрузка Cloud Zoom CSS файла -->

<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- Загрузка библиотеки jQuery с Google Content Network.

Возможно это лучшее решение, нежели хранить ее у себя на сервере. -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Загрузка Cloud Zoom JavaScript файла -->

<script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>

</head>

<body>

<!--

Картинки для увеличения должны быть заключены в ссылки с классом 'cloud-zoom'.

Значение href ссылки должно указывать на большое изображение.

Настройки могут быть заданы в атрибуте rel у ссылки.

Опции должны быть записаны в формате объекта JavaScript,

но без использования фигурных скобок.

-->

<a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'

rel="adjustX: 10, adjustY:-4">

<img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />

</a>

<!--

Вы можете создать галерею изображений, указав для ссылки класс 'cloud-zoom-gallery'.

Значение href ссылки должно указывать на большое изображение.

В атрибуте rel необходимо указать id элемента, где будет выведено увеличение (useZoom: 'zoom1'),

а так же путь к маленькой картинке (smallImage: /images/....)

-->

<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'

rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">

<img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

<a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'

rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">

<img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>

<a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'

rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">

<img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

</body>

</html>

ПОМОГИТЕ РЕШИТЬ ПРОБЛЕМУ!!!

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

Так Вам не надо ничего удалять, а, по идее, просто поменять class = "zoom" на class = "cloud-zoom", ну и подключить js файл на страницу шаблона.

Ссылка на сообщение
Поделиться на другие сайты
karaush

karaush 0

Опубликовано
  • Автор
Опубликовано

Какой меткой выводится маленькая картинка?

Я поменял class = "zoom" на class = "cloud-zoom", и стало просто выводить в новом окне. Js файл подключен

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

В коде же всё видно.

Смотрите атрибут src у тэга img, маленькая картинка выводится меткой {$PRODUCTS_IMAGE}

Ссылка на сообщение
Поделиться на другие сайты
karaush

karaush 0

Опубликовано
  • Автор
Опубликовано

нет, нужна с папки images/product_images/_thumbs/

но я все таки не пойму как это переделать, Саша помогите пожалуйста!

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

Используйте эту же метку, но тогда в /includes/modules/product_info.php меняйте:



			$image = DIR_WS_INFO_IMAGES.$product->data['products_image'];

[/code]


на:


[code]

			$image = DIR_WS_THUMBNAIL_IMAGES.$product->data['products_image'];

Ссылка на сообщение
Поделиться на другие сайты
karaush

karaush 0

Опубликовано
  • Автор
Опубликовано

это меняет только главную картинку в карточке товара, а надо поменять дополнительные картинки на супер маленькие

Ссылка на сообщение
Поделиться на другие сайты
karaush

karaush 0

Опубликовано
  • Автор
Опубликовано

посмотрите что пытаюсь сделать http://ledyone.jino.ru/mashana.html

но видимо без вашей помощи не разберусь

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

Доп. картинки чуть ниже точно так же меняются:



                'PRODUCTS_MO_IMAGE' => DIR_WS_INFO_IMAGES . $img['image_name'],

[/code]


меняйте на:


[code]

                'PRODUCTS_MO_IMAGE' => DIR_WS_THUMBNAIL_IMAGES . $img['image_name'],

Ссылка на сообщение
Поделиться на другие сайты
karaush

karaush 0

Опубликовано
  • Автор
Опубликовано

вы опять не правильно поняли, ( нужна третья картинка, две которые были я задействовал нужна еще маленькая.

на это место {$PRODUCTS_THUMBNAI_IMAGE} нужна маленькая картинка

вот посмотрите код :

<div class="ProductInfoLeft">

{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}

{if $PRODUCTS_POPUP_LINK!=''}

<div class="zoom-small-image" style="float:left; margin-right:21px; border:4px #CCC solid;">

<a href='{$PRODUCTS_POPUP_IMAGE}' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">

{/if}

<img src="{$PRODUCTS_IMAGE}" alt='' title="{$PRODUCTS_NAME}">

</a>

</div>

{/if}

{if $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}

<p>

<a href='{$PRODUCTS_POPUP_IMAGE}' class='cloud-zoom-gallery' title='{$PRODUCTS_NAME}' rel="useZoom: 'zoom1', smallImage: '{$PRODUCTS_IMAGE}' ">

<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="{$PRODUCTS_THUMBNAI_IMAGE}" alt = "Thumbnail 1"/>

</a>

<!-- more images -->

{if $PRODUCTS_MO_IMAGES}

{foreach name=mo_pic item=img_values from=$mo_img}

{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}

<a href='{$img_values.PRODUCTS_MO_POPUP_IMAGE}' class='cloud-zoom-gallery' title='{$PRODUCTS_NAME}' rel="useZoom: 'zoom1', smallImage: '{$img_values.PRODUCTS_MO_IMAGE}' ">{/if}

<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="{$PRODUCTS_THUMBNAI_IMAGE}" alt = "Thumbnail 1"/>

</a>

{/foreach}

{/if}

<!-- more images eof -->

</p>

<p>

{if $PRODUCTS_IMAGE_LINK!=''}

<a href="{$PRODUCTS_IMAGE_LINK}" onclick="window.open(this.href); return false;">{$PRODUCTS_TEXT_ZOOM}</a>

{/if}

</p>

{/if}

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

Ну так добавьте по аналогии метку.

Меняйте:



                'PRODUCTS_MO_IMAGE' => DIR_WS_INFO_IMAGES . $img['image_name'],

[/code]


на:


[code]

                'PRODUCTS_MO_IMAGE' => DIR_WS_INFO_IMAGES . $img['image_name'],

                'PRODUCTS_MO_IMAGE_THUMBNAIL' => DIR_WS_THUMBNAIL_IMAGES . $img['image_name'],

Уже ж их приведённого кода методом тыка даже можно сделать, хотя ведь по названию переменных, констант всё ведь видно.

Ссылка на сообщение
Поделиться на другие сайты
 Share
Подписчики 0
Перейти к списку тем
×
×
  • Создать...