proekton.com/work_sell/templates/worksell_detail.html

{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% block content %}
    {% include 'partials/header.html' %}
	<div class="container mainScore">
		<div class="row">
			<div class="col-lg-12 allProjects">
				<p class="titleScore">{{ object }}</p>
				<div class="all all1">
					<p>предыдущий</p>
				</div>
				<div class="all all2">
					<p>следующий</p>
				</div>
			</div>
			<div class="btnReadyBlock disTab">
				<div class="triangle1"></div>
				<div class="col-lg-3">
					<p class="cenaReady">{{ object.budget }} <i class="fa fa-rub"></i></p>
				</div>
				<div class="col-lg-3">
					<a href="{% url 'users:contractor-profile' object.contractor.pk %}" class="linkReady LR1">
						купить
					</a>
				</div>
				<div class="col-lg-3">
					<a href="{% url 'chat:chat-user' %}" class="linkReady LR2">
						Написать сообщение
					</a>
				</div>
				<div class="col-lg-3">
					<a href="#" data-toggle="modal" data-target="#contact-contactor-modal"  class="linkReady LR3">
						посмотреть контакты
					</a>
				</div>
			</div>

                        <div id="contact-contactor-modal" class="modal fade">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">Контакты владельца </h4>
                                    </div>
                                    <div class="modal-body">
                                        <h2>Здесь находятся контакты владельца</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

			<div class="desReadyBlock">
				<div class="col-lg-10 col-lg-offset-1">
					<p class="titleReady">Описание:</p>
				</div>
				<div class="col-lg-10 col-lg-offset-1">
					<p class="textReady">
						{{ object.text }}
                    </p>
				</div>
				<div class="col-lg-12 sliderReady">
				<div class="arroww prev3"></div>
			    <div class="arroww next3"></div>
			    <div class="swiper-container gallery-top">
			        <div class="swiper-wrapper">

			            <div class="swiper-slide" style="background-image:url('{% static object.img.url %}')"></div>
                        {% for photo in object.photos.all %}
			            <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
			            {% endfor %}
			        </div>
			    </div>
			    <div class="swiper-container gallery-thumbs">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide is-selected" style="background-image:url('{% static object.img.url %}')"></div>
			            {% for photo in object.photos.all %}
                            <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
                         {% endfor %}
			             </div>
			    </div>
				</div>
				<div class="col-lg-12">
					<div class="triangle2"></div>
					<div class="arr arr1"></div>
					<div class="arr arr2"></div>
				</div>
			</div>
			<div class="col-lg-12 sibl">
				<p>Похожие работы</p>
			</div>


			<div class="gallMini disTab">
                           {% for worksell in worksell_related %}
				<div class="col-lg-3">

					<div class="insetCol box-sizing disTab">
                        {% thumbnail worksell.img "265x265" crop="center" as im %}
						<div class="imgGal" style="background: url('{{ im.url }}') no-repeat center;">
							<div class="imgFigure"></div>
						</div>
                        {% endthumbnail %}
					</div>
				</div>
                     {% endfor %}
			</div>

            {% include 'partials/footer.html' %}

		</div>
	</div>

{% endblock %}
{% block js_block %}
    <script src="{% static 'js/swiper.min.js' %}"></script>
	<script>
	    var galleryTop = new Swiper('.gallery-top', {
			nextButton: '.next3',
			prevButton: '.prev3',
			spaceBetween: 10,
		});
	  	var galleryTop = new Swiper('.gallery-top', {
	        nextButton: '.next3',
	        prevButton: '.prev3',
	        spaceBetween: 15,
	      	onSlideChangeEnd: function(swiper){
	            var activeIndex = swiper.activeIndex;
	            $(galleryThumbs.slides).removeClass('is-selected');
	            $(galleryThumbs.slides).eq(activeIndex).addClass('is-selected');
	            galleryThumbs.slideTo(activeIndex,300, false);

	        }

	    });
	    var galleryThumbs = new Swiper('.gallery-thumbs', {
	        spaceBetween: 15,
	        freeMode: true,
	        centeredSlides: false,
	        slidesPerView: 6,
	        touchRatio: 0.2,
	        nextButton: '.arr2',
	        prevButton: '.arr1',
	        onClick: function (swiper, event){
	            var clicked = swiper.clickedIndex
	            swiper.activeIndex = clicked;
	            swiper.updateClasses()
	            $(swiper.slides).removeClass('is-selected');
	            $(swiper.clickedSlide).addClass('is-selected');
	            galleryTop.slideTo(clicked,300, false);

	        }
	    });
    </script>
        {% endblock %}