Template source: listing/gallery.html

{% load i18n %}{% load staticfiles %}{% load embed_video_tags %}{% load embed_video_thumbnail %}
<link href="{% static 'css/stylesheets/flexslider.css' %}" rel="stylesheet" type="text/css" />

{# Carousel Images #}
<div id="slider" class="flexslider loading">
  <ul class="slides">
    {% if listing.video_url %}
        <li>
            <div class="embed-responsive embed-responsive-4by3">
                {% video listing.video_url 'medium' %}
            </div>
        </li>
    {% endif %}

    {% for gallery_image in listing_gallery %}
    <li>
      <div class="image-wrapper img-polaroid">
        <a href="{{ gallery_image.full_image_url }}" class="fancybox" sort="{{ gallery_image.index }}" title="{{ gallery_image.title }}" rel="fancybox-button">
          <img src="{% block image_src %}{{ gallery_image.thumb_large_url }}{% endblock %}" />
        </a>
          {% if gallery_image.title %}
          <div class="caption visible-tablet visible-desktop">
           {{ gallery_image.title }}
          </div>
          {% endif %}
      </div>
    </li>
    {% endfor %}
  </ul>
</div>

{#  Thumbnail Images #}
{% if listing_gallery|length > 1 or listing.video_url %}
<div id="carousel" class="flexslider">
  <ul class="slides">
    {% if listing.video_url %}
      <li><img class="img-polaroid" src="{% video_small_thumbnail listing.video_url %}" style="width:75px;"></li>
    {% endif %}
    {% for gallery_image in listing_gallery %}
    <li><img src="{{ gallery_image.thumb_small_url }}" class="img-polaroid" /></li>
    {% endfor %}
  </ul>
</div>
{% endif%}

{% block raw_js %}
<script type="text/javascript">
    $(window).load(function() {
      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider) {
            slider.removeClass('loading');
        }
      });

      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 100,
        itemMargin: 5,
        asNavFor: '#slider'
      });
    });

    // fancybox
	$(".fancybox").fancybox({
		prevEffect	: 'fade',
		nextEffect	: 'fade',
		closeBtn	: true,
        autoPlay    : false,
        playSpeed   : 3000,
		helpers		: {
			title	: { type : 'inside' },
			buttons	: {}
		}
    });
</script>
{% endblock %}