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

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
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 32991
  • Репутация: +26759/-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
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-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
  • Ветеран
  • *****
  • Сообщений: 13147
  • Репутация: +14553/-0
  • Сообщество 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
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вы же создавали отдельную страницу, вот в шаблон этой страницы и добавляйте код из шаблона product.tpl.
21 Декабря 2015, 10:59:07
Ответ #10
  • Ветеран
  • *****
  • Сообщений: 1010
  • Репутация: +2/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Установите модуль галлерии. Тогда вам не придеться самому создавать страницу.
22 Декабря 2015, 01:56:57
Ответ #11
  • Новичок
  • *
  • Сообщений: 8
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Что-то не получилось у меня ничего.. видимо руки кривоваты. Вы не могли бы мне помочь разобраться. Прикладываю два файла. В product.tpl есть уеличение фансибокс, а в cms.tpl нет. что мне туда нужно вставить? Еще раз прошу прощение за тупые вопросы.
22 Декабря 2015, 11:39:18
Ответ #12
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-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');
?>