Перейти к содержимому


Всплывающая фотография в кратком описании


  • Вы не можете ответить в тему
Сообщений в теме: 44

#21 ssergioss25

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 56 сообщений
Репутация: 24
Ассистент
  • ГородСПБ

Отправлено 28 July 2012 - 01:03 PM

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

Скачать плагин и посмотреть настройки можно тут :
http://www.professor.../cloud-zoom.htm

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

В head.tpl.html после подключения jQuery прописываем :

<link type="text/css" rel="stylesheet" href="путь к файлу/cloud-zoom.css">
<script type="text/javascript" src="путь к файлу/cloud-zoom.1.0.2.min.js"></script>

"путь к файлу" - меняем на каталог, куда скопировали архив.

При условии, что в настройках магазина стоит отображение фото справа, участок кода в product_brief.tpl.html :

<td class="imboxr"><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/small/{$product_info.picture}" alt="{$product_info.name}"></a></td>
{else}
{if $smarty.const.CONF_DISPLAY_NOPHOTO eq 1}
<td class="imboxr"><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/empty.gif" alt="no photo"></a></td>

меняем на :

<td class="imboxr">
{if $product_info.big_picture}
<a href="{if  $smarty.const.CONF_MOD_REWRITE eq 1}  data/big/{$product_info.big_picture}" class='cloud-zoom' id='zoom1' rel="position: 'top',zoomWidth: 300, zoomHeight: 150,adjustX: -100, adjustY: -10"{else}index.php?productID={$product_info.productID}{/if}>
<img src="data/small/{$product_info.picture}" alt="{$product_info.name}" onclick="return false"></a></td>
{else}
<img src="data/small/{$product_info.picture}" alt="{$product_info.name}"></td>
{/if}
{else}	
{if $smarty.const.CONF_DISPLAY_NOPHOTO eq 1}
<td class="imboxr"><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/empty.gif" alt="no photo"></a></td>

Если фото стоит слева,соответственно, меняем участок кода с "imboxl".
  • 2

#22 eugene_wb

    Продвинутый пользователь

  • Модераторы
  • 827 сообщений
Репутация: 167
Мастер

Отправлено 28 July 2012 - 01:14 PM

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


делал себе на магазин, и честно скажу получается реально ерунда, так как зум там не к селу не к городу
  • 0
Изображение Изображение Изображение

#23 ssergioss25

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 56 сообщений
Репутация: 24
Ассистент
  • ГородСПБ

Отправлено 28 July 2012 - 01:25 PM

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


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


Ну, может быть :) А у меня очень даже не плохо смотрится. Главное, чтобы фото большие достаточных размеров были для этого зума. Со стороны часто замечаю, как покупатели на терминале, где сайт расположен тоже ей пользуются. Двигают мышкой, изучают что то, без необходимости переходить в подробное описание, как раньше было. :)
  • 0

#24 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 28 July 2012 - 06:46 PM

Главное, чтобы фото большие достаточных размеров были для этого зума.

Неа :). Главное, чтобы возможность рассмотреть товар "через лупу" была нужна. А она нужна 50-на-50, т.е. где-то да, а где-то нет. Кто-то совсем недавно публиковал что-то подобное, примером там был магазин сумок. И таки да, оно там - в том магазине - к месту было. Можно было рассмотреть каждую пиндюлинку в подробностях. Я прикидивал, как применить оное к себе и решил, что в моем случае полноразмерная фотка по клику будет лучше лупы. Но все равно спасибо, кому-нибудь оно обязательно пригодится.

PS. Главный минус - эти решения обычно перекрывают штатное увеличение фотки по клику. Т.е. не дополняют функциональность, а меняют ее.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#25 ssergioss25

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 56 сообщений
Репутация: 24
Ассистент
  • ГородСПБ

Отправлено 29 July 2012 - 03:09 PM

Кто-то совсем недавно публиковал что-то подобное, примером там был магазин сумок.


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


PS. Главный минус - эти решения обычно перекрывают штатное увеличение фотки по клику. Т.е. не дополняют функциональность, а меняют ее.


Еще как можно дополнить :) Например так :

В category.tpl.html вставляем код, указанный в самом начале этой темы.

В файле cloud-zoom.1.0.2.min.js находим
z-index:9999
и убираем оттуда одну девятку.

В product_brief.tpl.html под картинкой прописываем ссылку :

<a href="data/big/{$product_info.big_picture}" onclick="return hs.expand(this)">Увеличить</a>

  • 0

#26 Tophitdom

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений
Репутация: 0
Начинающий

Отправлено 09 September 2012 - 11:35 AM

Привет! кто-нибудь может установить мне эту фишку на сайт? пожалуйста
  • 0

#27 Dbus

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 1116 сообщений
Репутация: 174
Мастер
  • ГородОдесса

Отправлено 09 September 2012 - 12:30 PM

Привет! кто-нибудь может установить мне эту фишку на сайт? пожалуйста

Какую "эту" ? В теме их как минимум две.
  • 0
502 Bad Gateway

#28 Tophitdom

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений
Репутация: 0
Начинающий

Отправлено 09 September 2012 - 12:55 PM

увеличение фото при наведении Cloud Zoom или Magic
  • 0

#29 handmade

    Новичок

  • Download User
  • Pip
  • 7 сообщений
Репутация: 0
Начинающий

Отправлено 21 September 2012 - 02:27 PM

Вот пример реализации на cloud-zoom:
краткое - http://shop.supercen...gory_17132.html
подробное - http://shop.supercen...duct_30732.html
  • 0

#30 Danger

    Пользователь

  • Пользователи
  • PipPip
  • 14 сообщений
Репутация: -3
Начинающий
  • ГородИзраиль г.Ашкелон

Отправлено 15 November 2013 - 05:27 PM

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

Скачать плагин и посмотреть настройки можно тут :
http://www.professor.../cloud-zoom.htm

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

В head.tpl.html после подключения jQuery прописываем :

<link type="text/css" rel="stylesheet" href="путь к файлу/cloud-zoom.css">
<script type="text/javascript" src="путь к файлу/cloud-zoom.1.0.2.min.js"></script>

"путь к файлу" - меняем на каталог, куда скопировали архив.

При условии, что в настройках магазина стоит отображение фото справа, участок кода в product_brief.tpl.html :

<td class="imboxr"><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/small/{$product_info.picture}" alt="{$product_info.name}"></a></td>
{else}
{if $smarty.const.CONF_DISPLAY_NOPHOTO eq 1}
<td class="imboxr"><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/empty.gif" alt="no photo"></a></td>

меняем на :

<td class="imboxr">
{if $product_info.big_picture}
<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1} data/big/{$product_info.big_picture}" class='cloud-zoom' id='zoom1' rel="position: 'top',zoomWidth: 300, zoomHeight: 150,adjustX: -100, adjustY: -10"{else}index.php?productID={$product_info.productID}{/if}>
<img src="data/small/{$product_info.picture}" alt="{$product_info.name}" onclick="return false"></a></td>
{else}
<img src="data/small/{$product_info.picture}" alt="{$product_info.name}"></td>
{/if}
{else}
{if $smarty.const.CONF_DISPLAY_NOPHOTO eq 1}
<td class="imboxr"><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/empty.gif" alt="no photo"></a></td>

Если фото стоит слева,соответственно, меняем участок кода с "imboxl".


всем привет я пытаюсь установить себе этот код на 3.1.2 vip но что то он не работает кто может помочь?

Сообщение отредактировал Danger: 15 November 2013 - 05:36 PM

  • 0

#31 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 November 2013 - 12:18 AM

всем привет я пытаюсь установить себе этот код на 3.1.2 vip но что то он не работает кто может помочь?

В чем состоит помощь?
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#32 etdnepr

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 101 сообщений
Репутация: 0
Начинающий

Отправлено 06 July 2014 - 01:28 PM

вопрос а как сделать, чтобі картинка всплівала не кликая по ней?

onclick замените на onmouseover

а я бы лучше использовал jq tooltip
делается все просто: подключаем плагин http://bassistance.d...plugin-tooltip/ (думаю все знают как делать)
ищем в proudct_brief.tpl свой кусок кода, который выводит ваши фотографии (примерно такой)

{if $smarty.const.CONF_DISPLAY_FOTO eq 0}
{if $product_info.picture}
<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/small/{$product_info.picture}" alt="{$product_info.name}"></a>
{else}
{if $smarty.const.CONF_DISPLAY_NOPHOTO eq 1}
<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}product_{$product_info.productID}.html{else}index.php?productID={$product_info.productID}{/if}"><img src="data/empty.gif" alt="no photo"></a>
{/if}
{/if}
{/if}

для тега <img> добавляем id, значением которого будет айди товара <img src="data/small/{$product_info.picture}" alt="{$product_info.name}" id="{$product_info.productID}"> (что бы тег был уникальным)
Далее, в конце файла активируем плагин:



{literal}
<script>

$('#{/literal}{$product_info.productID}{literal}').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", function() {

return "data/big/{/literal}{$product_info.picture}{literal}"
});
}
});

</script>
{/literal}

И все, теперь у ваших тизер картинок красивый тултип. И вообще, тултип можно подключить куда угодно (в прайс, в список товаров в корзине и т.д...), и всплывать что угодно. Это, так скажем мини гайд )


Здравствуйте! Спасибо за дополнение!
Не подскажете как сделать так, чтоб увеличенное фото выскакивало определенного размера, а не согласно размера большой фотки, и справа или слева от маленького фото. А то у меня получилось так, что оно выскакивает слишком большое и практически всегда половина фотки за пределами экрана ))))
Спасибо заранее!
  • 0

#33 idal

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 243 сообщений
Репутация: 7
Начинающий
  • ГородКиев

Отправлено 06 July 2014 - 10:35 PM

Не подскажете как сделать так, чтоб увеличенное фото выскакивало определенного размера,

<img src="data/small/{$product_info.picture}" alt="{$product_info.name}" width="ваш размер либо процент" height="ваш размер либо процент">
  • 0

#34 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 06 July 2014 - 11:24 PM

width="ваш размер либо процент" height="ваш размер либо процент"

Это не совсем удобно, т.к. фотка непропорционально растянется (или сожмется), чтобы точно соответствовать заданным ширине и высоте.
Удобнее сделать style="maxwidth:XX;maxheght:YY", а правильнее вынести эти стили в CSS-файл, задав класс.
Тогда фотка займет место не больше заданного в ширину-высоту сохранив пропорции сторон.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#35 etdnepr

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 101 сообщений
Репутация: 0
Начинающий

Отправлено 07 July 2014 - 01:36 PM

Не подскажете как сделать так, чтоб увеличенное фото выскакивало определенного размера,

<img src="data/small/{$product_info.picture}" alt="{$product_info.name}" width="ваш размер либо процент" height="ваш размер либо процент">

Спасибо за совет!
Дело в том, что дописал эти параметры и изменился размер фото в кратком описании, а размер выскакивающего фото остался как был. Может не туда написал что-то?

width="ваш размер либо процент" height="ваш размер либо процент"

Это не совсем удобно, т.к. фотка непропорционально растянется (или сожмется), чтобы точно соответствовать заданным ширине и высоте.
Удобнее сделать style="maxwidth:XX;maxheght:YY", а правильнее вынести эти стили в CSS-файл, задав класс.
Тогда фотка займет место не больше заданного в ширину-высоту сохранив пропорции сторон.

Спасибо большое! Ваш вариант был бы более удобен, но видимо еще руки должны быть из плеч ))) А то куда я только не дописывал эти стили. Результата ноль. Единственное, что получилось изменить - это размер рамки вокруг всплывающего фото ))
  • 0

#36 sealabs

    Пользователь

  • Assistent vsupport.club
  • PipPip
  • 12 сообщений
Репутация: 6
Начинающий

Отправлено 28 November 2014 - 09:43 PM

а не подскажете?
как при клике перейти в product_detailed,
а в product_detailed при клике просто сделать стандарное увеличение картинки?
  • 0

#37 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 28 November 2014 - 11:57 PM

а не подскажете? как при клике перейти в product_detailed,

Ничего не менять в шаблоне. Штатно при клике на фотке в кратком описании (категории) происходит переход на подробное описание, т.е. product_detailed. Ровно тот же переход, что при клике на название товара или кнопку "Подробнее".
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#38 sealabs

    Пользователь

  • Assistent vsupport.club
  • PipPip
  • 12 сообщений
Репутация: 6
Начинающий

Отправлено 29 November 2014 - 12:06 AM

наверное некорректно описал

при наведении на картинку срабатывает zoom?, а если в это время кликнуть - переход в подробное описание
аналогично в подробном описании - если кликнуть в zoom - просто отображение картинки в max
  • 0

#39 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 29 November 2014 - 12:18 AM

наверное некорректно описал

Честно говоря, хоть корректно, хоть не корректно, а врядли кто поможет.
Судя по симптомам - требуется конкретное разбирательство.
А ShopCMS давно уже не та система, где любая проблема встречается радостным криком десятка форумчан "да! да! было
такое! Надо сделать вот так для устранения проблемы!".

PS. Как правило, такие дополнения выкладываются либо для своего шаблона (где, естественно, работают), либо - в лучшем случае - для дефолтового. И приспосабливать их к другому шаблону... эээ... не сказать, чтобы сложно, нет. Просто требует знаний.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#40 sealabs

    Пользователь

  • Assistent vsupport.club
  • PipPip
  • 12 сообщений
Репутация: 6
Начинающий

Отправлено 29 November 2014 - 05:34 PM

PS. Как правило, такие дополнения выкладываются либо для своего шаблона (где, естественно, работают), либо - в лучшем случае - для дефолтового. И приспосабливать их к другому шаблону... эээ... не сказать, чтобы сложно, нет. Просто требует знаний.

Да, конечно, интересует применительно к дефолтному.
  • 0