rophako/rophako/modules/photo/templates/photos/arrange_photos.html

58 lignes
1.8 KiB
HTML

{% extends "layout.html" %}
{% block title %}Arrange Photos{% endblock %}
{% block content %}
<h1>Arrange Photos</h1>
Drag and drop your photos in the positions you want them in.<p>
<form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_photos', album=album) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token() }}">
<input type="hidden" name="order" id="order" value="">
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
<p>
<ul id="arrange-photos" class="photo-grid">
{% for photo in photos %}
<li data-name="{{ photo['key'] }}" class="portrait">
<div class="dummy"></div>
<div class="photo-grid-item">
<img src="{{ app['photo_url'] }}/{{ photo['data']['thumb'] }}" width="100%" height="100%">
<span class="name">{{ photo['data']['caption'] }}</span>
</div>
</li>
{% endfor %}
</ul>
<div class="clear"></div>
{% endblock %}
{% block scripts %}
<link rel="stylesheet" type="text/css" media="all" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css">
<script src="/js/jquery-ui-1.10.4.custom.js"></script>
<script>
$(document).ready(function() {
var $photos = $("#arrange-photos"),
$form = $("#arrange-form"),
$order = $("#order");
var doArrangePhotos = function() {
var order = [];
// Get the list of elements.
var list = $photos.children().each(function() {
var name = $(this).data("name");
order.push(name);
});
$order.val(order.join(";"));
return true;
};
$form.submit(doArrangePhotos);
$photos.sortable();
$photos.disableSelection();
});
</script>
{% endblock %}