diff options
Diffstat (limited to 'templates/details')
| -rw-r--r-- | templates/details/entry.html | 40 | ||||
| -rw-r--r-- | templates/details/photo_galleries.html | 345 |
2 files changed, 378 insertions, 7 deletions
diff --git a/templates/details/entry.html b/templates/details/entry.html index 29570b5..3e15f83 100644 --- a/templates/details/entry.html +++ b/templates/details/entry.html @@ -4,6 +4,13 @@ {% block pagetitle %}{{object.title|title|smartypants|safe}} ({% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, {{object.location.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.location.state.country.name}}{%endifequal%}) | Luxagraf, a travelogue{% endblock %} {% block metadescription %}Luxagraf: {{object.dek|striptags|safe}}{% endblock %} +{%block extrahead%} + <link rel="canonical" href="http://luxagraf.net{{object.get_absolute_url}}" /> + <meta name="ICBM" content="{{object.latitude}}, {{object.longitude}}" /> + <meta name="geo.position" content="{{object.latitude}}; {{object.longitude}}" /> + <meta name="geo.placename" content="{% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, {{object.location.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.location.state.country.name}}{%endifequal%}"> + <meta name="geo.region" content="{% ifequal object.location.state.country.name "United States" %}{{object.location.state.country.iso2}}-{{object.location.state.iso2}}{%else%}{{object.location.state.country.iso2}}{% endifequal%}"> +{%endblock%} {%block bodyid%}class="writing-detail"{%endblock%} @@ -12,15 +19,18 @@ <article> <section id="post"> <h1>{{object.title|smartypants|safe}}</h1> - - <span class="byline"><time datetime="{{object.pub_date}}">{{object.pub_date|date:"F j, Y"}}</time> • <span class="location">{% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endifequal%}</span></span> + <aside class="meta"> + <div class="geo">{% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endifequal%} <span class="latitude hide">{{object.latitude}}</span> <span class="longitude hide">{{object.longitude}}</span></div> + <span class="topics">Topics: {%for topic in object.topics.all%}<a href="{{topic.get_absolute_url}}" title="view more {{topic.name}} posts">{{topic.name}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</span> + </aside> + {{object.body_html|smartypants|widont|safe}} </section> <section id="post-metadata"> - <h4>About {{object.title|title|smartypants|safe}}</h4> - <p><span>{{object.title|title|smartypants|safe}}</span> was posted {{ object.pub_date|timesince }} ago from <!--<a href="{{object.location.get_absolute_url}}" title="see other entries from {{object.location.name}}">-->{{object.location.name|smartypants|safe}}<!--</a>-->, which is in {%ifequal object.location.state.country.name 'United States'%}<a href="/maps/#{{object.location.state.slug}}" title="see other entries from {{object.location.state.name}}">{{object.location.state.name|smartypants|safe}}</a>,{%endifequal%} <a href="/writing/{{object.location.state.country.slug}}/1/" title="see other entries from {{object.location.state.country.name}}">{{object.location.state.country.name|smartypants|safe}}</a>. You can find nearby entries by browsing the <a href="/map/">Map</a>. - <p>If you enjoyed reading this, you can follow along on <a href="http://twitter.com/luxagraf" title="twitter" rel="me">Twitter</a> or by subscribing to the <a href="http://feeds.feedburner.com/luxagraf/blog" title="writing RSS 2.0 feed">RSS Feed</a>. For more about luxagraf, see the <a href="/about/" title="about luxagraf">about page</a>. To get in touch please use the <a href="/contact/" title="contact me">contact form</a> or leave a comment below.</p> + <h4>About {{object.title|smartypants|safe}}</h4> + <p>posted <time datetime="{{object.pub_date}}">{{object.pub_date|date:"F j, Y"}}</time>, from {{object.location.name|smartypants|safe}}, {%ifequal object.location.state.country.name 'United States'%}<a href="/maps/#{{object.location.state.slug}}" title="see other entries from {{object.location.state.name}}">{{object.location.state.name|smartypants|safe}}</a>{% else %}{{object.location.state.country.name}}{%endifequal%}. + <p>Follow along on <a href="http://twitter.com/luxagraf" title="twitter" rel="me">Twitter</a> or by subscribing to the <a href="http://feeds.feedburner.com/luxagraf/blog" title="writing RSS 2.0 feed">RSS Feed</a>. For more about me, see the <a href="/about/" title="about luxagraf">about page</a>. To get in touch please use the <a href="/contact/" title="contact me">contact form</a> or leave a comment below.</p> </section> <section id="page-navigation"> <nav> @@ -35,8 +45,24 @@ </nav> </section> <section id="comments"> - <h4>Comments on <span>{{object.title|title|smartypants|safe}}</span></h4> + <h4><a class="disqus-link-count" href="{{object.get_absolute_url}}#disqus_thread">Comments</a></h4> <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/luxagraf/embed.js"></script><noscript><a href="http://luxagraf.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> </section> </article> -{% endblock %}
\ No newline at end of file +{% endblock %} +{% block js %} +<script type="text/javascript"> +//<![CDATA[ +(function() { + var links = document.getElementsByTagName('a'); + var query = '?'; + for(var i = 0; i < links.length; i++) { + if(links[i].href.indexOf('#disqus_thread') >= 0) { + query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; + } + } + document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/luxagraf/get_num_replies.js' + query + '"></' + 'script>'); +})(); +//]]> +</script> +{% endblock%}
\ No newline at end of file diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html new file mode 100644 index 0000000..84dc219 --- /dev/null +++ b/templates/details/photo_galleries.html @@ -0,0 +1,345 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<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=""> + + <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; +} + +.jcarousel-skin-tango.jcarousel-container-vertical { + width: 75px; + height: 245px; + padding: 40px 20px; +} + +.jcarousel-skin-tango .jcarousel-clip-horizontal { + width: 960px; + height: 75px; +} + +.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; +} + +.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; +} + +.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; +} + +.play:hover { background: url({{media_url}}img/play.png) -57px 0 no-repeat; } + +.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="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"> + <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 %} + <li><img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{%ifequal photo.description 'None' %}{%else%}{{photo.description|striptags}}{%endifequal%}"></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> |