summaryrefslogtreecommitdiff
path: root/templates/details/photo_galleries.html
diff options
context:
space:
mode:
authorluxagraf@c63593aa-01b0-44d9-8516-4b9c7e931d7f <luxagraf@c63593aa-01b0-44d9-8516-4b9c7e931d7f>2010-05-06 22:46:22 +0000
committerluxagraf@c63593aa-01b0-44d9-8516-4b9c7e931d7f <luxagraf@c63593aa-01b0-44d9-8516-4b9c7e931d7f>2010-05-06 22:46:22 +0000
commit940e343ee500a990a2be45578708d3f5d9875263 (patch)
tree4f57ac3a994434582047decfa439d6c50b8a7f68 /templates/details/photo_galleries.html
parent1b8c0ae77d1ffe6fe9af30e2c1646ea7cd2466c6 (diff)
revamped slideshow with jquery, maps and exif data
Diffstat (limited to 'templates/details/photo_galleries.html')
-rw-r--r--templates/details/photo_galleries.html417
1 files changed, 91 insertions, 326 deletions
diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html
index e1964e0..bd4c185 100644
--- a/templates/details/photo_galleries.html
+++ b/templates/details/photo_galleries.html
@@ -1,345 +1,110 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!DOCTYPE html>
+<html lang="en">
<head>
<title>Luxagraf | Photos | {{object.set_title}}</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta http-equiv="imagetoolbar" content="false">
- <meta name="description" content="">
- <meta name="keywords" content="">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <style>
-
-html {
- /* Moz */
- height: 100%;
-}
-.wrapper {
- width: 960px;
- margin: 0 auto;
-}
-/* BEGIN GALLERIA STYLE */
-.galleria{list-style:none;width:200px}
-.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 6px 10px 0;border: 3px #2a2a2a solid;}
-.galleria li a{display:none}
-.galleria li div{position:absolute;display:none;top:0;left:180px}
-.galleria li div img{cursor:pointer}
-.galleria li.active {border: 3px #b6b6b6 solid;}
-.galleria li.active div img,.galleria li.active div{display:block}
-.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
-.galleria li .caption{display:block;padding-top:.5em}
-* html .galleria li div span{width:400px} /* MSIE bug */
-
-*{margin:0;padding:0}
-body{padding:20px;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
-h1{font-family:Georgia,"Times New Roman",Times,Serif;text-transform:uppercase;font-size:15px;font-weight: normal}
-h2 a {font-family:Georgia,"Times New Roman",Times,Serif;font-size:12px;font-weight: normal; font-style:italic; color: #b6b6b6; text-decoration: none;}
-a:hover{color:#b53a04;}
-.caption{font-family:Georgia,"Times New Roman",Times,Serif;font-style:italic;color:#887;}
-.demo{position:relative;margin-top:2em;}
-/*.gallery_show{width:702px;margin:0 auto;}*/
-.gallery_show{height:90px;margin:0;}
-.gallery_show li{width:75px;height:75px;border:3px double #111;margin: 2px;background:#000;}
-.gallery_show li div{left:240px}
-.gallery_show li div .caption{font:italic 0.7em/1.4 georgia,serif;}
-
-#main_image{margin:0 auto 20px auto;height:640px;width:960px;}
-#main_image img{margin-bottom:1px;}
-
-.nav{padding-bottom:10px;text-align:center;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
-
-
-
-
-
-/* Menu
----------------------------- */
-
-.clearit {
- margin: 0;
- padding: 0;
- height: 0;
- clear: both;
-}
-/* start jcarousel */
-/**
- * This <div> element is wrapped by jCarousel around the list
- * and has the classname "jcarousel-container".
- */
-.jcarousel-container {
- position: relative;
-}
-
-.jcarousel-clip {
- z-index: 2;
- padding: 0;
- margin: 0;
- overflow: hidden;
- position: relative;
-}
-
-.jcarousel-list {
- z-index: 1;
- overflow: hidden;
- position: relative;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
-}
-
-.jcarousel-item {
- float: left;
- list-style: none;
- /* We set the width/height explicitly. No width/height causes infinite loops. */
- width: 75px;
- height: 75px;
-}
-
-/**
- * The buttons are added dynamically by jCarousel before
- * the <ul> list (inside the <div> described above) and
- * have the classnames "jcarousel-next" and "jcarousel-prev".
- */
-.jcarousel-next {
- z-index: 3;
- display: none;
-}
-
-.jcarousel-prev {
- z-index: 3;
- display: none;
-}
-
-/* end jcarousel */
-
-
-/* start tango jcarousel */
-.jcarousel-skin-tango.jcarousel-container {
- -moz-border-radius: 5px;
- margin: 0 auto;
-}
-
-.jcarousel-skin-tango.jcarousel-container-horizontal {
- width: 960px;
- padding: 10px 40px;
-}
+ <!--[if IE]>
+ <script src="http://media.luxagraf.net/js/html5.js"></script>
+ <![endif]-->
-.jcarousel-skin-tango.jcarousel-container-vertical {
- width: 75px;
- height: 245px;
- padding: 40px 20px;
-}
-.jcarousel-skin-tango .jcarousel-clip-horizontal {
- width: 960px;
- height: 75px;
-}
+ <link rel="alternate"
+ type="application/rss+xml"
+ title="RSS 2.0"
+ href="http://feeds2.feedburner.com/luxagraf/blog">
-.jcarousel-skin-tango .jcarousel-clip-vertical {
- width: 75px;
- height: 245px;
-}
-.jcarousel-skin-tango .jcarousel-item {
- width: 65px;
- height: 65px;
- border: 3px #2a2a2a solid;
-}
-
-.jcarousel-skin-tango .jcarousel-item-horizontal {
- margin-right: 8px;
-}
-
-.jcarousel-skin-tango .jcarousel-item-vertical {
- margin-bottom: 10px;
-}
-
-.jcarousel-skin-tango .jcarousel-item-placeholder {
- background: #000;
- color: #fff;
-}
-
-/**
- * Horizontal Buttons
- */
-.jcarousel-skin-tango .jcarousel-next-horizontal {
- position: absolute;
- top: 22px;
- right: 10px;
- width: 20px;
- height: 53px;
- cursor: pointer;
- background: url({{media_url}}img/slideshow-arrow-right.png) no-repeat 0 0;
-}
-
-.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
- background-position: -20px 0;
-}
+ <link rel="stylesheet"
+ href="{{media_url}}css/photos.css"
+ type="text/css"
+ media="screen">
+
+
-.jcarousel-skin-tango .jcarousel-prev-horizontal {
- position: absolute;
- top: 22px;
- left: 10px;
- width: 20px;
- height: 53px;
- cursor: pointer;
- background: url({{media_url}}img/slideshow-arrow-left.png) no-repeat -20px 0;
-}
+ <link rel="shortcut icon"
+ href="http://media.luxagraf.net/img/favicon.ico"
+ type="image/vnd.microsoft.icon">
-.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
- background-position: 0 0;
-}
-#controls {width: 60px; margin: 5px auto 0;}
-.play {
- width: 57px;
- height: 32px;
- background: url({{media_url}}img/play.png) 0 0 no-repeat;
-}
+ <link rel="apple-touch-icon"
+ href="http://media.luxagraf.net/img/luxagrafiphoneicon.png">
-.play:hover { background: url({{media_url}}img/play.png) -57px 0 no-repeat; }
+ <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">
-.pause {
- width: 57px;
- height: 32px;
- background: url({{media_url}}img/pause.png) 0 0 no-repeat;;
-}
-.pause:hover {
- background: url({{media_url}}img/pause.png) -57px 0 no-repeat;
-}
- </style>
- <script type="text/javascript" src="http://media.luxagraf.net/js/jquery.js"></script>
+
+ <script type="text/javascript" src="/media/js/jquery.js"></script>
+ <script type="text/javascript" src="/media/js/jquery.cycle.pack.js"></script>
+ <script type="text/javascript" src="/media/js/jquery.jcarousel.pack.js"></script>
+ <script type="text/javascript" src="/media/js/slideshow.pack.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>
- <script type="text/javascript" src="http://media.luxagraf.net/js/combo.pack.js"></script>
</head>
<body>
-<h1>Luxagraf, photos from: {{object.set_title}}</h1>
-<h2><a href="/photos/1/">&laquo; Back to galleries</a></h2>
-<div id="controls">
- <div id="toggle" class="pause"></div>
- </div>
+ <div id="wrapper">
+ <ul id="breadcrumbs">
+ <li><a href="/" title="luxagraf homepage">Home</a> &rarr;</li>
+ <li><a href="/photos/" title="luxagraf photos">Photos</a> &rarr; </li>
+ <li>{{object.set_title}}</li>
+ </ul>
+ <ul id="instructions">
+ <li>Hover image to pause,</li>
+ <li> &nbsp;&larr; &amp; &rarr; to navigate</li>
+ </ul>
-<div id="wrapper">
- <div id="main_image"></div>
- <div id="images" style="height:90px; white-space:nowrap;">
- <ul id="mycarousel" class="jcarousel-skin-tango">
- {%for photo in object.photos.all reversed %}
- <li><img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{%ifequal photo.description 'None' %}{%else%}{{photo.description|striptags}}{%endifequal%}"></li>
- {% endfor %}
+ <ul 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}}px" width="{{photo.slideshowimage_width}}px" />
+ </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>
+ <div class="meta" style="display: none;">
+ <dl>
+ <dt>Camera:</dt>
+ <dd>{% ifequal photo.exif_make 'Canon'%}{{photo.exif_model}}{%endifequal%}{% ifequal photo.exif_model 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endifequal%}{%ifequal photo.exif_model 'DMC-GF1' %}<a href="http://amzn.to/cLQozJ" title="Buy on Amazon">{{photo.exif_make}} {{photo.exif_model}}</a>{%endifequal%}</dd>
+ <dt>Lens: </dt>
+ <dd>{%ifequal 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">{{photo.exif_lens}}</a>{%endifequal%}{%ifequal photo.exif_lens 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endifequal%}{%ifequal photo.exif_lens '' %}Built-in{%endifequal%}</dd>
+ <dt>Exposure</dt>
+ <dd>{{photo.exif_exposure}}</dd>
+ <dt>Aperture</dt>
+ <dd>{{photo.exif_aperture}}</dd>
+ <dt>Focal Length: </dt>
+ <dd>{{photo.exif_focal_length}}</dd>
+ <dt>ISO: </dt>
+ <dd>{{photo.exif_iso}}</dd>
+ <dt>Comments: </dt>
+ <dd><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></dd>
+ </dl>
+ </div>
+ </li>
+ {% endfor %}
</ul>
</div>
-</div>
- <script type="text/javascript">
-//<![CDATA[
- $(document).ready(function(){
-
- $('.jcarousel-skin-tango').addClass('gallery_show'); // adds new class name to maintain degradability
-
- $('ul.gallery_show').galleria({
- history : true, // activates the history object for bookmarking, back-button etc.
- clickNext : true, // helper for making the image clickable
- insert : '#main_image', // the containing selector for our main image
- onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
-
- // fade in the image & caption
- image.css('display','none').fadeIn(200);
- caption.css('display','none').fadeIn(200);
-
- // fetch the thumbnail container
- var _li = thumb.parents('li');
-
- // fade out inactive thumbnail
- _li.siblings().children('img.selected').fadeTo(100,0.6);
-
- // fade in active thumbnail
- thumb.fadeTo('fast',1).addClass('selected');
-
- // add a title for the clickable image
- image.attr('title','Next image >>');
-
- $('#main_image').trigger('img_change');
-
- },
- onThumb : function(thumb) { // thumbnail effects goes here
-
- // fetch the thumbnail container
- var _li = thumb.parents('li');
-
- // if thumbnail is active, fade all the way.
- var _fadeTo = _li.is('.active') ? '1' : '0.6';
-
- // fade in the thumbnail when finished loading
- thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500);
-
- // hover effects
- thumb.hover(
- function() { thumb.fadeTo('fast',1); },
- function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active
- )
- }
-
- });
- //
- jQuery('#mycarousel').jcarousel({
- scroll: 12,
- initCallback: mycarousel_initCallback
- });
-
- $.hotkeys.add('left', function(){$.galleria.prev();});
- $.hotkeys.add('right', function(){$.galleria.next();});
-
- $(function() {
- var firstItem = $('ul.galleria li:first').addClass('active').find('img').addClass('selected');
- $.galleria.activate(firstItem.attr('src'));
- $('ul.galleria li:first').remove()
-
- var active = false;
- var gal = jQuery('#controls');
- $(function() {
- if (!active) {
- active = !active;
- gal.everyTime('5s', 'slideshow', function() {
- $.galleria.next();
- });
- }
- })
- $('#toggle').bind("click", function() {
- var gal = jQuery('#controls');
- if ($(this).attr("class") == "play") {
- $(this).attr("class", "pause");
- if (!active) {
- active = !active;
- $.galleria.next();
- gal.everyTime('5s', 'slideshow', function() {
- $.galleria.next();
- });
- }
- } else {
- $(this).attr("class", "play");
- if (active) {
- active = !active;
- gal.stopTime('slideshow');
- }
- }
- });
-
- });
-
-
- });
-
- function mycarousel_initCallback(carousel) {
- jQuery('#main_image').bind('img_change',function() {
- var num = parseInt((jQuery('.caption').text()).split(":",1)[0])-1;
- var ntext = (jQuery('.caption').text()).split(":")[1];
- if (ntext == 'undefined') {
- ntext=''
- }
- jQuery('.caption').text(ntext);
- carousel.scroll(num);
- return false;
- });
- };
-//]]>
- </script>
</body>
+
</html>
+
+
+
+
+
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-17 10:36:55 +0000