diff options
Diffstat (limited to 'templates/details/photo_galleries.html')
| -rw-r--r-- | templates/details/photo_galleries.html | 417 |
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/">« 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> →</li> + <li><a href="/photos/" title="luxagraf photos">Photos</a> → </li> + <li>{{object.set_title}}</li> + </ul> + <ul id="instructions"> + <li>Hover image to pause,</li> + <li> ← & → 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}} <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> + + + + + |