diff options
Diffstat (limited to 'templates/details/photo_galleries.html')
| -rw-r--r-- | templates/details/photo_galleries.html | 345 |
1 files changed, 345 insertions, 0 deletions
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> |