- Форум владельцев интернет-магазинов
- → Публикации Гузель
Публикации Гузель
25 публикаций создано Гузель (учитываются публикации только с 23-Сентябрь 23)
#175322 Добавление Функции Увеличения Изображения При Клике
Отправлено от Гузель в 26 Ноябрь 2014 - 16:38 в Страница товара
В продолжение темы фото товара в карточке товара.
Сейчас дополнительные фотографии при нажатии на них отображаются сразу во всплывающем окне. Как можно сделать, чтобы они при нажатии на дополнительное фото товара это фото показывалось на месте главного фото.
А всплывающее окно отображалось только при нажатии на главное фото
Спасибо
#175582 Добавление Функции Увеличения Изображения При Клике
Отправлено от Гузель в 27 Ноябрь 2014 - 17:37 в Страница товара
В продолжение темы фото товара в карточке товара.
Сейчас дополнительные фотографии при нажатии на них отображаются сразу во всплывающем окне. Как можно сделать, чтобы они при нажатии на дополнительное фото товара это фото показывалось на месте главного фото.
А всплывающее окно должно отображаться только при нажатии на главное фото
Спасибо
#171638 Добавление Функции Увеличения Изображения При Клике
Отправлено от Гузель в 10 Ноябрь 2014 - 17:47 в Страница товара
Koderhan (26 Декабрь 2013 - 17:59) писал:
Перед внесением изменений лучше создать резервную копию шаблона.
ScreenShot 1040.png
В файле "Товар" изменить код изображений:
<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>На код:
<div id="thumbs_list"> <ul id="thumbs_list_frame" style="width: 100000px;"> {% ENDIF %} <li> <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="pict_gallery" rel="group" target="_blank"> <img src="{goods_images.ICON}" alt="{goods_images.NAME}" rel="{goods_images.MEDIUM}" /> </a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </li> {% IF goods_images.last %} </ul> </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="fullimg" target="_blank"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image"> </a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{GOODS_IMAGE_ID}" /> {% ENDIF %} </div> </div>
В конец файла "main.js" добавить код:
$(function() { // при клике на маленькие изображения инициализируем действие вызова галереи fancybox $("a[rel=group]").fancybox(); // Увеличение изображение при клике на него и открытие галереи изображений $('#wrap .fullimg').click(function() { // Идентификатор главной картинки var goodsImageId = $('#wrap input').attr("rel"), // Маленькое изображение, по которому на самом деле будем кликать goodsImageIconElement = $('#thumbs_list_frame input[rel="' + goodsImageId + '"]').parent().find('a'); // Для иконки изображения запустим галерею goodsImageIconElement.click(); // при клике на маленькие изображения инициализируем действие вызова галереи fancybox return false; }); // Изменение главного изображения товара при нажатии на миниатюру $('#thumbs_list_frame a').click(function() { // Путь к среднему изображению var MediumImageUrl = $(this).find('img').attr('rel'), // Главное изображение, в которое будем вставлять новое изображение MainImage = $('#wrap .fullimg img'), // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений MainImageIdObject = $('#wrap input'), // Получаем идентификатор этого изображения из соседнего input поля GoodsImageIconId = $(this).parent().find('input').attr("rel"); // Изменяем главное изображение MainImage.attr('src', MediumImageUrl); // Изменяем идентификатор главного изображения MainImageIdObject.attr("rel", GoodsImageIconId); // Нельзя ставить return false иначе не будет работать галерея }); });
И в файле "forall.js".
Удалить код плагина "Cloud Zoom".
////////////////////////////////////////////////////////////////////////////////// // Cloud Zoom V1.0.2 // (c) 2010 by R Cecco. <http://www.professorcloud.com> // MIT License // // Please retain this copyright header in all versions of the software ////////////////////////////////////////////////////////////////////////////////// (function($){$(document).ready(function(){$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom()});function format(str){for(var i=1;i<arguments.length;i++){str=str.replace('%'+(i-1),arguments[i])}return str}function CloudZoom(jWin,opts){var sImg=$('img',jWin);var img1;var img2;var zoomDiv=null;var $mouseTrap=null;var lens=null;var $tint=null;var softFocus=null;var $ie6Fix=null;var zoomImage;var controlTimer=0;var cw,ch;var destU=0;var destV=0;var currV=0;var currU=0;var filesLoaded=0;var mx,my;var ctx=this,zw;setTimeout(function(){if($mouseTrap===null){var w=jWin.width();jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>',w/3,(w/2)-(w/6))).find(':last').css('opacity',0.5)}},200);var ie6FixRemove=function(){if($ie6Fix!==null){$ie6Fix.remove();$ie6Fix=null}};this.removeBits=function(){if(lens){lens.remove();lens=null}if($tint){$tint.remove();$tint=null}if(softFocus){softFocus.remove();softFocus=null}ie6FixRemove();$('.cloud-zoom-loading',jWin.parent()).remove()};this.destroy=function(){jWin.data('zoom',null);if($mouseTrap){$mouseTrap.unbind();$mouseTrap.remove();$mouseTrap=null}if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.fadedOut=function(){if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.controlLoop=function(){if(lens){var x=(mx-sImg.offset().left-(cw*0.5))>>0;var y=(my-sImg.offset().top-(ch*0.5))>>0;if(x<0){x=0}else if(x>(sImg.outerWidth()-cw)){x=(sImg.outerWidth()-cw)}if(y<0){y=0}else if(y>(sImg.outerHeight()-ch)){y=(sImg.outerHeight()-ch)}lens.css({left:x,top:y});lens.css('background-position',(-x)+'px '+(-y)+'px');destU=(((x)/sImg.outerWidth())*zoomImage.width)>>0;destV=(((y)/sImg.outerHeight())*zoomImage.height)>>0;currU+=(destU-currU)/opts.smoothMove;currV+=(destV-currV)/opts.smoothMove;zoomDiv.css('background-position',(-(currU>>0)+'px ')+(-(currV>>0)+'px'))}controlTimer=setTimeout(function(){ctx.controlLoop()},30)};this.init2=function(img,id){filesLoaded++;if(id===1){zoomImage=img}if(filesLoaded===2){this.init()}};this.init=function(){$('.cloud-zoom-loading',jWin.parent()).remove();$mouseTrap=jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>",sImg.outerWidth(),sImg.outerHeight(),0,0)).find(':last');$mouseTrap.bind('mousemove',this,function(event){mx=event.pageX;my=event.pageY});$mouseTrap.bind('mouseleave',this,function(event){clearTimeout(controlTimer);if(lens){lens.fadeOut(299)}if($tint){$tint.fadeOut(299)}if(softFocus){softFocus.fadeOut(299)}zoomDiv.fadeOut(300,function(){ctx.fadedOut()});return false});$mouseTrap.bind('mouseenter',this,function(event){mx=event.pageX;my=event.pageY;zw=event.data;if(zoomDiv){zoomDiv.stop(true,false);zoomDiv.remove()}var xPos=opts.adjustX,yPos=opts.adjustY;var siw=sImg.outerWidth();var sih=sImg.outerHeight();var w=opts.zoomWidth;var h=opts.zoomHeight;if(opts.zoomWidth=='auto'){w=siw}if(opts.zoomHeight=='auto'){h=sih}var appendTo=jWin.parent();switch(opts.position){case'top':yPos-=h;break;case'right':xPos+=siw;break;case'bottom':yPos+=sih;break;case'left':xPos-=w;break;case'inside':w=siw;h=sih;break;default:appendTo=$('#'+opts.position);if(!appendTo.length){appendTo=jWin;xPos+=siw;yPos+=sih}else{w=appendTo.innerWidth();h=appendTo.innerHeight()}}zoomDiv=appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(':last');if(sImg.attr('title')&&opts.showTitle){zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>',sImg.attr('title'))).find(':last').css('opacity',opts.titleOpacity)}if($.browser.msie&&$.browser.version<7){$ie6Fix=$('<iframe frameborder="0" src="#"></iframe>').css({position:"absolute",left:xPos,top:yPos,zIndex:99,width:w,height:h}).insertBefore(zoomDiv)}zoomDiv.fadeIn(500);if(lens){lens.remove();lens=null}cw=(sImg.outerWidth()/zoomImage.width)*zoomDiv.width();ch=(sImg.outerHeight()/zoomImage.height)*zoomDiv.height();lens=jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(':last');$mouseTrap.css('cursor',lens.css('cursor'));var noTrans=false;if(opts.tint){lens.css('background','url("'+sImg.attr('src')+'")');$tint=jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />',sImg.outerWidth(),sImg.outerHeight(),opts.tint)).find(':last');$tint.css('opacity',opts.tintOpacity);noTrans=true;$tint.fadeIn(500)}if(opts.softFocus){lens.css('background','url("'+sImg.attr('src')+'")');softFocus=jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />',sImg.outerWidth()-2,sImg.outerHeight()-2,opts.tint)).find(':last');softFocus.css('background','url("'+sImg.attr('src')+'")');softFocus.css('opacity',0.5);noTrans=true;softFocus.fadeIn(500)}if(!noTrans){lens.css('opacity',opts.lensOpacity)}if(opts.position!=='inside'){lens.fadeIn(500)}zw.controlLoop();return})};img1=new Image();$(img1).load(function(){ctx.init2(this,0)});img1.src=sImg.attr('src');img2=new Image();$(img2).load(function(){ctx.init2(this,1)});img2.src=jWin.attr('href')}$.fn.CloudZoom=function(options){try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}this.each(function(){var relOpts,opts;eval('var a = {'+$(this).attr('rel')+'}');relOpts=a;if($(this).is('.cloud-zoom')){$(this).css({'position':'relative','display':'block'});$('img',$(this)).css({'display':'block'});if($(this).parent().attr('id')!='wrap'){$(this).wrap('<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>')}opts=$.extend({},$.fn.CloudZoom.defaults,options);opts=$.extend({},opts,relOpts);$(this).data('zoom',new CloudZoom($(this),opts))}else if($(this).is('.cloud-zoom-gallery')){opts=$.extend({},relOpts,options);$(this).data('relOpts',opts);$(this).bind('click',$(this),function(event){var data=event.data.data('relOpts');$('#'+data.useZoom).data('zoom').destroy();$('#'+data.useZoom).attr('href',event.data.attr('href'));$('#'+data.useZoom+' img').attr('src',event.data.data('relOpts').smallImage);$('#'+event.data.data('relOpts').useZoom).CloudZoom();return false})}});return this};$.fn.CloudZoom.defaults={zoomWidth:'auto',zoomHeight:'auto',position:'right',tint:false,tintOpacity:0.5,lensOpacity:0.5,softFocus:false,smoothMove:3,showTitle:true,titleOpacity:0.5,adjustX:0,adjustY:0}})(jQuery);
Все сделала, фото товара открывается в том же окне на весь экран. Но не никакой кнопочки, чтобы закрыть изображение. Может я что-то не так сделала? Аккаунт SL-313392
#173310 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 18 Ноябрь 2014 - 19:24 в Шаблон Осень
Дайте мне, пожалуйста код, который можно будет поставить вместо зума. Чтобы при нажатии на фото товара она открывалась во всплывающем окне.
#173006 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 17 Ноябрь 2014 - 16:11 в Шаблон Осень
#173317 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 18 Ноябрь 2014 - 19:42 в Шаблон Осень
#173257 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 18 Ноябрь 2014 - 16:42 в Шаблон Осень
Гузель (17 Ноябрь 2014 - 14:14) писал:
После проделанных изменений на сайте появились проблемы:
1) На странице товара и подкатегорий товаров после шапки идет пустое место http://awesomescreen....com/0383v2lra1 скриншот
2) Проблема с зумом в карточке товара Плееры Медиаплеер iconBIT XDS7GL Хотя загружали большую картинку 5184 х 3456
Помогите, пожалуйста решить эти проблемы
Помогите решить вторую проблему!!!!
#173333 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 18 Ноябрь 2014 - 20:26 в Шаблон Осень
#175225 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 26 Ноябрь 2014 - 13:09 в Шаблон Осень
В продолжение темы фото товара в карточке товара.
Сейчас дополнительные фотографии при нажатии на них отображаются сразу во всплывающем окне. Как можно сделать, чтобы они при нажатии на дополнительное фото товара это фото показывалось на месте главного фото.
А всплывающее окно отображалось только при нажатии на главное фото
Спасибо
#173340 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 18 Ноябрь 2014 - 20:46 в Шаблон Осень
#173330 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 18 Ноябрь 2014 - 20:16 в Шаблон Осень
#172980 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 17 Ноябрь 2014 - 14:39 в Шаблон Осень
Alekseys (17 Ноябрь 2014 - 14:33) писал:
#header-fluid { min-height: 600px; position: relative; z-index: 10; }на
#header-fluid { position: relative; z-index: 10; }
теперь и на главной все поднялось. Как можно сделать, чтобы на главной был отступ, а на других страницах, где слайдер не отображается, отступа не было?
#171947 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 12 Ноябрь 2014 - 13:49 в Шаблон Осень
#171933 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 12 Ноябрь 2014 - 12:57 в Шаблон Осень
1) Да. Я вчера загрузила 18 картинок для слайдера с расчетом что они будут фоновыми для шапки
2) Актуален. Слоган, который под логотипом, его нужно убрать. В файле html я его убрала из того места, куда ставила сначала. Но на сайте он все равно отображается. А по слогану, который под навигацией нужно применить стили. Достаточно ли прописать стили в файле html?
3) изменения делал фрилансер, я не знаю по каким инструкциям он делал. При наведении мышки на фото при помощи зума (как я понимаю) происходит увеличение картинки. Но с правого и нижнего краев остается область, которая не попадает в зум. Нужно, чтобы всю картинку можно было просмотреть через зум.
#171812 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 11 Ноябрь 2014 - 18:41 в Шаблон Осень
#171733 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 11 Ноябрь 2014 - 11:23 в Шаблон Осень
Аккаунт SL-313392
1) Мне нужно сделать картинку баннера фоновой для шапки.Как на этом сайте http://www.landrover.com/ru/ru/lr/
2) В области под верхней навигацией добавить название магазина текстовое поле.
3) В карточке товара проблемы с зумом: показывает не всю картинку. Мы уже вносили изменения здесь - увеличивали саму картинку, может из-за этого.
4) В карточке товара нужно поменять местами блок с описанием и характеристиками поместить справа от фото товара, а блок с ценой поместить вниз
5) При добавлении фото товара можно ли сделать функцию поворота фото, как в авито?
6) Прицепить якорь к пункту верхней навигации Каталог, чтобы при нажатии на него прокручивалось области после баннера, где начинается непосредственно каталог товаров.
#172968 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 17 Ноябрь 2014 - 14:14 в Шаблон Осень
После проделанных изменений на сайте появились проблемы:
1) На странице товара и подкатегорий товаров после шапки идет пустое место http://awesomescreen....com/0383v2lra1 скриншот
2) Проблема с зумом в карточке товара Плееры Медиаплеер iconBIT XDS7GL Хотя загружали большую картинку 5184 х 3456
Помогите, пожалуйста решить эти проблемы
#172237 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 13 Ноябрь 2014 - 17:37 в Шаблон Осень
1 пункт получилось, спасибо. Теперь в правом верхнем углу сайта не виден блок с сравнением товара, Он сливается с картинкой. Подскажите как сделать. Хочу поставить этот блок вместо поиска в той же форме.
2) Надо бы применить к нему стили примерно так как на рисунке.
3) Проблема с зумом действительно не на всех товарах. Если загруженная картинка больше 640 рх в ширину и 480 рх в высоту, зум отображает нормально. Если же какой-либо параметр меньше, зум показывает неправильно. Мы на самом деле зум не трогали, мы изменили величину главного фото товара. После этого начались проблемы с зумом. Подскажите как решить проблему
#172270 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 13 Ноябрь 2014 - 19:20 в Шаблон Осень
3) У меня проблема с зумом в карточке товара.
#172245 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 13 Ноябрь 2014 - 18:08 в Шаблон Осень
#172262 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 13 Ноябрь 2014 - 18:53 в Шаблон Осень
Гузель (13 Ноябрь 2014 - 17:37) писал:
1 пункт получилось, спасибо. Теперь в правом верхнем углу сайта не виден блок с сравнением товара, Он сливается с картинкой. Подскажите как сделать. Хочу поставить этот блок вместо поиска в той же форме.
2) Надо бы применить к нему стили примерно так как на рисунке.
3) Проблема с зумом действительно не на всех товарах. Если загруженная картинка больше 640 рх в ширину и 480 рх в высоту, зум отображает нормально. Если же какой-либо параметр меньше, зум показывает неправильно. Мы на самом деле зум не трогали, мы изменили величину главного фото товара. После этого начались проблемы с зумом. Подскажите как решить проблему
Понятно. А по другим пунктам сможете помочь?
#172254 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 13 Ноябрь 2014 - 18:28 в Шаблон Осень
#172248 Внесение Изменений В Дизайн Темы
Отправлено от Гузель в 13 Ноябрь 2014 - 18:11 в Шаблон Осень
#175823 В Продолжение Темы Главного Фото Товара
Отправлено от Гузель в 28 Ноябрь 2014 - 21:18 в Страница товара
#175588 В Продолжение Темы Главного Фото Товара
Отправлено от Гузель в 27 Ноябрь 2014 - 17:51 в Страница товара
В продолжение темы фото товара в карточке товара.
Сейчас дополнительные фотографии при нажатии на них отображаются сразу во всплывающем окне. Как можно сделать, чтобы они при нажатии на дополнительное фото товара это фото показывалось на месте главного фото.
Производила изменения по инструкции приведенной здесь http://forum.storela...зображения-при/.
А всплывающее окно отображалось только при нажатии на главное фото
Спасибо
- Форум владельцев интернет-магазинов
- → Публикации Гузель
- Privacy Policy