Увеличение Картинки При Наведении Курсора
#261
Отправлено 15 Август 2014 - 14:45
#263
Отправлено 15 Август 2014 - 15:18
#264
Отправлено 15 Август 2014 - 16:52
тихоня (15 Август 2014 - 15:18) писал:
Ниже я попытался подключить плагин cloud-zoom используя jquery-migrate в котором включены некоторые старые функции из старого jquery 19.*
Вы можете проделать некоторые шаги для того чтобы плагин cloud-zoom сработал.
В файле "html" после кода:
<!-- сохраняем переменную пути до изображений --> <script type="text/javascript">var imgFolder, assetsImagesPath = '{ASSETS_IMAGES_PATH}';</script>Добавить:
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cloud-zoom.css" type="text/css" />После кода:
<script type="text/javascript" src="{ASSETS_JS_PATH}forall.js"></script>Добавить:
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.min.js"></script>
В конец файла "main.css" добавить код:
.allphoto.clr { margin-top: 0; width: 100%; height: 60px; } .owl-carousel .owl-item { float: left; } #owl-one-slider-tovar .item.js-zoom-gallery { display: none !important; } #owl-one-slider-tovar .item.js-zoom-gallery:first-child { display: block !important; } .fullimg.txtalgncnt { overflow: visible; }
В файле "Товар"
Код:
Заменить:
<div class="fullimg txtalgncnt"> <!-- Большое изображение --> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" /> {% ELSE %} <div id="owl-one-slider-tovar" class="owl-carousel"> {% FOR goods_images %} <div class="item js-zoom-gallery" title="Увеличить"> <a itemprop="image" href="{goods_images.LARGE}" target="_blank" title="{GOODS_NAME}" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250"> <img class="firstBigGoodsImg" src="{goods_images.MEDIUM}" alt="{goods_images.NAME}" /> </a> </div> {% ENDFOR goods_images %} </div> {% ENDIF %} <div class="js-zoom bottom-open-gallery"></div> </div>p.s
Лучше всего на странице товара маленькие изображения расположить горизонтально, чтобы он функционировал нормально.
#265
Отправлено 24 Август 2014 - 22:44
Вот на этом фото применен код, как в модификации
<a href="http://st.storeland....020748-big.jpg" rel="gallery" target="_blank"><span style="color:#D3D3D3;"><img alt="Чехол жаккард хлопок для матраса." src="http://st.storeland....6/P1020748.jpg" style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" /> </span></a>
Если возможно - хотелось бы без установки нового плагина...
#266
Отправлено 24 Август 2014 - 22:49
#267
Отправлено 25 Август 2014 - 06:16
Новичок Ю (24 Август 2014 - 22:44) писал:
Вот на этом фото применен код, как в модификации
<a href="http://st.storeland....020748-big.jpg" rel="gallery" target="_blank"><span style="color:#D3D3D3;"><img alt="Чехол жаккард хлопок для матраса." src="http://st.storeland....6/P1020748.jpg" style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" /> </span></a>
Если возможно - хотелось бы без установки нового плагина...
#268
Отправлено 26 Август 2014 - 21:17
#269
Отправлено 26 Август 2014 - 23:27
$(function() { $('a[rel="gallery"], .zooming').fancybox(); });
Обратите внимание на то, что все ваши изображения в таблице должны иметь вид
<a target="_blank" rel="gallery" href="Адрес большого изображения"> <img src="Адрес маленького изображения" alt=""> </a>
т.е изображение (тег <img>) должно быть обвернуто в ссылку (тег <a>) с атрибутом rel="gallery" или классом zooming
<a target="_blank" class="zooming" href="Адрес большого изображения"> <img src="Адрес маленького изображения" alt=""> </a>
#272
Отправлено 28 Август 2014 - 07:41
#273
Отправлено 28 Август 2014 - 12:23
tolikkansk (28 Август 2014 - 07:41) писал:
В шаблоне "Товар" найдите строку:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
и замените её на:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0">
#275
Отправлено 28 Август 2014 - 20:26
tolikkansk (28 Август 2014 - 20:10) писал:
#276
Отправлено 28 Август 2014 - 20:36
#278
Отправлено 29 Август 2014 - 10:56
#280
Отправлено 11 Сентябрь 2014 - 18:27
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных