yodaexolon Опубликовано 23 марта, 2015 Жалоба Поделиться Опубликовано 23 марта, 2015 1. Качаем архив и закидываем файлы в папку /js/2. Подключаем в файле /design/ваша_тема/html/index.tpl перед </head> вставляем: <link rel="stylesheet" href="js/cloud-zoom/cloud-zoom.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/cloud-zoom/cloud-zoom.1.0.2.js"></script> <!-- Call quick start function. --> <script type="text/javascript"> CloudZoom.quickStart(); </script> 3. В файле /design/ваша_тема/html/product.tplменяем: <!-- Большое фото --> {if $product->image} <div class="image"> <a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a> </div> {/if} <!-- Большое фото (The End)--> на <!-- Большое фото --> {if $product->image} <div class="image"> <a href="{$product->image->filename|resize:800:600:w}" class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" /></a> </div> {/if} <!-- Большое фото (The End)--> и ниже <!-- Дополнительные фото продукта --> {if $product->images|count>1} <div class="images"> {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *} {foreach $product->images|cut as $i=>$image} <a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a> {/foreach} </div> {/if} <!-- Дополнительные фото продукта (The End)--> на <!-- Дополнительные фото продукта --> {if $product->images|count>1} <div class="images"> {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *} {foreach $product->images|cut:0 as $i=>$image} <a href="{$image->filename|resize:800:600:w}" class='cloud-zoom-gallery' title='{$product->name|escape}' rel="useZoom: 'zoom1', smallImage: '{$image->filename|resize:300:300}' "> <img src="{$image->filename|resize:95:95}" alt = "{$product->name|escape}"/></a> {/foreach} </div> {/if} <!-- Дополнительные фото продукта (The End)--> Настройки:http://jquerylist.ru/image-viewer/cloud-zoom.htmlcloud-zoom.zip Цитата Ссылка на сообщение Поделиться на другие сайты
user Опубликовано 24 марта, 2015 Жалоба Поделиться Опубликовано 24 марта, 2015 Спасибо все работает Цитата Ссылка на сообщение Поделиться на другие сайты
laal4 Опубликовано 24 марта, 2015 Жалоба Поделиться Опубликовано 24 марта, 2015 (изменено) спасибо Изменено 24 марта, 2015 пользователем laal4 Цитата Ссылка на сообщение Поделиться на другие сайты
laal4 Опубликовано 24 марта, 2015 Жалоба Поделиться Опубликовано 24 марта, 2015 Ура заработало !!! Спасибо !!! Цитата Ссылка на сообщение Поделиться на другие сайты
SiteDream Опубликовано 3 апреля, 2015 Жалоба Поделиться Опубликовано 3 апреля, 2015 Не хочет, при выборе другие картинки дополнительные он переключает, а при наведения ничего( Цитата Ссылка на сообщение Поделиться на другие сайты
SELECONICS Опубликовано 4 апреля, 2015 Жалоба Поделиться Опубликовано 4 апреля, 2015 подтверждаю, при наведении на картинку и нажатии на нее, картинку не увеличивает Цитата Ссылка на сообщение Поделиться на другие сайты
yodaexolon Опубликовано 4 апреля, 2015 Автор Жалоба Поделиться Опубликовано 4 апреля, 2015 Скорее всего допустили ошибку при установке, опишите как вы устанавливали Цитата Ссылка на сообщение Поделиться на другие сайты
yodaexolon Опубликовано 4 апреля, 2015 Автор Жалоба Поделиться Опубликовано 4 апреля, 2015 (изменено) подтверждаю, при наведении на картинку и нажатии на нее, картинку не увеличиваетпри наведении картинка увеличивается, а при нажатии ничего и не должно происходить, если вам нужно, чтоб при клике открывался fancybox, то это уже платная функция. http://www.starplugins.com/cloudzoom Изменено 4 апреля, 2015 пользователем yodaexolon Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 4 апреля, 2015 Жалоба Поделиться Опубликовано 4 апреля, 2015 Есть бесплатные аналоги http://www.elevateweb.co.uk/image-zoom/examples Цитата Ссылка на сообщение Поделиться на другие сайты
yodaexolon Опубликовано 4 апреля, 2015 Автор Жалоба Поделиться Опубликовано 4 апреля, 2015 Есть бесплатные аналоги http://www.elevateweb.co.uk/image-zoom/examplesсовершенно верно, будет время создам тему как для simpla прикрутить Цитата Ссылка на сообщение Поделиться на другие сайты
Решение yodaexolon Опубликовано 4 апреля, 2015 Автор Решение Жалоба Поделиться Опубликовано 4 апреля, 2015 (изменено) Итак второе решение зум с всплывающим fancy при клике на фото http://www.elevateweb.co.uk/image-zoom/examples 1. Качаем elevatezoom отсюда: http://www.elevateweb.co.uk/image-zoom/download 2. загружаем папку elevatezoom-master из архива в папку /js/ вашего сайта 3. Подключаем в файле /design/ваша_тема/html/index.tpl перед </head> вставляем: <script src="js/elevatezoom-master/jquery.elevatezoom.js" type="text/javascript"></script> 4. В файле /design/ваша_тема/html/product.tpl меняем: <!-- Большое фото --> {if $product->image} <div class="image"> <a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a> </div> {/if} <!-- Большое фото (The End)--> на: <!-- Большое фото --> {if $product->image} <div class="image"> <img id="zoom_03" src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" data-zoom-image="{$product->image->filename|resize:800:600:w}" /> </div> {/if} <!-- Большое фото (The End)--> и ниже: <!-- Дополнительные фото продукта --> {if $product->images|count>1} <div class="images"> {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *} {foreach $product->images|cut as $i=>$image} <a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a> {/foreach} </div> {/if} <!-- Дополнительные фото продукта (The End)--> на: <!-- Дополнительные фото продукта --> <div class="images"> <div id="gallery_01"> {foreach $product->images as $i=>$image} <a href="#" class="elevateZoom" data-image="{$image->filename|resize:300:300}" data-zoom-image="{$image->filename|resize:800:600:w}"> <img id="zoom_03" src="{$image->filename|resize:95:95}" /> </a> {/foreach} </div> </div> <!-- Дополнительные фото продукта (The End)--> и в конце файла добавляем: {literal} <script> //initiate the plugin and pass the id of the div containing gallery images $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', zoomWindowOffetx: 10, zoomWindowOffety: -3, imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); //pass the images to Fancybox $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); </script> {/literal} 5. Открываем файл /design/ваша_тема/css/style.cssпосле: .product .image { строка 312 комментируем или удаляем text-align: center; и добавляем стили: /*set a border on the images to prevent shifting*/ #gallery_01 img{border:2px solid white;} /*Change the colour*/ .active img{border:2px solid #333 !important;} Рекомендую загружать квадратные фото для красивого отображения на сайте Можно менять вид зума, все настройки здесь: http://www.elevateweb.co.uk/image-zoom/configuration Изменено 4 апреля, 2015 пользователем yodaexolon Цитата Ссылка на сообщение Поделиться на другие сайты
yodaexolon Опубликовано 4 апреля, 2015 Автор Жалоба Поделиться Опубликовано 4 апреля, 2015 И примеры с настройками: http://www.elevateweb.co.uk/image-zoom/examples Цитата Ссылка на сообщение Поделиться на другие сайты
Gandalf Опубликовано 13 апреля, 2015 Жалоба Поделиться Опубликовано 13 апреля, 2015 Все работает, спасибо, сделал еще пару эффектов, которые описаны в настройках Цитата Ссылка на сообщение Поделиться на другие сайты
AlexanderKi Опубликовано 24 мая, 2015 Жалоба Поделиться Опубликовано 24 мая, 2015 (изменено) Спасибо, помогло. Изменено 24 мая, 2015 пользователем AlexanderKi Цитата Ссылка на сообщение Поделиться на другие сайты
rend88 Опубликовано 14 июня, 2015 Жалоба Поделиться Опубликовано 14 июня, 2015 что-то на мой шаблон не крепится, подскажите куда копать. при наведение вроде как бы работает но вот не совсем корректно,1.хочу убрать рамку которая попадает в область при просмотре 2. Добавить другой эффект Inner Zoom Далее код, Это то, на что нужно было заменить то что закомментированно было изначально {if $product->image} <table class="catalog-element-gen_image"> <tbody> <tr> <td> {if $product->image} <!-- <div class="catalog-element-mainimage"> --> <!-- <a class="qb_corner"></a> <a class="da_corner"></a> --> <img id="zoom_03" src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" data-zoom-image="{$product->image->filename|resize:800:600:w}" /> <!-- <div class="glass"> <img class="image_for_watch js_picture_glass" src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" title="{$product->product->name|escape}"> <div class="glass_lupa"></div> </div> </div>--> {else} <div class="catalog-element-mainimage"> <a class="qb_corner"></a> <a class="da_corner"></a> <div class="glass"> <img img class="image_for_watch js_picture_glass" src="design/{$settings->theme|escape}/images/nophoto.gif" ralt="{$product->product->name|escape}" title="{$product->product->name|escape}"> <div class="glass_lupa"></div> </div> </div> Далее вставил этот кодВыделяю большие куски кода для того что бы может более ясная картина будет, так как шаблон у меня интернет-магазин {if $product->images|count>1} <div data-showintime="5" data-itemw="100" class="catalog-element-extimages main_slider"> <!-- <a href="#" class="catalog-element-extimages_arrow_prev icon multimage_icons disabled main_slider-arrow_prev little" rel="nofollow"></a> --> <div class="images"> <div id="gallery_01"> {foreach $product->images as $i=>$image} <a href="#" class="elevateZoom" data-image="{$image->filename|resize:300:300}" data-zoom-image="{$image->filename|resize:800:600:w}"> <img id="zoom_03" src="{$image->filename|resize:95:95}" /> </a> {/foreach} </div> </div> <!-- <a href="#" class="catalog-element-extimages_arrow_next icon multimage_icons main_slider-arrow_next main_slider-arrow_next little" rel="nofollow"></a> --> </div> {/if} </div> ну и в самом конце файла сам скрипт </script></div> {literal} <script> //initiate the plugin and pass the id of the div containing gallery images $("#zoom_03").elevateZoom(); //pass the images to Fancybox $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); </script> {/literal} <!-- /content --> </div> Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 14 июня, 2015 Жалоба Поделиться Опубликовано 14 июня, 2015 У этой рамки в стилях (файлы CSS), скорее всего стоит высокий параметр z-index. А если серьезно то тут так просто не угадаешь в чем именно проблема, нужна как минимум ссылка на сайт чтобы попытаться разобраться. Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 14 июня, 2015 Жалоба Поделиться Опубликовано 14 июня, 2015 А еще давно сталкивался но забывал написать на форуме, в симпле увеличение происходит только в каталоге и карточке товара, у меня в пару проектов клиенты просили чтоб увеличение бы так же на простых страницах тк это норма в других цмс Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 14 июня, 2015 Жалоба Поделиться Опубликовано 14 июня, 2015 А еще давно сталкивался но забывал написать на форуме, в симпле увеличение происходит только в каталоге и карточке товара, у меня в пару проектов клиенты просили чтоб увеличение бы так же на простых страницах тк это норма в других цмс ну да, потому что скрипты увеличения подключаются только там. нужно выносить в index.tpl. самому не понятно почему так было задумано разработчиком {* Увеличитель картинок *} {literal} <script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script> <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" /> <script> $(function() { // Зум картинок $("a.zoom").fancybox({ prevEffect : 'fade', nextEffect : 'fade'}); }); </script> {/literal} Цитата Ссылка на сообщение Поделиться на другие сайты
rend88 Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 У этой рамки в стилях (файлы CSS), скорее всего стоит высокий параметр z-index.А если серьезно то тут так просто не угадаешь в чем именно проблема, нужна как минимум ссылка на сайт чтобы попытаться разобраться.вот ссылка на товар https://dixstore.ru/products/akkamulyator-vneshnij-i6p Цитата Ссылка на сообщение Поделиться на другие сайты
Gandalf Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 Сделайте innerzoom и все zoomType : "inner", у вас фото маленькое, а рамка за пределами, или фото увеличьте или рамку уменьшите Цитата Ссылка на сообщение Поделиться на другие сайты
rend88 Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 (изменено) Сделайте innerzoom и все zoomType : "inner", у вас фото маленькое, а рамка за пределами, или фото увеличьте или рамку уменьшите Вот в этом то и проблема, я следовал инструкции yodaexolon Вставил куски кода, и после этого такая рамка получилосьА именно эффект InnerZoom мне и нужен Как только я меняю настройки на inner потом вообще не работает увеличение Изменено 15 июня, 2015 пользователем rend88 Цитата Ссылка на сообщение Поделиться на другие сайты
Gandalf Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 Куда вставляли? У меня такой код {literal} <script> //initiate the plugin and pass the id of the div containing gallery images $("#zoom_03").elevateZoom({gallery:'gallery_01', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif', zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, zoomType: "inner", cursor: "crosshair", scrollZoom : true }); //pass the images to Fancybox $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); </script> {/literal} Цитата Ссылка на сообщение Поделиться на другие сайты
rend88 Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 Куда вставляли? У меня такой код {literal} <script> //initiate the plugin and pass the id of the div containing gallery images $("#zoom_03").elevateZoom({gallery:'gallery_01', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif', zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, zoomType: "inner", cursor: "crosshair", scrollZoom : true }); //pass the images to Fancybox $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); </script> {/literal} Вот этот код вставил в файл -> product.tpl </script></div> {literal} <script> //initiate the plugin and pass the id of the div containing gallery images $("#zoom_03").elevateZoom({gallery:'gallery_01', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif', zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, zoomType: "inner", cursor: "crosshair", scrollZoom : true }); //pass the images to Fancybox $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); </script> {/literal} <!-- /content --> </div> И после этого не работает по ссылке https://dixstore.ru/products/akkamulyator-vneshnij-i6p Цитата Ссылка на сообщение Поделиться на другие сайты
Gandalf Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 Все работает, но не видно, перекрывается родительскими стилями Цитата Ссылка на сообщение Поделиться на другие сайты
rend88 Опубликовано 15 июня, 2015 Жалоба Поделиться Опубликовано 15 июня, 2015 Все работает, но не видно, перекрывается родительскими стилямиМожет вам скинуть файл стилей? Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.