Автор Тема: Создание галереи с увеличением картинок  (Прочитано 459 раз)

19 Декабрь 2015, 11:17:02
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Здравствуйте. Только начал заниматься программированием, поэтому не ругайте сразу за глупые вопросы.. У нас установлен магазин Prestashop 1.4.9. Нужно сделать страничку с каталогом тканей, чтобы человек мог посмотреть картинки. Нужно, чтобы было увеличение при нажатии на картинку. Хотелось бы узнать как это проще всего сделать. Нужно что-то типа http://www.xiper.net/examples/js-plugins/gallery/fancybox/
Заранее спасибо.
19 Декабрь 2015, 12:26:17
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 33082
  • Репутация: +26762/-0
    • Просмотр профиля
В prestashop уже входит jzoom, в настроках изображений нужно включить зум.
19 Декабрь 2015, 13:09:19
Ответ #2
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
20 Декабрь 2015, 14:20:59
Ответ #3
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В prestashop уже входит jzoom, в настроках изображений нужно включить зум.

Я попытался вчера в настройках изображения включить зум, но, либо я что-то не то и не там делаю, либо мы не совсем друг друга поняли. В настройках картинки можно выбрать альтернативное фото. которое будет показываться при наведении, а мне нужно сделать так, чтобы увеличенное изображение открывалось по щелчку, как в fancybox. Или может быть подскажете как привязать fancybox к моей страничке с картинками.
20 Декабрь 2015, 17:19:34
Ответ #4
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В prestashop можно установить для картинки или jqzoom, или fancybox
Prestashop Настройки страницы товара
Цитировать
Включить на странице товара JqZoom вместо Thickbox. По умолчанию, кликнув на изображении, появляется его увеличенная версия, в виде слоя на странице.  Если вы активировали данную функцию, ваши клиенты всё ещё могут увеличивать изображение, кликнув по нему, но зум будет срабатывать при любом наведении курсора на изображении товара.
20 Декабрь 2015, 17:52:24
Ответ #5
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В prestashop можно установить для картинки или jqzoom, или fancybox
Prestashop Настройки страницы товара
Цитировать
Включить на странице товара JqZoom вместо Thickbox. По умолчанию, кликнув на изображении, появляется его увеличенная версия, в виде слоя на странице.  Если вы активировали данную функцию, ваши клиенты всё ещё могут увеличивать изображение, кликнув по нему, но зум будет срабатывать при любом наведении курсора на изображении товара.

То что можно выбрать что-то одно - это я понял.. Только мне увеличение картинки нужно не на странице с товаром, а на другой, отдельно созданной странице, где будет перечень тканей и картинок и чтобы пользователь мог увеличить картинку. нажав на нее.
20 Декабрь 2015, 18:53:40
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 14169
  • Репутация: +14571/-2
  • Сообщество PrestaShop
    • Просмотр профиля
Так скопируйте из product.tpl код для зума. У менчя нет prestashop версии 1.4, на версии 1.6 код такой
{if $have_image}
<span id="view_full_size">
{if $jqZoomEnabled && $have_image && !$content_only}
<a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html':'UTF-8'}">
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>
</a>
{else}
<img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>
{if !$content_only}
<span class="span_link no-print">{l s='View larger'}</span>
{/if}
{/if}
</span>
{else}
<span id="view_full_size">
<img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>
{if !$content_only}
<span class="span_link">
{l s='View larger'}
</span>
{/if}
</span>
{/if}
20 Декабрь 2015, 19:27:08
Ответ #7
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
20 Декабрь 2015, 21:04:10
Ответ #8
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Прошу прощения за очередной глупый вопрос. Я попытался скопировать, но не получилось ничего.
Вот ко на моей странице:
<h1>Третья категория обивочных тканей</h1>
<h3>Galaxy</h3>
<p>Вид материала: микрофибра <br />Состав: 100% полиэстер <br />Плотность: 307 г/кв.м <br />Тест Мартиндейла: 30 000 циклов <br />Производитель: КНР</p>
<p><img title="Galaxy_amber" onclick="fancybox" src="http://hypnotic-mattress.ru/img/cms/Galaxy_amber.jpg" alt="Galaxy_amber" width="70" height="70" /><img style="margin-left: 5px; margin-right: 0px;" src="http://hypnotic-mattress.ru/img/cms/Galaxy_asphalt.jpg" alt="" width="70" height="70" /><img style="margin-left: 5px; margin-right: 5px;" src="http://hypnotic-mattress.ru/img/cms/Galaxy_beige.jpg" alt="" width="70" height="70" /><img src="http://hypnotic-mattress.ru/img/cms/Galaxy_blue_grey.jpg" alt="" width="70" height="70" /><img style="margin-left: 5px; margin-right: 0px;" src="http://hypnotic-mattress.ru/img/cms/Galaxy_blue.jpg" alt="" width="70" height="70" /></p>

как мне все это туда вставить?
21 Декабрь 2015, 10:25:00
Ответ #9
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вы же создавали отдельную страницу, вот в шаблон этой страницы и добавляйте код из шаблона product.tpl.
21 Декабрь 2015, 10:59:07
Ответ #10
  • Ветеран
  • *****
  • Сообщений: 1052
  • Репутация: +3/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Установите модуль галлерии. Тогда вам не придеться самому создавать страницу.
22 Декабрь 2015, 01:56:57
Ответ #11
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Что-то не получилось у меня ничего.. видимо руки кривоваты. Вы не могли бы мне помочь разобраться. Прикладываю два файла. В product.tpl есть уеличение фансибокс, а в cms.tpl нет. что мне туда нужно вставить? Еще раз прошу прощение за тупые вопросы.
22 Декабрь 2015, 11:39:18
Ответ #12
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Так делать нельзя. Шаблон cms.tpl общий для всех страниц.
Вам нужно установить модуль или создать собственную страницу
Prestashop создание собственной страницы
<?php
global $smarty;
include(
'../../config/config.inc.php');
include(
'../../header.php');
 
$smarty->display(dirname(__FILE__).'/mypage.tpl');
 
include(
'../../footer.php');
?>