{% extends "base.html" %}
{% load staticfiles %}
{% load sitetree %}
{% load thumbnail %}

{% block title %}{{prostopages.title_us|safe}}{% endblock %}
{% block description %}{{prostopages.description|safe}}{% endblock %}

{% block og_title %}{{prostopages.title_us|safe}}{% endblock %}
{% block og_description %}{{prostopages.description|safe}}{% endblock %}
{% block og_url %}{{ request.build_absolute_uri }}{% endblock %}
{% block image_src %}{% if prostopages.image %}/media/{{prostopages.image|safe}}{% else %}/media/zaglavka.png{% endif %}{% endblock %}

{% block canonical %}{% if request.is_secure %}https://{% else %}http://{% endif %}{{ request.get_host }}{{ prostopages.get_absolute_url }}{% endblock %}


{% block content %}
{% include "header.html" %}
{% include "menu-left-no-pjax.html" %}


<script>
(function($) {
$(function() {

    $('ul.tabs__caption_photos').on('click', 'li:not(.active)', function() {
        $(this)
            .addClass('active').siblings().removeClass('active')
            .closest('div.tabs_wrapper_photos').find('div.tabs__content_photos').removeClass('active').eq($(this).index()).addClass('active');
    });

});
})(jQuery);
</script>


<div class="procedure2">

    <div class="page-navigation-tovar">
        <ul>
            <nav class="woocommerce-breadcrumb">
                <li><a href="/#tops">Салон красоты ФиФа</a></li>&nbsp;/&nbsp;Фотографии</nav>
        </ul>
    </div>
</div>



<div class="procedure">
    <h1 class="page">Фотографии</h1>
</div>

<center>
<div id="ajax_ns_paginator" style="display:none">{{ ajax_ns.paginator.num_pages }}</div> 
<div id="ajax_ps_paginator" style="display:none">{{ ajax_ps.paginator.num_pages }}</div> 
<div id="ajax_ks_paginator" style="display:none">{{ ajax_ks.paginator.num_pages }}</div> 
<div id="ajax_sk_paginator" style="display:none">{{ ajax_sk.paginator.num_pages }}</div> 
</center>

<script type="text/javascript">
$(document).ready(function(){
    $("#imgLoad_ns").hide(); // Скрываем прелоадер
    $("#imgLoad_ps").hide(); // Скрываем прелоадер
    $("#imgLoad_ks").hide(); // Скрываем прелоадер
    $("#imgLoad_sk").hide(); // Скрываем прелоадер
});

var page_ns = 1; //чтобы знать с какой записи вытаскивать данные
var page_ps = 1; //чтобы знать с какой записи вытаскивать данные
var page_ks = 1; //чтобы знать с какой записи вытаскивать данные
var page_sk = 1; //чтобы знать с какой записи вытаскивать данные


var ajax_ns_paginator_cifra = document.getElementById("ajax_ns_paginator").innerHTML;

$(function() {
    $("#ajax_ns").click(function(){ // Выполняем если по кнопке кликнули

        page_ns++; // Увеличиваем значение на еденицу, в итоге получиться загрузка картинок со второй страницы.
        
        $("#imgLoad_ns").show(); // Показываем прелоадер
        
        $.ajax({
            url: "/ajax_ns", // Обработчик
            type: "GET",       // Отправляем методом GET
            data: "page="+page_ns, // Переменная с номером страницы
            cache: false,           
            success: function(response){
                if (response == 0) { // Смотрим ответ от сервера и выполняем соответствующее действие
                    $("#imgLoad_ns").hide();
                    $("#ajax_ns").hide();
                }else{
                    
                    if (page_ns == ajax_ns_paginator_cifra){ 
                        $("#imgLoad_ns").hide();
                        $("#ajax_ns").hide(); 
                    }
                    $("#ajax_ns_content").append(response);
                    $("#imgLoad_ns").hide();

                }
            }
        });
    });
});


var ajax_ps_paginator_cifra = document.getElementById("ajax_ps_paginator").innerHTML;

$(function() {
    $("#ajax_ps").click(function(){ // Выполняем если по кнопке кликнули

        page_ps++; // Увеличиваем значение на еденицу, в итоге получиться загрузка картинок со второй страницы.
        
        $("#imgLoad_ps").show(); // Показываем прелоадер
        
        $.ajax({
            url: "/ajax_ps", // Обработчик
            type: "GET",       // Отправляем методом GET
            data: "page="+page_ps, // Переменная с номером страницы
            cache: false,           
            success: function(response){
                if (response == 0) { // Смотрим ответ от сервера и выполняем соответствующее действие
                    $("#imgLoad_ps").hide();
                    $("#ajax_ps").hide();
                }else{
                    
                    if (page_ps == ajax_ps_paginator_cifra){ 
                        $("#imgLoad_ps").hide();
                        $("#ajax_ps").hide(); 
                    }
                    $("#ajax_ps_content").append(response);
                    $("#imgLoad_ps").hide();

                }
            }
        });
    });
});




var ajax_ks_paginator_cifra = document.getElementById("ajax_ks_paginator").innerHTML;

$(function() {
    $("#ajax_ks").click(function(){ // Выполняем если по кнопке кликнули

        page_ks++; // Увеличиваем значение на еденицу, в итоге получиться загрузка картинок со второй страницы.
        
        $("#imgLoad_ks").show(); // Показываем прелоадер
        
        $.ajax({
            url: "/ajax_ks", // Обработчик
            type: "GET",       // Отправляем методом GET
            data: "page="+page_ks, // Переменная с номером страницы
            cache: false, 
            success: function(response){
                if (response == 0) { // Смотрим ответ от сервера и выполняем соответствующее действие
                    $("#imgLoad_ks").hide();
                    $("#ajax_ks").hide();
                }else{
                    
                    if (page_ks == ajax_ks_paginator_cifra){ 
                        $("#imgLoad_ks").hide();
                        $("#ajax_ks").hide(); 
                    }
                    $("#ajax_ks_content").append(response);
                    $("#imgLoad_ks").hide();

                }
            }
    
        });
    });
});









var ajax_sk_paginator_cifra = document.getElementById("ajax_sk_paginator").innerHTML;

$(function() {
    $("#ajax_sk").click(function(){ // Выполняем если по кнопке кликнули

        page_sk++; // Увеличиваем значение на еденицу, в итоге получиться загрузка картинок со второй страницы.
        
        $("#imgLoad_sk").show(); // Показываем прелоадер
        
        $.ajax({
            url: "/ajax_sk", // Обработчик
            type: "GET",       // Отправляем методом GET
            data: "page="+page_sk, // Переменная с номером страницы
            cache: false,           
            success: function(response){
                if (response == 0) { // Смотрим ответ от сервера и выполняем соответствующее действие
                    $("#imgLoad_sk").hide();
                    $("#ajax_sk").hide();
                }else{
                    
                    if (page_sk == ajax_sk_paginator_cifra){ 
                        $("#imgLoad_sk").hide();
                        $("#ajax_sk").hide(); 
                    }
                    $("#ajax_sk_content").append(response);
                    $("#imgLoad_sk").hide();
                }
            }
    
        });
    });
});

</script>




<!-- начало табов -->
<div class="tabs_wrapper_photos">
    <ul class="tabs__caption_photos">
        




        <li class="">
            <div class="bg_li bg_li_nogtevoi">Ногтевой сервис</div>
            <div class="tabs__content_photos">
                <!-- начало контента ногтевой сервис -->
            <div id="ajax_ns_content">
  {% for fotos in prostopages.fotos.all|slice:":12" %}
                <div class="gallary-img-photos">
                    <a data-fancybox="gallery" href="/media/{{fotos.image}}" class="fancybox" rel="fancybox">
                        {% thumbnail fotos.image "300x300" crop="center" as im %}
                        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"> {% endthumbnail %}
                    </a>
                </div>
                    {% endfor %}
            </div>

                <center>
                    <img src="{% static "/img/loading2.gif"%}" id="imgLoad_ns" style="display: block;margin: 15px 0 0 0;width: 50px ">
                    <div class="button_ajax" id="ajax_ns">Показать еще фотографий</div> 
                </center>
                <!-- конец контента ногтевой сервис -->
            </div>
        </li>



        <li class="">
            <div class="bg_li bg_li_parihmaher">Парихмахерский сервис</div>
            <div class="tabs__content_photos">
                <!-- начало контента парихмахерский сервис -->
                 <div id="ajax_ps_content">
                 {% for fotos2 in prostopages.fotos2.all|slice:":12" %}
                <div class="gallary-img-photos">
                    <a data-fancybox="gallery" href="/media/{{fotos2.image}}" class="fancybox" rel="fancybox">
                        {% thumbnail fotos2.image "300x300" crop="center" as im %}
                        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"> {% endthumbnail %}
                    </a>
                </div>
                    {% endfor %}
                </div>

                <!-- конец контента парихмахерский сервис -->
            <center>
                 <img src="{% static "/img/loading2.gif"%}" id="imgLoad_ps" style="display: block;margin: 15px 0 0 0;width: 50px ">
                <div class="button_ajax" id="ajax_ps">Показать еще фотографий</div> 
            </center>
            </div>
        </li>
        




        <li class="">
            <div class="bg_li bg_li_kosmetic">Косметический сервис</div>
            <div class="tabs__content_photos">
                <!-- начало косметический сервис -->
                 <div id="ajax_ks_content">
                 {% for fotos3 in prostopages.fotos3.all|slice:":12" %}
                <div class="gallary-img-photos">
                    <a data-fancybox="gallery" href="/media/{{fotos3.image}}" class="fancybox" rel="fancybox">
                        {% thumbnail fotos3.image "300x300" crop="center" as im %}
                        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"> {% endthumbnail %}
                    </a>
                </div>
                    {% endfor %}
                </div>
                <!-- конец косметический сервис -->
                <center>{{ prostopages.paginator.num_pages }}
                    <img src="{% static "/img/loading2.gif"%}" id="imgLoad_ks" style="display: block;margin: 15px 0 0 0;width: 50px ">
                    <div class="button_ajax" id="ajax_ks">Показать еще фотографий</div> 
                </center>

            </div>
        </li>







        <li class="">
            <div class="bg_li bg_li_salon">Салон красоты</div>
            <div class="tabs__content_photos">
                <!-- начало контента салона красоты -->
                 <div id="ajax_sk_content">
                    {% for salonkrasoti in prostopages.salonkrasoti.all|slice:":12" %}
                <div class="gallary-img-photos">
                    <a data-fancybox="gallery" href="/media/{{salonkrasoti.image}}" class="fancybox" rel="fancybox">
                        {% thumbnail salonkrasoti.image "300x300" crop="center" as im %}
                        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"> {% endthumbnail %}
                    </a>
                </div>
                    {% endfor %}
                </div>
                <!-- конец контента салона красоты -->
                <center>
                     <img src="{% static "/img/loading2.gif"%}" id="imgLoad_sk" style="display: block;margin: 15px 0 0 0;width: 50px ">
                    <div class="button_ajax" id="ajax_sk">Показать еще фотографий</div> 
                </center>
            </div>
        </li>




    </ul>





</div>
<!-- конец табов -->









<!--  -->

{% include "menu-right.html" %}
{% include "footer.html" %}
{% endblock %}