Увеличение изображения при нажатии

Версия MODX: Все

В общем суть такая, при нажатии на картинку. для наглядности energosnab.pro/arenda_oborudovania/arenda_udlinitelya380v/5p_ip44_5m.html
открывается картинка того же размера. Как сделать чтобы она увеличивалась в 3 раза.

Константин
07.11.16 в 13:11

Комментарии (10)

Андрей 07.11.2016 13:49 #
Просто сделайте изображение больше, которое генерируется в href:
```
<a href="тут вызов phpthumbof">.......</a>
```

Павел Романов 07.11.2016 13:50 #

У Вас сейчас в шаблоне скорее всего прописано что-то типа этого (вместо ********** — параметры, которые отвечают за водяной знак):

<a href="[[*image:phpthumbof=`&w=280&h=280**********`]]">
    <img itemprop="image" src="[[*image:phpthumbof=`&w=280&h=280**********`]]" alt="[[*pagetitle]]">
</a>

А надо так:

<a href="[[*image:phpthumbof=`&w=800**********`]]">
    <img itemprop="image" src="[[*image:phpthumbof=`&w=280&h=280**********`]]" alt="[[*pagetitle]]">
</a>

Константин 07.11.2016 13:52 #

[[$template-head]]
<div id="container">
<style>
    body,p,a,span,ul,li,div,#content h1, .h1, h2{
        font-family: "ArialRegular";
    }
    h2{
        color:#ffa235!important;
        font-size:16px;
        font-weight:bold;
    }
    #content p,#content li{
        margin-top: 8px!important;
        margin-top: 2px!important;
        font-size: 14px!important;
        font-family: "ArialRegular"!important;
    }
    .grid-7 {
        margin-bottom: 10px;
    }
    #content h1
    {
        margin-bottom: 1em;
    }
</style>
        [[$header]]
        [[$breadcrumbs]]
        <section id="content" itemscope itemtype="http://schema.org/Product">
            <div itemprop="name" class="[[*header-align]]" style="display:none">[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]</div>
    <input type="hidden" id="prod_js_name" value="[[*longtitle]]">

            <figure class="grid-5" itemscope itemtype="http://schema.org/ImageObject">
                <img itemprop="image" itemprop="contentUrl" src="[[*thumbnail:is=``:then=`https://placehold.it/280x200/fff`:else=`[[*thumbnail:phpthumbof=`w=280`]]`]]" alt="[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]"/>
                <span itemprop="width" style="display:none;">280</span><span width="height" style="display:none;">auto</span>
                

[[$order_button]]
            </figure>
            <div class="grid-7 grid-padding">
            <h1 itemprop="name" class="[[*header-align]] new_h1_kart">[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]</h1>
                    <div itemprop="description">
                     [[*introtext]]</div>
                     
                      
                  <p></p>   
                <span class="cost_op">Стоимость:</span><span class="cost cost_kart" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                 <span itemprop="price">[[*more-than-30-days]]</span><span itemprop="priceCurrency" style="display:none;" content="RUB"></span>
               </span>
               
                		   
               <div class="kn_kart"> <a onclick="openbox('boxxxz')" class="zakaz_butt_test" data-dspopup-id="boxxxz">Арендовать</a></div>
            
                </div>
                <div class="desc-sale-gen">
                <p style="clear:both;height:15px;"></p>
                <nav class="product-tabs">
                    
                
                
                    
                    <div itemprop="description">
                    [[*content]]</div>
                </div>
                <div class="clearfix b1">
                    [[*product-description]][[*min-desc]]
                
        </section>

</div>
[[$footer]]
[[$template-footer]]

Что на что поменять?

Павел Романов 07.11.2016 14:08 #

1. В файле http://energosnab.pro/js/scriptz.js закомментируйте 63 строку:

jQuery('figure.grid-5................

2. На пятой строке того же файла добавьте:

$(".fancybox").fancybox();

3. В шаблоне сделайте так:

<figure class="grid-5" itemscope itemtype="http://schema.org/ImageObject">
    <a href="[[*thumbnail:phpthumbof=`w=900`]]" class="fancybox">
        <img itemprop="image" itemprop="contentUrl" src="[[*thumbnail:is=``:then=`https://placehold.it/280x200/fff`:else=`[[*thumbnail:phpthumbof=`w=280`]]`]]" alt="[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]"/>
    </a>
    <span itemprop="width" style="display:none;">280</span>
    <span width="height" style="display:none;">auto</span>  
    [[$order_button]]
</figure>

Константин 07.11.2016 14:09 #

Сейчас попробую
Константин 07.11.2016 14:11 #
Не понял что значит закомментировать?
```
jQuery('figure.grid-5 img[itemprop="image"]').wrap(function(){return '<a href="'+jQuery(this).attr('src')+'"></a>'}).parent().fancybox();
```
1. Павел Романов 07.11.2016 14:14 #
  
  // в начале строки
  1. Константин 07.11.2016 14:15 #
    
    Спасибо, добрый человек зайдите проверьте energosnab.pro/arenda_oborudovania/arenda_udlinitelya380v/5p_ip44_5m.html

Константин 07.11.2016 13:51 #

Вот код в шаблоне продукта<br />
[[$template-head]]
body,p,a,span,ul,li,div,#content h1, .h1, h2{
font-family: «ArialRegular»;
}
h2{
color:#ffa235!important;
font-size:16px;
font-weight:bold;
}
#content p,#content li{
margin-top: 8px!important;
margin-top: 2px!important;
font-size: 14px!important;
font-family: «ArialRegular»!important;
}
.grid-7 {
margin-bottom: 10px;
}
#content h1
{
margin-bottom: 1em;
}

[[$header]]
[[$breadcrumbs]]
[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]

280auto

[[$order_button]]

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]
[[*introtext]]

Стоимость:[[*more-than-30-days]]

Арендовать

[[*content]]

[[*product-description]][[*min-desc]]

[[$footer]]
[[$template-footer]]

Константин 07.11.2016 13:52 #

[[$template-head]]
<div id="container">
<style>
    body,p,a,span,ul,li,div,#content h1, .h1, h2{
        font-family: "ArialRegular";
    }
    h2{
        color:#ffa235!important;
        font-size:16px;
        font-weight:bold;
    }
    #content p,#content li{
        margin-top: 8px!important;
        margin-top: 2px!important;
        font-size: 14px!important;
        font-family: "ArialRegular"!important;
    }
    .grid-7 {
        margin-bottom: 10px;
    }
    #content h1
    {
        margin-bottom: 1em;
    }
</style>
        [[$header]]
        [[$breadcrumbs]]
        <section id="content" itemscope itemtype="http://schema.org/Product">
            <div itemprop="name" class="[[*header-align]]" style="display:none">[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]</div>
    <input type="hidden" id="prod_js_name" value="[[*longtitle]]">

            <figure class="grid-5" itemscope itemtype="http://schema.org/ImageObject">
                <img itemprop="image" itemprop="contentUrl" src="[[*thumbnail:is=``:then=`https://placehold.it/280x200/fff`:else=`[[*thumbnail:phpthumbof=`w=280`]]`]]" alt="[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]"/>
                <span itemprop="width" style="display:none;">280</span><span width="height" style="display:none;">auto</span>
                

[[$order_button]]
            </figure>
            <div class="grid-7 grid-padding">
            <h1 itemprop="name" class="[[*header-align]] new_h1_kart">[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]</h1>
                    <div itemprop="description">
                     [[*introtext]]</div>
                     
                      
                  <p></p>   
                <span class="cost_op">Стоимость:</span><span class="cost cost_kart" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                 <span itemprop="price">[[*more-than-30-days]]</span><span itemprop="priceCurrency" style="display:none;" content="RUB"></span>
               </span>
               
                		   
               <div class="kn_kart"> <a onclick="openbox('boxxxz')" class="zakaz_butt_test" data-dspopup-id="boxxxz">Арендовать</a></div>
            
                </div>
                <div class="desc-sale-gen">
                <p style="clear:both;height:15px;"></p>
                <nav class="product-tabs">
                    
                
                
                    
                    <div itemprop="description">
                    [[*content]]</div>
                </div>
                <div class="clearfix b1">
                    [[*product-description]][[*min-desc]]
                
        </section>

</div>
[[$footer]]
[[$template-footer]]

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.