Перейти к содержанию
Официальный форум поддержки Simpla

Изображения открывается другом окне

nilg6666
 Поделиться Подписчики 0

Рекомендуемые сообщения

nilg6666

nilg6666

Опубликовано
Опубликовано

Переделываю шаблон хочу сделать увеличение картинок товара как в стандартном шаблоне. При нажатии на изображение оно не увеличивается, а просто открывается другом окне. 

 

 

мой код 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]>
    <![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;
}

 

Ссылка на сообщение
Поделиться на другие сайты
simpla24

simpla24

Опубликовано
Опубликовано (изменено)

чего гадать то? дайте ссылку на Ваш продукт

Изменено пользователем fancy-studio
Ссылка на сообщение
Поделиться на другие сайты
  • 3 месяца спустя...
mishanya

mishanya

Опубликовано
Опубликовано

та же проблема. Картинка не увеличивается, а открывается в отдельном окне. 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

Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...
Olastore

Olastore

Опубликовано
Опубликовано (изменено)

Та же проблема с другим сайтом. Но здесь файлы прописаны как на предыдущем, но картинка открывается в новом окне http://foster-bt.ru Что не так? 

Изменено пользователем Olastore
Ссылка на сообщение
Поделиться на другие сайты
Rash

Rash

Опубликовано
Опубликовано (изменено)

Та же проблема с другим сайтом. Но здесь файлы прописаны как на предыдущем, но картинка открывается в новом окне 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>
 

Оставьте одну из них

Изменено пользователем Rash
Ссылка на сообщение
Поделиться на другие сайты
Olastore

Olastore

Опубликовано
Опубликовано

Подключены 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>
 

Оставьте одну из них

 

убрал, но не решает проблему

Ссылка на сообщение
Поделиться на другие сайты
Olastore

Olastore

Опубликовано
Опубликовано

Подключены 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>
 

Оставьте одну из них

 

Все, получилось. Спасибо Вам!

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
 Поделиться
Подписчики 0
Перейти к списку тем
×
×
  • Создать...