Created
January 18, 2013 09:59
-
-
Save rymai/4563550 to your computer and use it in GitHub Desktop.
This is the script I use on http://everyday.rymai.me that allows you to move from one image to another while in lightbox mode. It requires jQuery (http://jquery.com) and Mousetrap (http://craig.is/killing/mice). Demo: http://everyday.rymai.me
Notes: The *.js.coffee files should be pre-compiled by Sprockets (https://github.com/sstephenson/sprockets…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This code is the automatic conversion to JS of photos_carousel.js.coffee + application.js.coffee. | |
| // Performed on http://coffeescript.org (click on the "TRY COFFEESCRIPT" tab). | |
| var PhotosCarousel; | |
| PhotosCarousel = (function() { | |
| function PhotosCarousel(lightboxes) { | |
| this.lightboxes = lightboxes; | |
| this.currentIndex = 0; | |
| this.setupObservers(); | |
| } | |
| PhotosCarousel.prototype.setupObservers = function() { | |
| var _this = this; | |
| this.lightboxes.each(function(index, lightbox) { | |
| return $(lightbox).on('click', function(l) { | |
| return _this.currentIndex = index; | |
| }); | |
| }); | |
| Mousetrap.bind('right', function() { | |
| return _this.right(); | |
| }); | |
| Mousetrap.bind('left', function() { | |
| return _this.left(); | |
| }); | |
| Mousetrap.bind('down', function() { | |
| return _this.down(); | |
| }); | |
| return Mousetrap.bind('up', function() { | |
| return _this.up(); | |
| }); | |
| }; | |
| PhotosCarousel.prototype.right = function() { | |
| return this.moveTo(1); | |
| }; | |
| PhotosCarousel.prototype.left = function() { | |
| return this.moveTo(-1); | |
| }; | |
| PhotosCarousel.prototype.down = function() { | |
| return this.moveTo(7); | |
| }; | |
| PhotosCarousel.prototype.up = function() { | |
| return this.moveTo(-7); | |
| }; | |
| PhotosCarousel.prototype.moveTo = function(step) { | |
| this.currentIndex = (this.currentIndex + step) % this.lightboxes.size(); | |
| if (this.currentIndex < 0) { | |
| this.currentIndex = this.lightboxes.size() + this.currentIndex; | |
| } | |
| return sublime.lightbox(this.lightboxes[this.currentIndex]).open(); | |
| }; | |
| return PhotosCarousel; | |
| })(); | |
| $(document).ready(function() { | |
| return window.photosCarousel = new PhotosCarousel($('a.sublime')); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #= require jquery | |
| #= require mousetrap.min.js | |
| #= require_self | |
| #= require_tree . | |
| $(document).ready -> | |
| window.photosCarousel = new PhotosCarousel($('a.sublime')) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//cdn.sublimevideo.net/js/YOUR_TOKEN-beta.js" type="text/javascript"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script src="/mousetrap.min.js" type="text/javascript"></script> | |
| <script src="/application.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <a class="sublime" href="#photo_1"> | |
| <img class="everyday" src="thumbnail_1.jpg"> | |
| </a> | |
| <img id="photo_1" src="photo_1.jpg" style="display:none"> | |
| <a class="sublime" href="#photo_2"> | |
| <img class="everyday" src="thumbnail_2.jpg"> | |
| </a> | |
| <img id="photo_2" src="photo_2.jpg" style="display:none"> | |
| <a class="sublime" href="#photo_3"> | |
| <img class="everyday" src="thumbnail_3.jpg"> | |
| </a> | |
| <img id="photo_3" src="photo_3.jpg" style="display:none"> | |
| <a class="sublime" href="#photo_4"> | |
| <img class="everyday" src="thumbnail_4.jpg"> | |
| </a> | |
| <img id="photo_4" src="photo_4.jpg" style="display:none"> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # This class takes a set of SublimeVideo lightbox elements | |
| # It then registers listeners for the left/right and up/down keys | |
| # allowing you to move from one lightbox to another very naturally | |
| # Just try it: http://everyday.rymai.me | |
| class PhotosCarousel | |
| constructor: (@lightboxes) -> | |
| @currentIndex = 0 | |
| this.setupObservers() | |
| setupObservers: -> | |
| @lightboxes.each (index, lightbox) => | |
| $(lightbox).on 'click', (l) => | |
| @currentIndex = index | |
| Mousetrap.bind 'right', => this.right() | |
| Mousetrap.bind 'left', => this.left() | |
| Mousetrap.bind 'down', => this.down() | |
| Mousetrap.bind 'up', => this.up() | |
| right: -> | |
| this.moveTo(1) | |
| left: -> | |
| this.moveTo(-1) | |
| down: -> | |
| this.moveTo(7) | |
| up: -> | |
| this.moveTo(-7) | |
| moveTo: (step) -> | |
| @currentIndex = (@currentIndex + step) % @lightboxes.size() | |
| @currentIndex = @lightboxes.size() + @currentIndex if @currentIndex < 0 | |
| sublime.lightbox(@lightboxes[@currentIndex]).open() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment