nilg6666 Опубликовано 2 марта, 2015 Жалоба Поделиться Опубликовано 2 марта, 2015 Переделываю шаблон хочу сделать увеличение картинок товара как в стандартном шаблоне. При нажатии на изображение оно не увеличивается, а просто открывается другом окне. мой код product.tpl {* Страница товара *} <!-- Хлебные крошки /--><div class="row"> <section class="breadcrumb lower twelve columns"> {foreach $product->categories as $cat} <h2 class="title_page upper">{$cat->name} </h2> {/foreach} ← <a rel="nofollow" href="javascript:history.back();">Вернуться</a> / <a href="./">Главная</a> {foreach from=$category->path item=cat} → <a href="./catalog/{$cat->url}/">{$cat->name|escape}</a> {/foreach} {if $brand} → <a href="./catalog/{$cat->url}/{$brand->url}/">{$brand->name|escape}</a> {/if} → <strong>{$product->name|escape}</strong> </section></div><!-- Хлебные крошки #End /--> <div class="row"> <div class="twelve columns"> <hr class="line_separe_black bgsprite"> </div></div> <section class="row one_product producteffect"> <div class="five columns"> <!-- Большое фото --> {if $product->image} <div class="image"> <a href="{$product->image->filename|resize:800:600:w}" class="zoom" data-rel="group"><img src="{$product->image->filename|resize:300:300}" 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" data-rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a> {/foreach} </div> {/if} <!-- Дополнительные фото продукта (The End)--> </div> <div class="seven columns"> <div class="row product_about"> <div class="twelve columns"> <h1 data-product="{$product->id}">{$product->name|escape}</h1> </div> </div> <div class="row product_description"> <div class="1"> {if $brand->image} <a href="./brands/{$brand->url}/"><img src="{$config->brands_images_dir}{$brand->image}" alt="Все модели {$brand->name|escape}"></a> {/if} </div> <div class="1" style=" padding: 10px;"> <p class="content_prod">{$product->body|strip_tags}</p> </div> </div> <div class="row"> <div class="five columns mobile-two"> <div class="product_offer"> {if $product->variants|count > 0} <!-- Цена и заказ товара --> <form class="carteffect custom" action="/cart/" method="get"> <!-- Цена товара --> <div class="price_prod"> <span class="currency_price"><strong>{$product->variant->price|convert}</strong> {$currency->sign|escape}</span> {if $product->variant->compare_price > 0}<sup class="old_price">{$product->variant->compare_price|convert} {$currency->sign|escape}</sup>{/if} </div> <!-- Цена товара (The End) --> <!-- Выбор варианта товара --> {if $product->variants|count < 2} <div class="hide"> <select class="expand" name="variant" id="customDropdown"> {foreach $product->variants as $v} <option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert} {$currency->sign|escape}"{/if} price="{$v->price|convert}" {if $v->id == $product->variant->id}selected{/if}> {$v->name} </option> {/foreach} </select> </div> <br/> {else} <div class="size_prod"> <label for="customDropdown"><b>Выберите размер</b></label> <select class="expand" name="variant" id="customDropdown"> {foreach $product->variants as $v} <option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert} {$currency->sign|escape}"{/if} price="{$v->price|convert}" {if $v->id == $product->variant->id}selected{/if}> {$v->name} </option> {/foreach} </select> <div class="gid_size bgsprite"><a href="javascript:;" data-reveal-id="SizeInfo">гид по размерам</a></div> </div> {/if} <!-- В корзину --> <input type="submit" class="button radius addbutton expand" value="добавить в корзину" added_text="добавлено"> <!-- В корзину (The End) --> </form> <!-- Цена и заказ товара (The End)--> {else} <big>нет в наличии</big> {/if} </div> </div> <div class="seven columns mobile-two"> <div class="other_colour"> <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"></div> </div> <!-- Характеристики товара --> <ul class="more_info_prod circle"> <li>Артикул: {$product->variant->sku}</li> {if $product->features} {foreach $product->features as $f} {if $f->name != 'Цена' && $f->name != 'Цена (руб)'} <li>{$f->name}: {$f->value}</li> {/if} {/foreach} {/if} </ul> </div> </div> </div> </section> {include file='seealso.tpl'} {include file='sizegid.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() { // Раскраска строк характеристик $(".features li:even").addClass('even'); // Зум картинок $("a.zoom").fancybox({ prevEffect : 'fade', nextEffect : 'fade'}); });</script>{/literal} Код index <!DOCTYPE html> {* Общий вид страницы Этот шаблон отвечает за общий вид страниц без центрального блока.*} <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ru"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ru"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="ru"> <![endif]--><!--[if gt IE 8]> <html class="no-js" lang="ru"> <![endif]--><html><head> <base href="{$config->root_url}/"/> <title>{$meta_title|escape}</title> {* Метатеги *} <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="{$meta_description|escape}" /> <meta name="keywords" content="{$meta_keywords|escape}" /> <!-- Set the viewport width to device width for mobile --> <meta name="viewport" content="width=device-width" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> {* Стили *} <link href="design/{$settings->theme|escape}/css/foundation.css" rel="stylesheet" type="text/css" media="screen"/> <link href="design/{$settings->theme|escape}/css/main.css" rel="stylesheet" type="text/css" media="screen"/> <link href="design/{$settings->theme|escape}/images/favicon.ico" rel="icon" type="image/x-icon"/> <link href="design/{$settings->theme|escape}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/> <link href="js/baloon/css/baloon.css" rel="stylesheet" type="text/css" media="screen"/> {* JQuery *} <script src="design/{$settings->theme|escape}/js/jquery.js"></script> </head><body><div id="wrap"> <!-- Шапка (The End)--> {include file='header.tpl'} <!-- Шапка (The End)--> <!-- Вся страница --> <div role="main"> <!-- Основная часть --> {$content} <!-- Основная часть (The End) --> </div> <!-- Вся страница (The End)--> <div id="push"></div></div> <!-- Футер -->{include file='footer.tpl'}<!-- Футер (The End)--> <!-- Included JS Files (Compressed) --><script src="design/{$settings->theme|escape}/js/foundation.min.js"></script><script src="design/{$settings->theme|escape}/js/jquery.zoom.js"></script> {* Всплывающие подсказки для администратора *}{if $smarty.session.admin == 'admin'}<script src ="js/admintooltip/admintooltip.js" type="text/javascript"></script><link href="js/admintooltip/css/admintooltip.css" rel="stylesheet" type="text/css" media="screen"/>{/if} {* Аяксовая корзина *}<script src="design/{$settings->theme}/js/jquery-ui.min.js"></script><script src="design/{$settings->theme}/js/ajax_cart.js"></script> {* Подключаем js-проверку формы *}<script src="js/baloon/js/baloon.js" type="text/javascript"></script> {* Автозаполнитель поиска *}<script src="js/autocomplete/jquery.autocomplete-min.js" type="text/javascript"></script> <script src="design/{$settings->theme|escape}/js/app.js"></script> </body></html> В css /* @group Товар подробно */.product .image { text-align: center; width: 300px; background-color: #ffffff; border: 1px solid #e0e0e0; float: left; padding: 5px; margin-right: 20px;}.product .image img{ max-width: 300px;}.product .images { float: left; clear: left; width: 300px; margin-right: 20px; margin-bottom: 10px; padding-top: 15px; padding-bottom: 15px;}.product .images img{ text-align: center; width: 50px; background-color: #ffffff; border: 1px solid #e0e0e0; float: left; padding: 5px; margin: 4px 10px 10px 0px;}.product .description{ float: right; width: 330px;} .product .features { list-style: none; width: 100%; display: block; clear: both; margin-top: 15px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0;}.product .features li { padding: 10px 5px 10px 5px; overflow: hidden; border-top: 1px solid #e0e0e0; background-color: #f0f0f0;}.product .features li.even{ background-color: #e9e9e9;}.product .features label { font-style: normal; display: block; width: 30%; float: left;}.product .features span { float: left; display: block; width: 70%;}.product .variants { float: left; font-size: 12px;}.product .variant td{ padding-bottom: 6px; vertical-align: middle;}.product .compare_price { font-size: 14px; text-decoration: line-through; white-space: nowrap; color: #707070;}.product .price { font-size: 14px; white-space: nowrap;}.product .variant_name { float: left; margin-right: 10px; font-size: 12px;}.product .variant_radiobutton { margin-right: 5px; margin-left: 0px;}#back_forward { font-size: 14px; margin-bottom: 20px; clear: both;}#back_forward a.prev_page_link{ margin-right: 20px;}/* @end — Товар подробно*/ .tiny_products { list-style: none; display: block;}.tiny_products .product{ width: 210px; margin-right: 10px; margin-bottom: 30px; display: -moz-inline-box; display: inline-block; *zoom: 1; *display: inline; word-spacing: normal; vertical-align: top;}.tiny_products .product .image { vertical-align: middle; text-align: center; width: 200px; height: 200px; line-height: 200px; background-color: #ffffff; border: 1px solid #e0e0e0; padding: 5px; margin-bottom: 10px;}.tiny_products .product .image img{ vertical-align: middle; max-width: 200px;}.tiny_products .product h3 { font-size: 14px; margin-bottom: 10px; font-weight: normal;}.tiny_products .product h3.featured{ background: url(../images/star.png) no-repeat; background-position: left middle; padding-left: 20px;} .products { list-style: none; display: block;}.products .product{ width: 100%; display: block; clear: both; overflow: hidden;}.products .product .image { text-align: center; width: 200px; background-color: #ffffff; border: 1px solid #e0e0e0; float: left; padding: 5px; margin: 4px 0px 20px 0px;}.products .product .image img{ max-width: 200px;}.products .product .product_info { float: right; width: 450px; margin-bottom: 40px;}.products .product h3 { font-size: 20px; margin-bottom: 5px; font-weight: normal;}.products .product h3.featured{ background: url(../images/star.png) no-repeat; background-position: left middle; padding-left: 20px;} .products .product .annotation { font-size: 12px; color: #505050; margin-bottom: 5px;} Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 2 марта, 2015 Жалоба Поделиться Опубликовано 2 марта, 2015 и? Цитата Ссылка на сообщение Поделиться на другие сайты
nilg6666 Опубликовано 2 марта, 2015 Автор Жалоба Поделиться Опубликовано 2 марта, 2015 не открывает фотографию товара в новом окне Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 2 марта, 2015 Жалоба Поделиться Опубликовано 2 марта, 2015 // Зум картинок $("a.zoom").fancybox({ 'hideOnContentClick' : true }); Цитата Ссылка на сообщение Поделиться на другие сайты
simpla24 Опубликовано 2 марта, 2015 Жалоба Поделиться Опубликовано 2 марта, 2015 (изменено) чего гадать то? дайте ссылку на Ваш продукт Изменено 2 марта, 2015 пользователем fancy-studio Цитата Ссылка на сообщение Поделиться на другие сайты
Olastore Опубликовано 29 июня, 2015 Жалоба Поделиться Опубликовано 29 июня, 2015 та же проблема. Картинка не увеличивается, а открывается в отдельном окне. http://kyxtex.ru/products/lex-gs-600-inox-vstraivaemaya-vytyazhka Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 29 июня, 2015 Жалоба Поделиться Опубликовано 29 июня, 2015 та же проблема. Картинка не увеличивается, а открывается в отдельном окне. http://kyxtex.ru/products/lex-gs-600-inox-vstraivaemaya-vytyazhka в самом низу в product.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() { // Раскраска строк характеристик $(".features li:even").addClass('even'); // Зум картинок $("a.zoom").fancybox({ prevEffect : 'fade', nextEffect : 'fade'}); }); </script> {/literal} у вас они подключены, но файла js/fancybox/jquery.fancybox.css нет - https://yadi.sk/i/uEcdxVCThZH7i Цитата Ссылка на сообщение Поделиться на другие сайты
Olastore Опубликовано 29 июня, 2015 Жалоба Поделиться Опубликовано 29 июня, 2015 mishanya большое спасибо за помощь! все заработало Цитата Ссылка на сообщение Поделиться на другие сайты
Olastore Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 (изменено) Та же проблема с другим сайтом. Но здесь файлы прописаны как на предыдущем, но картинка открывается в новом окне http://foster-bt.ru Что не так? Изменено 18 июля, 2015 пользователем Olastore Цитата Ссылка на сообщение Поделиться на другие сайты
Rash Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 (изменено) Та же проблема с другим сайтом. Но здесь файлы прописаны как на предыдущем, но картинка открывается в новом окне http://foster-bt.ru Что не так? Подключены 2 библиотеки jquery <script src="js/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Оставьте одну из них Изменено 18 июля, 2015 пользователем Rash Цитата Ссылка на сообщение Поделиться на другие сайты
Olastore Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 Подключены 2 библиотеки jquery <script src="js/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Оставьте одну из них убрал, но не решает проблему Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 Экстрасенсы в отпуске...Хотите помощь - дайте ссылку на сайт. Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 убрал, но не решает проблему не убрали https://yadi.sk/i/1eJgXA3yhwcf2 Цитата Ссылка на сообщение Поделиться на другие сайты
Olastore Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 Подключены 2 библиотеки jquery <script src="js/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Оставьте одну из них Все, получилось. Спасибо Вам! Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 Экстрасенсы в отпуске...Хотите помощь - дайте ссылку на сайт. постом выше Цитата Ссылка на сообщение Поделиться на другие сайты
Olastore Опубликовано 18 июля, 2015 Жалоба Поделиться Опубликовано 18 июля, 2015 постом выше Спасибо, все получилось ) Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.