summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorluxagraf <sng@luxagraf.net>2011-04-03 17:47:53 -0400
committerluxagraf <sng@luxagraf.net>2011-04-03 17:47:53 -0400
commitcc0b6b24dcadfe7cb2902e91044f62043880d9f9 (patch)
treeb8904ec143f6df366a4f357966745d012873a459 /templates
parentdb2da1d51e5bf6c22988791114d544cfca632637 (diff)
rewrote photo pages and stylesheets to get rid of slideshow and use pictory style arrow scrolling
Diffstat (limited to 'templates')
-rw-r--r--templates/details/photo_galleries.html131
1 files changed, 48 insertions, 83 deletions
diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html
index db8c5ad..9596737 100644
--- a/templates/details/photo_galleries.html
+++ b/templates/details/photo_galleries.html
@@ -1,82 +1,50 @@
-<!DOCTYPE html>
-<!--[if gte IE 6]>
- <![if IE 6]>
- <html lang="en" class="ie ie6">
- <![endif]>
- <![if IE 7]>
- <html lang="en" class="ie ie7">
- <![endif]>
- <![if gt IE 7]>
- <html lang="en" class="ie ie8">
- <![endif]>
-<![endif]-->
-<!--[if !IE]> <-->
-<html lang="en">
-<!--> <![endif]-->
-<head>
- <title>Luxagraf | Photos | {{object.set_title}}</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
- <!--[if IE]>
- <script src="http://media.luxagraf.net/js/html5.js"></script>
- <![endif]-->
+{% extends 'base.html' %}
+{% load typogrify %}
+{% load number_to_word %}
+{% block pagetitle %}{{object.set_title}} - Luxagraf, Photos{% endblock %}
- <link rel="alternate"
- type="application/rss+xml"
- title="RSS 2.0"
- href="http://feeds2.feedburner.com/luxagraf/blog">
-
-
- <link rel="stylesheet"
- href="{{MEDIA_URL}}css/photos.css"
+{%block stylesheet%}
+ <link rel="stylesheet"
+ href="{{MEDIA_URL}}css/dark.css"
type="text/css"
- media="screen">
-
- <link rel="shortcut icon"
- href="http://media.luxagraf.net/img/favicon.ico"
- type="image/vnd.microsoft.icon">
+ media="screen">
+{%endblock%}
+
- <link rel="apple-touch-icon"
- href="http://media.luxagraf.net/img/luxagrafiphoneicon.png">
+{% block metadescription %}{{object.meta_description|striptags|safe}}{% endblock %}
- <meta name="author" content="luxagraf">
- <meta name="description"
- content="Slideshow: Photos from {{object.set_title}}">
- <meta name="keywords"
- content="photos, slideshow, {{object.set_title}}">
- <meta name="copyright"
- content="Licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License">
+{%block bodyid%}class="image_gallery"{%endblock%}
-
-</head>
-<body>
- <div id="wrapper">
- <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
- <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr;</li>
- <li><a href="/photos/" title="luxagraf photos" itemprop="url"><span itemprop="title">Photos</span></a> &rarr; </li>
- <li>{{object.set_title}}</li>
- </ul>
- <ul id="slides">
+{% block primary %}<section id="page-header">
+ <h1 class="hide">Photos from {{object.set_title}}</h1>
+ <nav id="page-nav">
+ <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+ <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+ <li><a href="/photos/" title="See all Photos" itemprop="url"><span>Photos</span></a> &rarr;</li>
+ <li>{{object.set_title}}</li>
+ </ul>
+ </nav>
+ </section>
+ <p class="directions">Use left/right arrow keys to navigate through photos</p>
+ <section id="slides">
{%for photo in object.photos.all reversed %}
- <li class="bigimg" id="{{photo.get_local_slideshow_url}}" style="height: {{photo.slideshowimage_height}}px; width:{{photo.slideshowimage_width}}px; margin-top:{{photo.slideshowimage_margintop}}px; margin-left:{{photo.slideshowimage_marginleft}}px;">
- <div class="figure">
- <img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" class="imgs" height="{{photo.slideshowimage_height}}" width="{{photo.slideshowimage_width}}" />
+ <article id="image-{{forloop.counter}}">
+ <h6><a href="#image-{{forloop.counter}}" class="permalink" title="link to this image">&#8734; {{forloop.counter|number_to_word}} &#8734;</a></h6>
+ <img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" />
+ <div class="figcaption">
+ <div class="caption" id="id-{{photo.id}}">
+ <h3>{{photo.title}} &nbsp;&nbsp;<span>{{photo.exif_date|date:"M j, Y"}}</span></h3>
+ <a class="map-link" href="#" title="{{photo.lat}},{{photo.lon}},id-{{photo.id}}">Map</a>
+ {%if photo.description %}<p>{{photo.description|safe}}</p> {%endif%}
</div>
- <div class="legend">
- <div class="caption">
- <h5>{{photo.title}} &nbsp;&nbsp;<span>{{photo.exif_date|date:"M j, Y"}}</span></h5>
- {%if photo.description %}
- <p>{{photo.description|safe}}</p>
- {%endif%}
- </div>
-
- <div class="photo-options">
- <a class="map-link" href="#" title="{{photo.lat}},{{photo.lon}},{{photo.title}}">Map</a>
- <a href="#" class="exif-link" title="{{photo.id}}">Camera</a>
- </div>
- <div class="clear"></div>
+ <div class="photo-options">
+ <p class="camera">{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 w/{%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">Lumix 14-45mm lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">Lumix 20mm prime lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">Lumix 45-200mm lens</a>{%endif%}{%if photo.exif_lens == None %}Built-in{%endif%}</p>
+ <p class="details">{{photo.exif_exposure}} sec @ {{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p>
+ <!--<a href="#" class="exif-link" title="{{photo.id}}">Camera</a>-->
</div>
+
+ {%comment%}
<div class="meta" style="display: none;">
<dl>
<dt>Camera:</dt>
@@ -95,22 +63,19 @@
<dd><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></dd>
</dl>
</div>
- </li>
+ {%endcomment%}
+ </div>
+ </article>
{% endfor %}
- </ul>
- </div>
+ </section>
+{%endblock%}
+
+{% block js %}
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
- <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.cycle.pack.js"></script>
- <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.jcarousel.pack.js"></script>
- <script type="text/javascript" src="{{MEDIA_URL}}js/slideshow.pack.js" ></script>
+ <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.scrollTo-1.4.2-min.js"></script>
+ <script type="text/javascript" src="{{MEDIA_URL}}js/slideshow.js" ></script>
<!-- if you'd like to see a non-packed version of my slideshow script, see this file: http://media.luxagraf.net/js/slideshow.js (requires jquery, jcarousel and cycle) -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-
-</body>
-
-</html>
-
-
-
+{% endblock%}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-01-06 05:12:33 +0000