diff options
Diffstat (limited to 'media/js/slideshow.js')
| -rw-r--r-- | media/js/slideshow.js | 204 |
1 files changed, 44 insertions, 160 deletions
diff --git a/media/js/slideshow.js b/media/js/slideshow.js index 378412f..b8c1921 100644 --- a/media/js/slideshow.js +++ b/media/js/slideshow.js @@ -2,7 +2,8 @@ function mapit(latlontitle) { lat = parseFloat(latlontitle.split(',')[0]); lon = parseFloat(latlontitle.split(',')[1]); - title= latlontitle.split(',')[2]; + //title= latlontitle.split(',')[2]; + elid= latlontitle.split(',')[2]; centerCoord = new google.maps.LatLng(lat, lon); var mapitinit; if (mapitinit == true) { @@ -20,197 +21,80 @@ function mapit(latlontitle) { mapTypeId: google.maps.MapTypeId.TERRAIN, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} }; - map = new google.maps.Map(document.getElementById("map-wrapper"), mapOptions); + map = new google.maps.Map(document.getElementById("mw-"+elid), mapOptions); var marker = new google.maps.Marker({ position: centerCoord, - map: map, - title: title + map: map + //title: title }); mapitinit = true; } function mapPanTo(){ var marker = new google.maps.Marker({ position: centerCoord, - map: map, - title: title + map: map + //title: title }); map.panTo(centerCoord); } } -// utility functions to create/remove map container +//########## utility functions to create/remove map container ############ function create_map(obj) { + //find id of this image caption: + imgid = obj.title.split(',')[2]; //create container divs - $(obj).parent().parent().parent().append('<div id="map-container">'); - $('#map-container').append('<div id="map-wrapper">'); + $('<div class="map-container" id="mc-'+imgid+'">').insertBefore($(obj).parent().parent()); + //$(obj).parent().parent().parent().append('<div id="map-container">'); + $('#mc-'+imgid).append('<div class="map-wrapper" id="mw-'+imgid+'">'); //deal with the variable height of div.legend - $('#map-container').css({ - bottom: function(index, value) { - return parseFloat($(obj).parent().parent().height())-2; - } - }); + //$('#map-container').css({ + // bottom: function(index, value) { + // return parseFloat($(obj).parent().parent().height())-2; + // } + //}); mapit(obj.title); } -function remove_map() { - $('#map-container').remove(); +function remove_map(imgid) { + $('#mc-'+imgid).remove(); } -// utility functions to create/remove camera info container -function get_exif(obj,id) { - $(obj).parents().eq(2).append('<div id="exif-container">'); - $(obj).parents().eq(2).children('.meta').clone().appendTo('#exif-container').css('display', 'block'); - //deal with the variable height of div.legend - $('#exif-container').css({ - bottom: function(index, value) { - return parseFloat($(obj).parent().parent().height())-14; - } - }); -} -function remove_exif() { - $("#exif-container").remove(); -} - -// +//############ Document.ready events ############## $(document).ready(function(){ - - - //Add navigation - $('#breadcrumbs').after('<div id="slideshow-controls"><ul><li><a id="prev" title="you can also use the arrow keys to navigate" href="#"> ← Older</a></li><li><a id="play" title="Pause Slideshow" href="#">▐▐</a></li><li><a id="next" title="you can also use the arrow keys to navigate" href="#">Newer →</a></li></ul></div>'); - - - //activate pause button - //state var - var show_state = 'playing'; - $('#play').click(function() { - if (show_state == 'playing') { - $('#slides').cycle('pause'); - $(this).html('▶'); - $(this).attr('title','Play slideshow'); - show_state = 'paused'; - } else { - $('#slides').cycle('resume', true); - $(this).html('▐▐'); - $(this).attr('title','Pause slideshow'); - show_state= 'playing'; - } - return false; - }); - - //set up click events for map button $('.map-link').click( function() { - if ($("#exif-container").is(":visible")){ - remove_exif(); - } - if ($('#map-container').is(":visible")) { - remove_map(); + imgid = this.title.split(',')[2]; + if ($('#mc-'+imgid).is(":visible")) { + remove_map(imgid); } else { create_map(this); } return false; }); - - //set up click events camera info button - $('.exif-link').click( function() { - if ($('#map-container').is(":visible")){ - remove_map(); - } - if ($('#exif-container').is(":visible")) { - remove_exif(); - } else { - get_exif(this); + var $ele = $('#slides').children() + var $curr = 0 + $(document).bind('keydown', function (e) { + var code = e.which; + switch (code) { + case 39: + if ($curr <= $ele.size()) { + $.scrollTo($ele[$curr], 800 ); + $curr++ + } + break; + case 37: + if ($curr > 0) { + $curr-- + var $now = $curr + $now-- + $.scrollTo($ele[$now], 800 ); + } + break; } - return false; - }); - - - // create and hide nav buttons (needed for keyboard shortcuts - $('#slides').append('<div class="slidenav"><a id="prev">< Prev </a><a id="next"> Next ></a></div>'); - $('.slidenav').css("display","none"); - - var is_permalink = false; - //find out if we should display a specific slide - var index = 0, hash = window.location.hash; - if (hash) { - index = /\d+/.exec(hash)[0]; - index = (parseInt(index) || 1) - 1; // slides are zero-based - //if this is a permalink, then don't autoplay: - is_permalink = true; - } - // initialize the cycle slideshow - $('#slides .bigimg').wrapAll('<div class="bigimgs">').parents('#slides').append('<ul class="menu" id="feature_gallery_pager">').cycle({ - fx: 'fade', - startingSlide: index, - prev: $(this).find('#prev'), - next: $(this).find('#next'), - before: onBefore, - after: onAfter, - slideExpr: '.bigimg', - pager: '#feature_gallery_pager', - pagerAnchorBuilder: function(idx, slide) { - return '<li><a href="#"><img src="'+slide.id+'" class="thumb"><span></span></a></li>'; - } - }); - - //if this is a permalink, then pause: - if(is_permalink == true) { - $('#play').click() - } - //callback to delete map and camera info windows if they exist - function onBefore() { - $('#map-container').remove(); - $('#exif-container').remove(); - } - - //callback to change url for permalinks and scroll jcarousel - function onAfter(curr,next,opts) { - if (opts.currSlide % 10 == 0) { - if (opts.currSlide != 0) { - $('#slides').trigger('image-loaded',[opts.currSlide+1]); - } else { - $('#slides').trigger('image-loaded',[1]); - } - } - window.location.hash = 'image'+(opts.currSlide + 1); - } - - //callback for jcarousel - function initCallbackFunction(carousel) { - // bind "image-loaded" event to the #slides container (trigger in onAfter function) - $('#slides').bind('image-loaded', function(event, num) { - // scroll carousel - carousel.scroll(num); - return false; - }); - }; - - //initialize the jcarousel plugin - $(function() { - $('#feature_gallery_pager').jcarousel({ - scroll:10, - initCallback: initCallbackFunction - }); + return; }); - - //enable keyboard shortcuts: - $(document.documentElement).keyup(function(event) { - var direction = null; - if (event.keyCode == 37) { - direction = 'prev'; - } else if (event.keyCode == 39) { - direction = 'next'; - } - if (direction != null) { - $('#slides').each(function(index) { - $('#prev,#next', this)[direction]().click(); - }); - } - }); - - - }); |