Source

cmsplugin-photologue / cmsplugin_photologue / templates / plugins / cmsplugin_photologue / photologue_popup_photo.html

{% load sekizai_tags %}
<a href="#" id="trigger{{ photo.pk }}" class="popup-trigger">
    <figure class="{% ifequal display_mode '6' %}thumbnail {% else %} photo {% endifequal %} {% if css %}{{ css }}{% endif %}">
            {% ifequal display_mode '0' %}    
                <img src="{{ photo.get_desktop_big_normal_url }}" alt="{{ title }}" />
            {% endifequal %}
            {% ifequal display_mode '1' %}    
                <img src="{{ photo.get_desktop_big_wide_url }}" alt="{{ title }}" />
            {% endifequal %}
            {% ifequal display_mode '2' %}    
                <img src="{{ photo.get_desktop_big_square_url }}" alt="{{ title }}" />
            {% endifequal %}
            {% ifequal display_mode '3' %}    
                <img src="{{ photo.get_desktop_display_normal_url }}" alt="{{ title }}" />
            {% endifequal %}
            {% ifequal display_mode '4' %}    
                <img src="{{ photo.get_desktop_display_wide_url }}" alt="{{ title }}" />
            {% endifequal %}
            {% ifequal display_mode '5' %}    
                <img src="{{ photo.get_desktop_display_square_url }}" alt="{{ title }}" />
            {% endifequal %}
            {% ifequal display_mode '6' %}    
                <img src="{{ photo.get_desktop_display_thumb_url }}" alt="{{ title }}" />
            {% endifequal %}
    {% if photo.title or photo.caption %}<figcaption><strong>{{ title }} </strong>{% if description %}, {{ description }}{% endif %}</figcaption>{% endif %}
    </figure>
</a>
<div class="modal-popup" id="popup{{ photo.pk }}">
        {% ifequal popup_display_mode '0' %}    
            <img src="{{ popup.get_desktop_big_normal_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_big_normal_size.0 }}" height="{{ photo.get_desktop_big_normal_size.1 }}" />
        {% endifequal %}
        {% ifequal popup_display_mode '1' %}    
            <img src="{{ popup.get_desktop_big_wide_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_big_wide_size.0 }}" height="{{ photo.get_desktop_big_wide_size.1 }}" />
        {% endifequal %}
        {% ifequal popup_display_mode '2' %}    
            <img src="{{ popup.get_desktop_big_square_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_big_square_size.0 }}" height="{{ photo.get_desktop_big_square_size.1 }}" />
        {% endifequal %}
        {% ifequal popup_display_mode '3' %}    
            <img src="{{ popup.get_desktop_display_normal_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_display_normal_size.0 }}" height="{{ photo.get_desktop_display_normal_size.1 }}" />
        {% endifequal %}
        {% ifequal popup_display_mode '4' %}    
            <img src="{{ popup.get_desktop_display_wide_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_display_wide_size.0 }}" height="{{ photo.get_desktop_display_wide_size.1 }}" />
        {% endifequal %}
        {% ifequal popup_display_mode '5' %}    
            <img src="{{ popup.get_desktop_display_square_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_display_square_size.0 }}" height="{{ photo.get_desktop_display_square_size.1 }}" />
        {% endifequal %}
        {% ifequal popup_display_mode '6' %}    
            <img src="{{ popup.get_desktop_display_thumb_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_thumb_size.0 }}" height="{{ photo.get_desktop_thumb_size.1 }}" />
        {% endifequal %}
</div>
{% addtoblock "sekizaijs" %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".popup-trigger").each(function() {
        var trigger_id = $(this).attr('id');
        var current_id = trigger_id.split('trigger')[1];
        var popup_id = '#popup' + current_id;
        var popup_title = $(popup_id).find('img').attr('alt');
        
        var closedialog;
        
        function overlayclickclose() {
            if (closedialog) {
                $(popup_id).dialog('close');
            }
            //set to one because click on dialog box sets to zero 
            closedialog = 1;
        }
         
        $(popup_id).dialog({
            title: popup_title,
            autoOpen: false,
            show: 'fade',
			hide: 'fade',
            modal: true,
            width: 'auto',
            height: 'auto',
            resizable: false,
            open: function(){closedialog = 1;$(document).bind('click', overlayclickclose);},
            focus: function(){closedialog = 0;},
            close: function(){$(document).unbind('click');},
        });
        
        $(this).click(function() {
            $(popup_id).dialog('open');
            closedialog = 0;
        });
    });
});
</script> 
{% endaddtoblock %}