26 |

27 |

-------------------------------------------------------------------------------- /_/js/init.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | if ($("html").hasClass("old-ie")) { 4 | return false; 5 | } 6 | 7 | // init carousel 8 | $('.slidewrap').carousel({ 9 | slider: '.slider', 10 | slide: 'figure', 11 | slideHed: 'figcaption strong', 12 | nextSlide : '.next', 13 | prevSlide : '.prev', 14 | addPagination: false, 15 | addNav : true 16 | }).bind({ 17 | 18 | // remove initial class to make 'next' arrow flash 19 | 'carousel-beforemove' : function(e) { 20 | $("a.carousel-next").removeClass("init"); 21 | }, 22 | 23 | // update slide counter, remove flashing class (for keyboard nav) 24 | 'carousel-aftermove' : function(e) { 25 | var slide = $("figure.carousel-active-slide").index()+1; 26 | $("a.carousel-prev, a.carousel-next").removeClass("flash"); 27 | $("#counter").text(slide); 28 | window.location.hash = "slide-"+slide; 29 | } 30 | }); 31 | 32 | // create slide counter 33 | $('

') 34 | .attr('id','location') 35 | .html(''+($("figure.carousel-active-slide").index()+1)+'/'+$("figure").length) 36 | .appendTo('body'); 37 | 38 | // about text 39 | $("aside").bind("click", function(){ 40 | $(this).toggleClass("active"); 41 | }); 42 | 43 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flickr Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 |

Flickr Gallery

18 |

19 | 20 | 24 | 25 |

26 |

27 |

28 |

31 | **Title** 32 | *Description* 33 | (location) 34 |

36 | 37 |

40 | **Title** 41 | *Description* 42 | (location) 43 |

45 | 46 |

Dancing Shiva, India — 49 | **Title** 50 | *Description* 51 | (location) 52 |

54 | 55 |

56 |

57 |

58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 79 | 80 | -------------------------------------------------------------------------------- /generate-page/index.php: -------------------------------------------------------------------------------- 1 | auth->token->content); 69 | exit; 70 | } 71 | 72 | 73 | // fetch flickr sets 74 | debug("fetching flickr sets..."); 75 | $api_sig = md5($conf['flickr']['api_secret']."api_key".$conf['flickr']['api_key']."auth_token".$conf['flickr']['auth_token']."formatjsonmethodflickr.photosets.getListnojsoncallback1"); 76 | $collectionsURL = "https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=".$conf['flickr']['api_key']."&auth_token=".$conf['flickr']['auth_token']."&format=json&nojsoncallback=1&api_sig=".$api_sig; 77 | $collections = fetch($collectionsURL); 78 | 79 | $collectionCount = $collections->photosets->total; 80 | 81 | if (!is_numeric($collectionCount) || $collectionCount < 0) { 82 | debug("error: no collections found"); 83 | exit; 84 | } else { 85 | debug("found " . $collectionCount . " collections"); 86 | } 87 | 88 | 89 | 90 | // fetch flickr photos for each set 91 | foreach($collections->photosets->photoset as $photoset) { 92 | $title = $photoset->title->_content; 93 | debug("fetching photos for set: " . $title); 94 | $api_sig = md5($conf['flickr']['api_secret']."api_key".$conf['flickr']['api_key']."auth_token".$conf['flickr']['auth_token']."extrasdescriptionformatjsonmethodflickr.photosets.getPhotosnojsoncallback1photoset_id".$photoset->id.""); 95 | $photosURL = "https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=".$conf['flickr']['api_key']."&photoset_id=".$photoset->id."&extras=description&format=json&nojsoncallback=1&auth_token=".$conf['flickr']['auth_token']."&api_sig=".$api_sig; 96 | $photos = fetch($photosURL); 97 | 98 | foreach ($photos->photoset->photo as $photo) { 99 | $images[] = array( 100 | "title" => $photo->title, 101 | "description" => $photo->description->_content, 102 | "location" => $title, 103 | "src" => "https://farm".$photo->farm.".staticflickr.com/".$photo->server."/".$photo->id."_".$photo->secret."_b.jpg" 104 | ); 105 | } 106 | debug("added " . $photos->photoset->total . " images"); 107 | } 108 | 109 | 110 | 111 | 112 | // pull in page header 113 | $page = file_get_contents("page-chunks/header.inc.php"); 114 | 115 | // prepare image template 116 | $imageTemplate = file_get_contents("page-chunks/image.inc.php"); 117 | 118 | // loop through each image 119 | foreach ($images as $key => $image) { 120 | 121 | $imageData = $imageTemplate; 122 | 123 | // loop through each image value 124 | foreach($image as $imageKey => $imageValue) { 125 | $imageData = str_replace("{{".$imageKey."}}", $imageValue, $imageData); 126 | } 127 | 128 | $page .= $imageData; 129 | } 130 | 131 | 132 | 133 | 134 | // create page footer 135 | $footer = file_get_contents("page-chunks/footer.inc.php"); 136 | 137 | // google analytics? 138 | if (isset($conf['analytics']['id'])) { 139 | $footer = str_replace("UA-XXX-X", $conf['analytics']['id'], $footer); 140 | } 141 | 142 | $page .= $footer; 143 | 144 | 145 | 146 | // save new index page 147 | if (file_put_contents("../index.html", $page)) { 148 | debug("New page created!"); 149 | } else { 150 | debug("error: could not create page"); 151 | } 152 | 153 | 154 | 155 | 156 | 157 | 158 | // debug 159 | function debug($message){ 160 | echo '

'.$message.'

'; 161 | } 162 | 163 | // flickr/curl 164 | function fetch($url) { 165 | $ch = curl_init(); 166 | curl_setopt ($ch, CURLOPT_URL, $url); 167 | curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); 168 | curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 5); 169 | $file_contents = curl_exec($ch); 170 | curl_close($ch); 171 | return json_decode($file_contents); 172 | } -------------------------------------------------------------------------------- /_/css/screen.css: -------------------------------------------------------------------------------- 1 | /* defaults */ 2 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } 3 | audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } 4 | audio:not([controls]) { display: none; } 5 | [hidden] { display: none; } 6 | 7 | html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 8 | html, button, input, select, textarea { font-family: sans-serif; color: #222; } 9 | body { margin: 0; font-size: 1em; line-height: 1.4; } 10 | 11 | ::-moz-selection { background: #f90; color: #fff; text-shadow: none; } 12 | ::selection { background: #f90; color: #fff; text-shadow: none; } 13 | 14 | a { color: #00e; } 15 | a:visited { color: #551a8b; } 16 | a:hover { color: #06e; } 17 | a:focus { outline: thin dotted; } 18 | a:hover, a:active { outline: 0; } 19 | abbr[title] { border-bottom: 1px dotted; } 20 | b, strong { font-weight: bold; } 21 | blockquote { margin: 1em 40px; } 22 | dfn { font-style: italic; } 23 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 24 | ins { background: #ff9; color: #000; text-decoration: none; } 25 | mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } 26 | pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } 27 | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } 28 | 29 | q { quotes: none; } 30 | q:before, q:after { content: ""; content: none; } 31 | small { font-size: 85%; } 32 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 33 | sup { top: -0.5em; } 34 | sub { bottom: -0.25em; } 35 | 36 | ul, ol { margin: 1em 0; padding: 0 0 0 40px; } 37 | dd { margin: 0 0 0 40px; } 38 | nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } 39 | 40 | img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } 41 | svg:not(:root) { overflow: hidden; } 42 | figure { margin: 0; } 43 | 44 | form { margin: 0; } 45 | fieldset { border: 0; margin: 0; padding: 0; } 46 | 47 | label { cursor: pointer; } 48 | legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } 49 | button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } 50 | button, input { line-height: normal; } 51 | button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } 52 | button[disabled], input[disabled] { cursor: default; } 53 | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } 54 | input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } 55 | input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } 56 | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } 57 | textarea { overflow: auto; vertical-align: top; resize: vertical; } 58 | input:valid, textarea:valid { } 59 | input:invalid, textarea:invalid { background-color: #f0dddd; } 60 | 61 | table { border-collapse: collapse; border-spacing: 0; } 62 | td { vertical-align: top; } 63 | 64 | 65 | /* site */ 66 | html, body { 67 | height:100%; 68 | } 69 | 70 | body { 71 | font-family: 'Trykker', Georgia, serif; 72 | background-color: #ece4d8; 73 | text-align:center; 74 | } 75 | 76 | /* header */ 77 | header { 78 | position:relative; 79 | z-index:3; 80 | } 81 | 82 | /* aside */ 83 | .js aside { 84 | position:absolute; 85 | margin:0; 86 | padding:0; 87 | right:1%; 88 | top:-150px; 89 | z-index:5; 90 | background:rgba(0,0,0,0.75); 91 | border-bottom-left-radius: 25px; 92 | border-bottom-right-radius: 25px; 93 | width:200px; 94 | padding:0.5em 1em 2.5em 1em; 95 | color:#fff; 96 | font-size:75%; 97 | 98 | -webkit-transition : top 0.5s ease; 99 | -moz-transition : top 0.5s ease; 100 | -ms-transition : top 0.5s ease; 101 | -o-transition : top 0.5s ease; 102 | transition : top 0.5s ease; 103 | } 104 | 105 | .js aside h2 { 106 | position:absolute; 107 | bottom:0; 108 | left:0; 109 | text-align:center; 110 | width:100%; 111 | font-size:100%; 112 | } 113 | 114 | .js aside p { 115 | opacity:0; 116 | -webkit-transition : opacity 0.5s ease; 117 | -moz-transition : opacity 0.5s ease; 118 | -ms-transition : opacity 0.5s ease; 119 | -o-transition : opacity 0.5s ease; 120 | transition : opacity 0.5s ease; 121 | } 122 | 123 | .js aside p a { 124 | color:#fff; 125 | } 126 | 127 | .js aside:hover { 128 | top:0; 129 | } 130 | 131 | .js aside:hover p { 132 | opacity:1; 133 | } 134 | 135 | 136 | /* gallery */ 137 | article { 138 | position:relative; 139 | z-index:2; 140 | width:90%; 141 | height:100%; 142 | margin:0 auto; 143 | } 144 | 145 | .js article { 146 | width:75%; 147 | } 148 | 149 | section { 150 | height:100%; 151 | } 152 | 153 | .js #gallery { 154 | height:70%; 155 | } 156 | 157 | figure { 158 | margin-bottom:3em; 159 | width:100%; 160 | height:100%; 161 | } 162 | 163 | .js figure { 164 | margin:0; 165 | position:relative; 166 | } 167 | 168 | figure img { 169 | margin:0 auto 1em auto; 170 | max-height:100%; 171 | max-width:100%; 172 | } 173 | 174 | 175 | /* captions */ 176 | figcaption strong, 177 | figcaption em { 178 | display:block; 179 | } 180 | 181 | figcaption span { 182 | font-size:70%; 183 | } 184 | 185 | 186 | /* page location */ 187 | #location { 188 | position:absolute; 189 | right:2.5%; 190 | bottom:2.5%; 191 | margin:0; 192 | padding:0; 193 | } 194 | 195 | 196 | /* nav */ 197 | .slidecontrols { 198 | position:absolute; 199 | width:100%; 200 | height:100%; 201 | left:0; 202 | top:0; 203 | list-style:none; 204 | padding:0; 205 | margin:0; 206 | z-index:1; 207 | } 208 | 209 | a.carousel-next, 210 | a.carousel-prev { 211 | position:absolute; 212 | top:30%; 213 | right:0; 214 | z-index:2; 215 | padding:10% 2.5%; 216 | text-decoration:none; 217 | font-size:48px; 218 | font-family:Verdana, sans-serif; 219 | color:#666; 220 | border-bottom-left-radius: 25px; 221 | border-top-left-radius: 25px; 222 | 223 | -webkit-transition : all 0.5s ease; 224 | -moz-transition : all 0.5s ease; 225 | -ms-transition : all 0.5s ease; 226 | -o-transition : all 0.5s ease; 227 | transition : all 0.5s ease; 228 | } 229 | 230 | a.carousel-next.init { 231 | -webkit-animation: flash 0.5s 3; 232 | -moz-animation: flash 0.5s 3; 233 | -ms-animation: flash 0.5s 3; 234 | } 235 | 236 | a.flash { 237 | -webkit-animation: flash 0.5s 1; 238 | -moz-animation: flash 0.5s 1; 239 | -ms-animation: flash 0.5s 1; 240 | } 241 | 242 | a.carousel-prev { 243 | left:0; 244 | right:auto; 245 | border-radius:0; 246 | border-bottom-right-radius: 25px; 247 | border-top-right-radius: 25px; 248 | } 249 | 250 | a.carousel-next:hover, 251 | a.carousel-prev:hover { 252 | background:rgba(0,0,0,0.2); 253 | color:#fff; 254 | } 255 | 256 | a.carousel-disabled, 257 | a.carousel-disabled:hover { 258 | color:#999; 259 | opacity:0.5; 260 | background:none; 261 | cursor:default; 262 | } 263 | 264 | /* responsive */ 265 | @media only screen and (max-width : 480px) { 266 | .js aside { 267 | display:none; 268 | } 269 | 270 | h1 { 271 | font-size:1.2em; 272 | } 273 | 274 | .js #gallery { 275 | height:60%; 276 | } 277 | 278 | a.carousel-next, 279 | a.carousel-prev { 280 | font-size:2em; 281 | padding: 8% 1% 11% 3%; 282 | } 283 | } 284 | 285 | /* animations */ 286 | @-webkit-keyframes flash { 287 | 0%, 100% { background:rgba(0,0,0,0); color:#666; } 288 | 50% { background:rgba(0,0,0,0.2); color:#fff; } 289 | } 290 | @-moz-keyframes flash { 291 | 0%, 100% { background:rgba(0,0,0,0); color:#666; } 292 | 50% { background:rgba(0,0,0,0.2); color:#fff; } 293 | } 294 | @-ms-keyframes flash { 295 | 0%, 100% { background:rgba(0,0,0,0); color:#666; } 296 | 50% { background:rgba(0,0,0,0.2); color:#fff; } 297 | } 298 | 299 | 300 | 301 | /* helpers */ 302 | .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } 303 | .ir br { display: none; } 304 | .hidden { display: none !important; visibility: hidden; } 305 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 306 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } 307 | .invisible { visibility: hidden; } 308 | .clearfix:before, .clearfix:after { content: ""; display: table; } 309 | .clearfix:after { clear: both; } 310 | .clearfix { *zoom: 1; } -------------------------------------------------------------------------------- /_/js/slider.js: -------------------------------------------------------------------------------- 1 | /*! (c) Mat Marquis (@wilto). MIT License. http://wil.to/3a */ 2 | 3 | (function( $, undefined ) { 4 | var inst = 0; 5 | 6 | $.fn.getPercentage = function() { 7 | var oPercent = this.attr('style').match(/margin\-left:(.*[0-9])/i) && parseInt(RegExp.$1, 10); 8 | 9 | return oPercent; 10 | }; 11 | 12 | $.fn.adjRounding = function(slide) { 13 | var $el = $(this), 14 | $slides = $el.find( slide ), 15 | diff = $el.parent().width() - $($slides[0]).width(); 16 | 17 | if (diff !== 0) { 18 | $($slides).css( "position", "relative" ); 19 | 20 | for (var i = 0; i < $slides.length; i++) { 21 | $($slides[i]).css( "left", (diff * i) + "px" ); 22 | } 23 | } 24 | 25 | return this; 26 | }; 27 | 28 | $.fn.carousel = function(config) { 29 | 30 | // Prevent re-init: 31 | if( this.data( "carousel-initialized" ) ) { return; } 32 | 33 | // Carousel is being initialized: 34 | this.data( "carousel-initialized", true ); 35 | 36 | var defaults = { 37 | slider : '.slider', 38 | slide : '.slide', 39 | prevSlide : null, 40 | nextSlide : null, 41 | slideHed : null, 42 | addPagination : false, 43 | addNav : ( config !== undefined && ( config.prevSlide || config.nextSlide ) ) ? false : true, 44 | namespace : 'carousel', 45 | speed : 300 46 | }, 47 | opt = $.extend(defaults, config), 48 | $slidewrap = this, 49 | dBody = (document.body || document.documentElement), 50 | transitionSupport = function() { 51 | dBody.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;'); 52 | var tSupport = !!(dBody.style.transition || dBody.style.webkitTransition || dBody.style.msTransition || dBody.style.OTransition || dBody.style.MozTransition ); 53 | 54 | return tSupport; 55 | }, 56 | carousel = { 57 | init : function() { 58 | inst++; 59 | 60 | $slidewrap.each(function(carInt) { 61 | var $wrap = $(this), 62 | $slider = $wrap.find(opt.slider), 63 | $slide = $wrap.find(opt.slide), 64 | slidenum = $slide.length, 65 | transition = "margin-left " + ( opt.speed / 1000 ) + "s ease", 66 | tmp = 'carousel-' + inst + '-' + carInt; 67 | 68 | if( $slide.length <= 1 ) { 69 | return; /* No sense running all this code if the carousel functionality is unnecessary. */ 70 | } 71 | 72 | $wrap 73 | .css({ 74 | overflow : "hidden", 75 | width : "100%" 76 | }) 77 | .attr('role' , 'application'); 78 | 79 | $slider 80 | .attr( 'id', ( $slider[0].id || 'carousel-' + inst + '-' + carInt ) ) 81 | .css({ 82 | "marginLeft" : "0px", 83 | "float" : "left", 84 | "width" : 100 * slidenum + "%", 85 | "-webkit-transition" : transition, 86 | "-moz-transition" : transition, 87 | "-ms-transition" : transition, 88 | "-o-transition" : transition, 89 | "transition" : transition 90 | }) 91 | .bind( 'carouselmove' , carousel.move ) 92 | .bind( 'nextprev' , carousel.nextPrev ) 93 | .bind( 'navstate' , carousel.navState ); 94 | 95 | $slide 96 | .css({ 97 | "float": "left", 98 | width: (100 / slidenum) + "%" 99 | }) 100 | .each(function(i) { 101 | var $el = $(this); 102 | 103 | $el.attr({ 104 | role : "tabpanel document", 105 | id : tmp + '-slide' + i 106 | }); 107 | 108 | if( opt.addPagination ) { 109 | $el.attr('aria-labelledby', tmp + '-tab' + i); 110 | } 111 | }); 112 | 113 | // Build and insert navigation/pagination, if specified in the options: 114 | opt.addPagination && carousel.addPagination(); 115 | opt.addNav && carousel.addNav(); 116 | 117 | $slider.trigger( "navstate", { current: 0 }); 118 | }); 119 | }, 120 | addNav : function() { 121 | $slidewrap.each(function(i) { 122 | var $oEl = $(this), 123 | $slider = $oEl.find(opt.slider), 124 | currentSlider = $slider[0].id, 125 | navMarkup = [ 126 | '' 130 | ].join(''), 131 | nextprev = { 132 | nextSlide : '.' + opt.namespace + '-next', 133 | prevSlide : '.' + opt.namespace + '-prev' 134 | }; 135 | 136 | opt = $.extend(opt, nextprev); 137 | 138 | //$oEl.prepend(navMarkup); 139 | // PG Hacked nav placement 140 | $('body').append(navMarkup); 141 | }); 142 | }, 143 | 144 | // PG - removed pagination 145 | 146 | roundDown : function(oVal) { 147 | var val = parseInt(oVal, 10); 148 | 149 | return Math.ceil( (val - (val % 100 ) ) / 100) * 100; 150 | }, 151 | navState : function(e, ui) { 152 | var $el = $(this), 153 | $slides = $el.find(opt.slide), 154 | ind = -(ui.current / 100), 155 | $activeSlide = $($slides[ind]); 156 | 157 | $el.attr('aria-activedescendant', $activeSlide[0].id); 158 | 159 | // Update state of active tabpanel: 160 | $activeSlide 161 | .addClass( opt.namespace + "-active-slide" ) 162 | .attr( 'aria-hidden', false ) 163 | .siblings() 164 | .removeClass( opt.namespace + "-active-slide" ) 165 | .attr( 'aria-hidden', true ); 166 | 167 | // Update state of next/prev navigation: 168 | if( ( !!opt.prevSlide || !!opt.nextSlide ) ) { 169 | var $target = $('[href*="#' + this.id + '"]'); 170 | 171 | $target.removeClass( opt.namespace + '-disabled' ); 172 | 173 | if( ind === 0 ) { 174 | $target.filter(opt.prevSlide).addClass( opt.namespace + '-disabled' ); 175 | } else if( ind == $slides.length - 1 ) { 176 | $target.filter(opt.nextSlide).addClass( opt.namespace + '-disabled' ); 177 | } 178 | } 179 | 180 | // PG removed pagination 181 | 182 | }, 183 | move : function(e, ui) { 184 | var $el = $(this); 185 | 186 | $el 187 | .trigger(opt.namespace + "-beforemove") 188 | .trigger("navstate", { current: ui.moveTo }); 189 | 190 | if( transitionSupport() ) { 191 | 192 | $el 193 | .adjRounding( opt.slide ) /* Accounts for browser rounding errors. Lookin at you, iOS Safari. */ 194 | .css('marginLeft', ui.moveTo + "%") 195 | .one("transitionend webkitTransitionEnd OTransitionEnd", function() { 196 | $(this).trigger( opt.namespace + "-aftermove" ); 197 | }); 198 | 199 | } else { 200 | $el 201 | .adjRounding( opt.slide ) 202 | .animate({ marginLeft: ui.moveTo + "%" }, { duration : opt.speed, queue : false }, function() { 203 | $(this).trigger( opt.namespace + "-aftermove" ); 204 | }); 205 | } 206 | }, 207 | nextPrev : function(e, ui) { 208 | var $el = $(this), 209 | left = ( $el ) ? $el.getPercentage() : 0, 210 | $slide = $el.find(opt.slide), 211 | constrain = ui.dir === 'prev' ? left !== 0 : -left < ($slide.length - 1) * 100, 212 | $target = $( '[href="#' + this.id + '"]'); 213 | 214 | if (!$el.is(":animated") && constrain ) { 215 | 216 | if ( ui.dir === 'prev' ) { 217 | left = ( left % 100 !== 0 ) ? carousel.roundDown(left) : left + 100; 218 | } else { 219 | left = ( ( left % 100 ) !== 0 ) ? carousel.roundDown(left) - 100 : left - 100; 220 | } 221 | 222 | $el.trigger('carouselmove', { moveTo: left }); 223 | 224 | $target 225 | .removeClass( opt.namespace + '-disabled') 226 | .removeAttr('aria-disabled'); 227 | 228 | switch( left ) { 229 | case ( -($slide.length - 1) * 100 ): 230 | $target.filter(opt.nextSlide) 231 | .addClass( opt.namespace + '-disabled') 232 | .attr('aria-disabled', true); 233 | break; 234 | case 0: 235 | $target.filter(opt.prevSlide) 236 | .addClass( opt.namespace + '-disabled') 237 | .attr('aria-disabled', true); 238 | break; 239 | } 240 | } else { 241 | var reset = carousel.roundDown(left); 242 | 243 | $el.trigger('carouselmove', { moveTo: reset }); 244 | } 245 | 246 | } 247 | }; 248 | 249 | carousel.init(this); 250 | 251 | 252 | // PG hack, move to selected slide on init 253 | var selectedSlide = parseInt(window.location.hash.split("slide-")[1], 10), 254 | currentSlide = $("figure.carousel-active-slide").index()+1; 255 | if (!isNaN(selectedSlide) && currentSlide < selectedSlide) { 256 | while(currentSlide < selectedSlide) { 257 | $(opt.slider).trigger('nextprev', { dir: 'next' }); 258 | currentSlide++; 259 | } 260 | } 261 | 262 | 263 | $(opt.nextSlide + ',' + opt.prevSlide) 264 | .bind('click', function(e) { 265 | var $el = $(this), 266 | link = this.hash, 267 | dir = ( $el.is(opt.prevSlide) ) ? 'prev' : 'next', 268 | $slider = $(link); 269 | 270 | if ( $el.is('.' + opt.namespace + '-disabled') ) { 271 | return false; 272 | } 273 | 274 | $slider.trigger('nextprev', { dir: dir }); 275 | 276 | e.preventDefault(); 277 | }); 278 | 279 | // PG: hacked keyboard nav 280 | $(window).bind('keydown', function(e) { 281 | switch (e.which) { 282 | case 37: 283 | case 38: 284 | $(opt.slider).trigger('nextprev', { dir: 'prev' }); 285 | if (!$(opt.prevSlide).hasClass('carousel-disabled')) { 286 | $(opt.prevSlide).addClass("flash"); 287 | } 288 | e.preventDefault(); 289 | break; 290 | case 39: 291 | case 40: 292 | $(opt.slider).trigger('nextprev', { dir: 'next' }); 293 | if (!$(opt.nextSlide).hasClass('carousel-disabled')) { 294 | $(opt.nextSlide).addClass("flash"); 295 | } 296 | e.preventDefault(); 297 | break; 298 | } 299 | }); 300 | 301 | var setup = { 302 | wrap : this, 303 | slider : opt.slider 304 | }; 305 | $slidewrap.bind( "dragSnap", setup, function(e, ui){ 306 | var $slider = $(this).find( opt.slider ), 307 | dir = ( ui.direction === "left" ) ? 'next' : 'prev'; 308 | 309 | $slider.trigger("nextprev", { dir: dir }); 310 | }); 311 | 312 | 313 | $slidewrap.filter('[data-autorotate]').each(function() { 314 | var auto, 315 | $el = $(this), 316 | speed = $el.attr('data-autorotate'), 317 | slidenum = $el.find(opt.slide).length, 318 | autoAdvance = function() { 319 | var $slider = $el.find(opt.slider), 320 | active = -( $(opt.slider).getPercentage() / 100 ) + 1; 321 | 322 | switch( active ) { 323 | case slidenum: 324 | clearInterval(auto); 325 | 326 | auto = setInterval(function() { 327 | autoAdvance(); 328 | $slider.trigger("nextprev", { dir: 'prev' }); 329 | }, speed); 330 | 331 | break; 332 | case 1: 333 | clearInterval(auto); 334 | 335 | auto = setInterval(function() { 336 | autoAdvance(); 337 | $slider.trigger("nextprev", { dir: 'next' }); 338 | }, speed); 339 | 340 | break; 341 | } 342 | }; 343 | 344 | auto = setInterval(autoAdvance, speed); 345 | 346 | $el 347 | .attr('aria-live', 'polite') 348 | .bind('mouseenter click touchstart', function() { 349 | clearInterval(auto); 350 | }); 351 | }); 352 | 353 | return this; 354 | }; 355 | })(jQuery); 356 | 357 | 358 | $.event.special.dragSnap = { 359 | setup: function(setup) { 360 | 361 | var $el = $(this), 362 | transitionSwap = function($el, tog) { 363 | var speed = 0.3, 364 | transition = ( tog ) ? "margin-left " + speed + "s ease" : 'none'; 365 | 366 | $el.css({ 367 | "-webkit-transition" : transition, 368 | "-moz-transition" : transition, 369 | "-ms-transition" : transition, 370 | "-o-transition" : transition, 371 | "transition" : transition 372 | }); 373 | }, 374 | roundDown = function(left) { 375 | left = parseInt(left, 10); 376 | 377 | return Math.ceil( (left - (left % 100 ) ) / 100) * 100; 378 | }, 379 | snapBack = function(e, ui) { 380 | var $el = ui.target, 381 | currentPos = ( $el.attr('style') !== undefined ) ? $el.getPercentage() : 0, 382 | left = (ui.left === false) ? roundDown(currentPos) - 100 : roundDown(currentPos), 383 | dBody = document.body, 384 | transitionSupport = function() { 385 | dBody.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;'); 386 | var tSupport = !!(dBody.style.transition || dBody.style.webkitTransition || dBody.style.MozTransition ); 387 | 388 | return tSupport; 389 | }; 390 | 391 | transitionSwap($el, true); 392 | 393 | if( transitionSupport() ) { 394 | $el.css('marginLeft', left + "%"); 395 | } else { 396 | $el.animate({ marginLeft: left + "%" }, opt.speed); 397 | } 398 | }; 399 | 400 | $el 401 | .bind("snapback", snapBack) 402 | .bind("touchstart", function(e) { 403 | var data = e.originalEvent.touches ? e.originalEvent.touches[0] : e, 404 | start = { 405 | time: ( (new Date()).getTime() ), 406 | coords: [ data.pageX, data.pageY ], 407 | origin: $(e.target).closest( setup.wrap ), 408 | interacting: false 409 | }, 410 | stop, 411 | $tEl = $(e.target).closest( setup.slider ), 412 | currentPos = ( $tEl.attr('style') !== undefined ) ? $tEl.getPercentage() : 0; 413 | 414 | transitionSwap($tEl, false); 415 | 416 | function moveHandler(e) { 417 | var data = e.originalEvent.touches ? e.originalEvent.touches[0] : e; 418 | stop = { 419 | time: (new Date()).getTime(), 420 | coords: [ data.pageX, data.pageY ] 421 | }, 422 | deltaX = Math.abs( start.coords[0] - data.pageX ), 423 | deltaY = Math.abs( start.coords[1] - data.pageY ); 424 | 425 | if( !start || deltaX < deltaY || deltaX < 15 ) { 426 | return; 427 | } 428 | 429 | // prevent scrolling 430 | if ( deltaX >= 15 ) { 431 | start.interacting = true; 432 | $tEl.css({"margin-left": currentPos + ( ( (stop.coords[0] - start.coords[0]) / start.origin.width() ) * 100 ) + '%' }); 433 | e.preventDefault(); 434 | } else { 435 | return; 436 | } 437 | } 438 | 439 | $el 440 | .bind("gesturestart", function(e) { 441 | $el 442 | .unbind("touchmove", moveHandler) 443 | .unbind("touchend", moveHandler); 444 | }) 445 | .bind("touchmove", moveHandler) 446 | .one("touchend", function(e) { 447 | $el.unbind("touchmove", moveHandler); 448 | 449 | transitionSwap($tEl, true); 450 | 451 | if (start && stop ) { 452 | var deltaX = Math.abs(start.coords[0] - stop.coords[0]), 453 | deltaY = Math.abs(start.coords[1] - stop.coords[1]), 454 | left = start.coords[0] > stop.coords[0], 455 | jumppoint; 456 | 457 | if( deltaX > 20 && ( deltaX > deltaY ) ) { 458 | e.preventDefault(); 459 | } else { 460 | if( start.interacting ) { 461 | $el.trigger('snapback', { target: $tEl, left: left }); 462 | } 463 | return; 464 | } 465 | 466 | jumppoint = start.origin.width() / 4; 467 | 468 | if( -deltaX > jumppoint || deltaX > jumppoint ) { 469 | start.origin.trigger("dragSnap", {direction: left ? "left" : "right"}); 470 | } else { 471 | $el.trigger('snapback', { target: $tEl, left: left }); 472 | } 473 | } 474 | start = stop = undefined; 475 | }); 476 | }); 477 | } 478 | }; 479 | --------------------------------------------------------------------------------