Смена Изображения Товара При Наведении На Миниатюру
#1
Отправлено 10 Январь 2017 - 23:59
очень прошу, помогите сделать смену изображения товара при наведении на миниатюру(без нажатия на миниатюру). При этом оставив функционал слайда изображений на темном фоне при нажатии на миниатюру.
Премного благодарен.
#2
Отправлено 17 Январь 2017 - 06:02
Простите за столь долгое ожидание.
Зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
В конец main.js вставьте:
// Изменение главного изображения товара при нажатии на миниатюру $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; });
#3
Отправлено 19 Январь 2017 - 14:58
Vaccina (17 Январь 2017 - 06:02) писал:
Простите за столь долгое ожидание.
Зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
В конец main.js вставьте:
// Изменение главного изображения товара при нажатии на миниатюру $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; });
не работает что то(
#4
Отправлено 27 Январь 2017 - 03:25
Зайдите в раздел Сайт - Редактор шаблонов - main.js - найдите:
// Изменение главного изображения товара при нажатии на миниатюру $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; });
замените на:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; }); });
После изменения почистите кэш браузера, теперь должно работать корректно, прошу прощения за долгое ожидание.
#5
Отправлено 27 Январь 2017 - 16:38
Vaccina (27 Январь 2017 - 03:25) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.js - найдите:
// Изменение главного изображения товара при нажатии на миниатюру $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; });
замените на:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; }); });
После изменения почистите кэш браузера, теперь должно работать корректно, прошу прощения за долгое ожидание.
Спасибо Вам. все работает. А Вы извините что пришлось в ту форму обращаться по данному вопросу. Спасибо еще раз
#6
Отправлено 27 Январь 2017 - 17:16
Vaccina (27 Январь 2017 - 03:25) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.js - найдите:
// Изменение главного изображения товара при нажатии на миниатюру $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; });
замените на:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').hover(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.general-img img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.general-img a').attr('href'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).find('a').attr('src'); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr('rel', GoodsImageIconId); return false; }); });
После изменения почистите кэш браузера, теперь должно работать корректно, прошу прощения за долгое ожидание.
Можно ли сделать так, что бы первое(основное) изображение, отображалось еще и в миниатюрах ? Спасибо
#7
Отправлено 27 Январь 2017 - 17:20
Антон Геоидея (27 Январь 2017 - 17:16) писал:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
замените на
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
#8
Отправлено 27 Январь 2017 - 17:49
Ирина345 (27 Январь 2017 - 17:20) писал:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
замените на
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
Весьма благодарен.)
#9
Отправлено 28 Январь 2017 - 21:49
#10
Отправлено 21 Февраль 2017 - 14:27
57P (28 Январь 2017 - 21:49) писал:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div class="thumblist"> {% FOR goods_images %} {% IFNOT goods_images.first %} <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon" rel="gallery"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->и замените его на
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div class="thumblist"> {% FOR goods_images %} <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon" rel="gallery"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
#11
Отправлено 21 Февраль 2017 - 19:02
На странице возникла JS ошибка:
Script error. на строке: 0.
Адрес файла:
2. при наведение мышки изображение меняется, но если навести на него мышку, чтобы увеличить, то открывается первое изображение.
#12
Отправлено 27 Февраль 2017 - 16:02
57P (21 Февраль 2017 - 19:02) писал:
На странице возникла JS ошибка:
Script error. на строке: 0.
Адрес файла:
2. при наведение мышки изображение меняется, но если навести на него мышку, чтобы увеличить, то открывается первое изображение.
#13
Отправлено 27 Февраль 2017 - 22:31
#14
Отправлено 12 Март 2017 - 15:22
3. при наведение на миниатюру меняется изображение, кликаем на большое изображение - оно открывается, нажимаем следующее изображение - тут беда, через энное количество кликов оно меняется.
4. зафиксируйте изображение при разных соотношениях сторон картинки, галерея прыгает.
а еще можно сделать не 2 миниатюры, а 3?
http://111111.ru/goods/TeSt
#15
Отправлено 15 Март 2017 - 17:51
57P (12 Март 2017 - 15:22) писал:
3. при наведение на миниатюру меняется изображение, кликаем на большое изображение - оно открывается, нажимаем следующее изображение - тут беда, через энное количество кликов оно меняется.
4. зафиксируйте изображение при разных соотношениях сторон картинки, галерея прыгает.
а еще можно сделать не 2 миниатюры, а 3?
http://111111.ru/goods/TeSt
4) Так делать Вам не советую, поскольку при жестко заданной ширине и высоте картинка с меньшими размерами будет растягиваться, что приведет к потере качества изображения.
5) Внесла Вам изменения на сайт.
#16
Отправлено 29 Октябрь 2017 - 11:12
Спасибо.
#17
Отправлено 08 Ноябрь 2017 - 14:54
Антон 5554 (29 Октябрь 2017 - 11:12) писал:
Спасибо.
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').hover(function () {и замените его на
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').click(function () {
#18
Отправлено 08 Ноябрь 2017 - 16:13
Stasya (08 Ноябрь 2017 - 14:54) писал:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').hover(function () {и замените его на
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').click(function () {
Спаисбо. но это при нажатии открывает новое окошко с фото. а мне бы так чтобы не в новом открывалось, а а странице, там где менялось при наведении. спасибо)
#19
Отправлено 09 Ноябрь 2017 - 06:50
Зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist"> {% FOR goods_images %} <li><a data-href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
далее зайдите в main.js - найдите:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').click(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'),
замените на:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').click(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('data-href'),
#20
Отправлено 10 Ноябрь 2017 - 10:00
Vaccina (09 Ноябрь 2017 - 06:50) писал:
Зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist popup-gallery"> {% FOR goods_images %} <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <div id="thumblist" class="thumblist"> {% FOR goods_images %} <li><a data-href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li> {% ENDFOR %} </div> {% ENDIF %} </div><!-- END другие изображение товара -->
далее зайдите в main.js - найдите:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').click(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('href'),
замените на:
// Изменение главного изображения товара при нажатии на миниатюру $(document).ready(function () { $('.thumblist-box a').click(function () { // Путь к среднему изображению var MediumImageUrl = $(this).attr('data-href'),
Спасибо Вам. в очередной раз выручаете.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных