58 lines
1.7 KiB
HTML
58 lines
1.7 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">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 %} |