Увеличение Картинки Сразу По Клику На Маленькой Картинке
#1
Отправлено 12 Апрель 2013 - 11:08
По умолчанию, при клике по маленькой картинке, переключается средняя, и еще по ней приходится кликать. Неудобно 2 раза кликать. В Вебвизоре видно как народ тупит не понимая почему картинка не открывается (особенно когда экран немного промотан вниз).
#2
Отправлено 12 Апрель 2013 - 11:46
pmarkovich (12 Апрель 2013 - 11:08) писал:
По умолчанию, при клике по маленькой картинке, переключается средняя, и еще по ней приходится кликать. Неудобно 2 раза кликать. В Вебвизоре видно как народ тупит не понимая почему картинка не открывается (особенно когда экран немного промотан вниз).
В файле "main.js".
Найти код:
// Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImage a, .goodsDataMainImageZoom a').click(function(){ // Идентификатор главной картинки var goodsImageId = $('.goodsDataMainImage input').attr("rel"), // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; });Заменить:
// Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImage a, .goodsDataMainImageZoom a').click(function(){ // Идентификатор главной картинки var goodsImageId = $('.goodsDataMainImage input').attr("rel"), // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; }); // Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImagesIcon').click(function(){ // Идентификатор главной картинки var goodsImageId = $('input', this).attr("rel"); console.log(goodsImageId); // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; });
#3
Отправлено 12 Апрель 2013 - 12:23
#4
Отправлено 12 Апрель 2013 - 12:35
#5
Отправлено 12 Апрель 2013 - 16:33
pmarkovich (12 Апрель 2013 - 12:23) писал:
В файле "main.js".
Удалить код:
// Изменение главного изображения товара при нажатии на миниатюру $('.goodsDataMainImagesIcon a').click(function(){ // Путь к среднему изображению var MediumImageUrl = $(this).find('img').attr('rel'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('.goodsDataMainImage img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('.goodsDataMainImage input'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).parent().find('input').attr("rel"); // Изменяем главное изображение MainImage.attr('src',MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr("rel",GoodsImageIconId); return false; });
Добавить в конец файла код:
// Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImagesIcon').click(function(){ // Идентификатор главной картинки var goodsImageId = $('input', this).attr("rel"); console.log(goodsImageId); // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; });
#6
#7
Отправлено 15 Апрель 2013 - 13:09
#12
Отправлено 16 Апрель 2013 - 01:10
// Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImagesIcon').click(function(){ // Идентификатор главной картинки var goodsImageId = $('input', this).attr("rel"); console.log(goodsImageId); // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; });
и замените на
// Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImage a, .goodsDataMainImageZoom a').click(function(){ // Идентификатор главной картинки var goodsImageId = $('.goodsDataMainImage input').attr("rel"), // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; }); // Увеличение изображение при клике на него и открытие галереи изображений $('.goodsDataMainImagesIcon').click(function(){ // Идентификатор главной картинки var goodsImageId = $('input', this).attr("rel"); console.log(goodsImageId); // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('.goodsDataMainImagesIcon input[rel="'+goodsImageId+'"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.nyroModalManual(); return false; });
#13
Отправлено 16 Апрель 2013 - 12:35
#14
Отправлено 20 Август 2013 - 09:29
Интересно, можно ли запустить такую же схему при том, что средняя картинка меняется при НАВЕДЕНИИ на другую "картинку"?
Спасибо!
#15
Отправлено 21 Август 2013 - 01:58
$('.goodsDataMainImagesIcon a').hover(function() { $(this).trigger('click'); });
и замените на
$('.goodsDataMainImagesIcon a').hover(function() { $(this).trigger('click'); }); $('.goodsDataMainImagesIcon a img').click(function() { $('.goodsDataMainImage a').trigger('click'); });
#16
Отправлено 21 Август 2013 - 10:54
Vaccina (21 Август 2013 - 01:58) писал:
$('.goodsDataMainImagesIcon a').hover(function() { $(this).trigger('click'); });
и замените на
$('.goodsDataMainImagesIcon a').hover(function() { $(this).trigger('click'); }); $('.goodsDataMainImagesIcon a img').click(function() { $('.goodsDataMainImage a').trigger('click'); });
#17
Отправлено 11 Апрель 2014 - 11:43
необходимо внести следующие изменения
в код файла Main.js добавить код
// На странице товара при наведении на маленькое изображение - изменяем большое изображение $("ul#preview_images li img").click(function() { var $src = $(this).attr('src'); $("#wrap img").attr('src', $src.replace('mini', 'main')); return false; }); $("ul#preview_images li a").click(function() { var $src = $(this).attr('src'); var $href = $(this).attr('href'); $("#wrap a").attr('href', $href.replace('mini', 'main')); return false; });
в файле товар заменить этот код
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} {% FOR goods_images %} {% IF goods_images.first %} <div class="clearfix"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %} id="views_block"> <span class="view_scroll_spacer"><a class="hidden" href="javascript:{}" id="view_scroll_left" title="Предыдущая" style="cursor: default; display: none; opacity: 0;">Предыдущая</a></span> <div id="thumbs_list"> <ul id="thumbs_list_frame" style="width: 100000px;"> {% ENDIF %} <li> <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "> <img src="{goods_images.ICON}" alt="{goods_images.NAME}" /> </a> </li> {% IF goods_images.last %} </ul> </div> <a href="javascript:{}" id="view_scroll_right" title="Следующая" style="cursor: pointer; opacity: 1; display: block;">Следующая</a> </div> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </div>
на этот
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} {% FOR goods_images %} {% IF goods_images.first %} <div class="clearfix"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %} id="views_block"> <span class="view_scroll_spacer"><a class="hidden" href="javascript:{}" id="view_scroll_left" title="Предыдущая" style="cursor: default; display: none; opacity: 0;">Предыдущая</a></span> <div id="thumbs_list"> <ul id="preview_images" style="width: 100000px;"> {% ENDIF %} <li> <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="mini"> <img src="{goods_images.LARGE}" class="mini" alt="{goods_images.NAME}" rel="{goods_images.LARGE}" /> </a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </li> {% IF goods_images.last %} </ul> </div> <a href="javascript:{}" id="view_scroll_right" title="Следующая" style="cursor: pointer; opacity: 1; display: block;">Следующая</a> </div> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </div>
и этот код
<!-- Большое изображение --> <div class="image"> <div id="wrap" style="top:0px;z-index:9999;position:relative;background: #fff;margin: 0 auto;text-align: center;"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', zoomPosition: '3', showTitle: false, adjustX:-4, adjustY:-4"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image"> </a> {% ENDIF %} </div> </div>
на этот
<!-- Большое изображение --> <div class="image"> <div id="wrap" > {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="main" rel="group" > <img src="{GOODS_IMAGE_LARGE}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="main"> </a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{GOODS_IMAGE_ID}" /> {% ENDIF %} </div> </div>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных