Using Blueimp image gallery

Gemfile

@@ -114,6 +114,7 @@ source "https://rails-assets.org" do
   gem "rails-assets-perfect-scrollbar",             "0.6.4"
   gem "rails-assets-jakobmattsson--jquery-elastic", "1.6.11"
   gem "rails-assets-autosize",                      "3.0.8"
+  gem "rails-assets-blueimp-gallery", "2.16.0"
 end
 
 # Localization

Gemfile.lock

@@ -546,6 +546,7 @@ GEM
       railties (= 4.2.4)
       sprockets-rails
     rails-assets-autosize (3.0.8)
+    rails-assets-blueimp-gallery (2.16.0)
     rails-assets-colorbox (1.6.3)
       rails-assets-jquery (>= 1.3.2)
     rails-assets-diaspora_jsxc (0.1.4.develop.1)
@@ -863,6 +864,7 @@ DEPENDENCIES
   rack-ssl (= 1.4.1)
   rails (= 4.2.4)
   rails-assets-autosize (= 3.0.8)!
+  rails-assets-blueimp-gallery (= 2.16.0)!
   rails-assets-diaspora_jsxc (~> 0.1.4.develop)!
   rails-assets-highlightjs (= 8.6.0)!
   rails-assets-jakobmattsson--jquery-elastic (= 1.6.11)!

app/assets/javascripts/app/pages/single-post-viewer.js

@@ -12,16 +12,6 @@ app.pages.SinglePostViewer = app.views.Base.extend({
     this.model = new app.models.Post({ id : gon.post.id });
     this.model.preloadOrFetch().done(_.bind(this.initViews, this));
     this.model.interactions.fetch(); //async, yo, might want to throttle this later.
-    this.setupLightbox();
-  },
-
-  setupLightbox : function(){
-    this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
-    this.lightbox.set({
-      imageParent: '.photo_attachments',
-      imageSelector: 'img.stream-photo'
-    });
-    this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked);
   },
 
   initViews : function() {

app/assets/javascripts/app/views.js

@@ -53,7 +53,7 @@ app.views.Base = Backbone.View.extend({
     this.postRenderTemplate();
   },
 
-  postRenderTemplate : $.noop, //hella callbax yo
+  postRenderTemplate: $.noop, //hella callbax yo
 
   renderSubviews : function(){
     var self = this;

app/assets/javascripts/app/views/content_view.js

@@ -73,6 +73,10 @@ app.views.Content = app.views.Base.extend({
 
   postRenderTemplate : function(){
     _.defer(_.bind(this.collapseOversized, this));
+    var photoAttachments = this.$(".photo_attachments");
+    if(photoAttachments.length > 0) {
+      new app.views.Gallery({ el: photoAttachments });
+    }
   }
 });
 
@@ -82,6 +86,10 @@ app.views.StatusMessage = app.views.Content.extend({
 
 app.views.ExpandedStatusMessage = app.views.StatusMessage.extend({
   postRenderTemplate : function(){
+    var photoAttachments = this.$(".photo_attachments");
+    if(photoAttachments.length > 0) {
+      new app.views.Gallery({ el: photoAttachments });
+    }
   }
 });
 

app/assets/javascripts/app/views/gallery_view.js

@@ -0,0 +1,41 @@
+app.views.Gallery = app.views.Base.extend({
+  events: {
+    "click a.gallery-picture": "showGallery"
+  },
+
+  pictures: function(){
+    return this.$el.find("a.gallery-picture");
+  },
+
+  showGallery: function(event){
+    event = event || window.event;
+    var target = event.target || event.srcElement;
+    var link = target.src ? target.parentNode : target;
+    var links = this.pictures();
+    blueimp.Gallery(links, this.options(event, link));
+  },
+
+  preventHideControls: function(){
+    var lightbox = $("#blueimp-gallery");
+    var onEvent = function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+    };
+
+    lightbox.find(".slide").click(onEvent);
+  },
+
+  options: function(event, link) {
+    return {
+      index: link,
+      event: event,
+      stretchImages: true,
+      hidePageScrollbars: false,
+      disableScroll: true,
+      continuous: true,
+      toggleControlsOnReturn: false,
+      onopened: this.preventHideControls,
+      slideshowInterval: 2000
+    };
+  }
+});

app/assets/javascripts/app/views/infinite_stream_view.js

@@ -28,10 +28,6 @@ app.views.InfScroll = app.views.Base.extend({
     this.prependedPosts = document.createDocumentFragment();
   },
 
-  postRenderTemplate : function() {
-    if(this.stream.isFetching()) { this.showLoader() }
-  },
-
   createPostView : function(post){
     var postView = new this.postClass({ model: post, stream: this.stream });
     if (this.collection.at(0).id === post.id) {
@@ -85,6 +81,7 @@ app.views.InfScroll = app.views.Base.extend({
     this.$el.prepend(this.prependedPosts);
     this.$el.append(this.appendedPosts);
     this._resetPostFragments();
+    this.postRenderTemplate();
   },
 
   finishedLoading: function() {

app/assets/javascripts/app/views/photo_view.js

@@ -4,7 +4,7 @@ app.views.Photo = app.views.Base.extend({
 
   templateName: "photo",
 
-  className : "photo loaded",
+  className : "photo loaded col-md-4 clearfix",
 
   events: {
     "click .remove_post": "destroyModel"
@@ -19,7 +19,7 @@ app.views.Photo = app.views.Base.extend({
 
   presenter : function() {
     return _.extend(this.defaultPresenter(), {
-      authorIsCurrentUser : app.currentUser.isAuthorOf(this.model),
+      authorIsCurrentUser : app.currentUser.isAuthorOf(this.model)
     });
   }
 });

app/assets/javascripts/app/views/photos_view.js

@@ -1,26 +1,24 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.Photos = app.views.InfScroll.extend({
+  className: "clearfix",
+
+  postClass : app.views.Photo,
+
   initialize : function() {
     this.stream = this.model;
     this.collection = this.stream.items;
 
     // viable for extraction
     this.stream.fetch();
-
-    this.setupLightbox();
     this.setupInfiniteScroll();
   },
 
-  postClass : app.views.Photo,
+  postRenderTemplate: function(){
-
+    var photoAttachments = $("#main_stream > div");
-  setupLightbox : function(){
+    if(photoAttachments.length > 0) {
-    this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
+      new app.views.Gallery({ el: photoAttachments });
-    this.lightbox.set({
+    }
-      imageParent: '#main_stream',
-      imageSelector: 'img.photo'
-    });
-    $(this.el).delegate("a.photo-link", "click", this.lightbox.lightboxImageClicked);
   }
 });
 // @license-end

app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js

@@ -1,17 +1,17 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.SinglePostContent = app.views.Base.extend({
-  templateName: 'single-post-viewer/single-post-content',
+  templateName: "single-post-viewer/single-post-content",
   tooltipSelector: "time, .post_scope",
 
   subviews : {
     "#single-post-actions" : "singlePostActionsView",
-    '#single-post-moderation': "singlePostModerationView",
+    "#single-post-moderation": "singlePostModerationView",
-    '#real-post-content' : 'postContentView',
+    "#real-post-content" : "postContentView",
     ".oembed" : "oEmbedView",
     ".opengraph" : "openGraphView",
     ".status-message-location" : "postLocationStreamView",
-    '.poll': 'pollView',
+    ".poll": "pollView"
   },
 
   initialize : function() {

app/assets/javascripts/app/views/stream_view.js

@@ -12,7 +12,6 @@ app.views.Stream = app.views.InfScroll.extend(_.extend(
     this.postViews = [];
 
     this.setupNSFW();
-    this.setupLightbox();
     this.setupInfiniteScroll();
     this.setupShortcuts();
     this.markNavSelected();
@@ -20,11 +19,6 @@ app.views.Stream = app.views.InfScroll.extend(_.extend(
 
   postClass : app.views.StreamPost,
 
-  setupLightbox : function(){
-    this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
-    this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked);
-  },
-
   setupNSFW : function(){
     function reRenderPostViews() {
       _.map(this.postViews, function(view){ view.render() });

app/assets/javascripts/main.js

@@ -44,3 +44,4 @@
 //= require bootstrap
 //= require osmlocator
 //= require bootstrap-switch
+//= require blueimp-gallery

app/assets/javascripts/widgets/lightbox.js

@@ -1,186 +0,0 @@
-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
-/*   Copyright (c) 2010-2011, Diaspora Inc.  This file is
- *   licensed under the Affero General Public License version 3 or later.  See
- *   the COPYRIGHT file.
- */
-
-
-jQuery.fn.center = (function() {
-  var $window = $(window);
-  return function () {
-    this.css({
-      position: "absolute",
-      top: ($window.height() - this.height()) / 2 + $window.scrollTop() + "px",
-      left:($window.width() - this.width()) / 2 + $window.scrollLeft() + "px"
-    });
-    return this;
-  };
-})();
-
-(function() {
-  var Lightbox = function() {
-    var self = this;
-
-    self.options = {
-      imageParent: '.stream_element',
-      imageSelector: 'img.stream-photo'
-    };
-
-    this.subscribe("widget/ready", function() {
-      $.extend(self, {
-        lightbox: $("#lightbox"),
-        navigation: $("#lightbox-navigation"),
-        imageset: $("#lightbox-imageset"),
-        backdrop: $("#lightbox-backdrop"),
-        closelink: $("#lightbox-close-link"),
-        scrollleft: $("#lightbox-scrollleft"),
-        scrollright: $("#lightbox-scrollright"),
-        image: $("#lightbox-image"),
-        body: $(document.body),
-        window: $(window)
-      });
-
-      //self.post.delegate("a.stream-photo-link", "click", self.lightboxImageClicked);
-      self.imageset.delegate("img", "click", self.imagesetImageClicked);
-
-      self.window.resize(function() {
-        self.lightbox.css("max-height", (self.window.height() - 100) + "px");
-      }).trigger("resize");
-
-      self.closelink.click(function(evt){
-        evt.preventDefault();
-        self.resetLightbox();
-      });
-      self.lightbox.click(self.resetLightbox);
-
-      self.backdrop.click(function(evt) {
-        evt.preventDefault();
-        self.resetLightbox();
-      });
-
-      self.scrollleft.click(function(evt){
-        evt.preventDefault();
-        evt.stopPropagation();
-        self.navigation.animate({scrollLeft: (self.navigation.scrollLeft()
-           - (self.window.width() - 150))}, 200, 'swing');
-      });
-
-      self.scrollright.click(function(evt){
-        evt.preventDefault();
-        evt.stopPropagation();
-        self.navigation.animate({scrollLeft: (self.navigation.scrollLeft()
-           + (self.window.width() - 150))}, 200, 'swing');
-      });
-
-      self.body.keydown(function(evt) {
-        var imageThumb = self.imageset.find("img.selected");
-
-        switch(evt.keyCode) {
-        case 27:
-          self.resetLightbox();
-          break;
-        case 37:
-          //left
-          self.selectImage(self.prevImage(imageThumb));
-          break;
-        case 39:
-          //right
-          self.selectImage(self.nextImage(imageThumb));
-          break;
-        }
-      });
-    });
-
-    this.nextImage = function(thumb){
-      var next = thumb.next();
-      if (next.length === 0) {
-        next = self.imageset.find("img").first();
-      }
-      return(next);
-    };
-
-    this.prevImage = function(thumb){
-      var prev = thumb.prev();
-      if (prev.length === 0) {
-        prev = self.imageset.find("img").last();
-      }
-      return(prev);
-    };
-
-    this.lightboxImageClicked = function(evt) {
-      evt.preventDefault();
-
-      var selectedImage = $(this).find(self.options.imageSelector),
-        imageUrl = selectedImage.attr("data-full-photo"),
-        images = selectedImage.parents(self.options.imageParent).find(self.options.imageSelector),
-        imageThumb;
-
-      self.imageset.html("");
-      images.each(function(index, image) {
-        image = $(image);
-        var thumb = $("<img/>", {
-          src: image.attr("data-small-photo"),
-          "data-full-photo": image.attr("data-full-photo")
-        });
-
-        if(image.attr("data-full-photo") === imageUrl) {
-          imageThumb = thumb;
-        }
-
-        self.imageset.append(thumb);
-      });
-
-      self
-        .selectImage(imageThumb)
-        .revealLightbox();
-
-      self.scrollToThumbnail(imageThumb);
-    };
-
-    this.imagesetImageClicked = function(evt) {
-      evt.preventDefault();
-      evt.stopPropagation();
-
-      self.selectImage($(this));
-    };
-
-    this.scrollToThumbnail = function(imageThumb) {
-      self.navigation.animate({scrollLeft: (self.navigation.scrollLeft()
-         + imageThumb.offset().left +35 - (self.window.width() / 2))}, 200, 'swing');
-    };
-
-    this.selectImage = function(imageThumb) {
-      $(".selected", self.imageset).removeClass("selected");
-      imageThumb.addClass("selected");
-      self.image.attr("src", imageThumb.attr("data-full-photo"));
-
-      self.scrollToThumbnail(imageThumb);
-
-      return self;
-    };
-
-    this.revealLightbox = function() {
-      self.body.addClass("lightboxed");
-      self.lightbox
-        .css("max-height", (self.window.height() - 100) + "px")
-        .show();
-
-      return self;
-    };
-
-    this.resetLightbox = function() {
-      self.lightbox.hide();
-      self.body.removeClass("lightboxed");
-      self.image.attr("src", ImagePaths.get("ajax-loader2.gif"));
-      self.imageset.html("");
-    };
-
-    this.set = function(opts) {
-      $.extend(self.options, opts);
-    };
-  };
-
-  Diaspora.Widgets.Lightbox = Lightbox;
-})();
-// @license-end

app/assets/stylesheets/_application.scss

@@ -16,7 +16,6 @@
 @import 'new_styles/base';
 @import 'new_styles/interactions';
 @import 'spinner';
-@import 'lightbox';
 @import 'timeago';
 @import 'vendor/fileuploader';
 @import 'vendor/autoSuggest';
@@ -94,4 +93,6 @@
 /* statistics */
 @import 'statistics';
 
-@import "bootstrap3-switch";
+/* gallery */
+@import "blueimp-gallery";
+@import "gallery";

app/assets/stylesheets/bootstrap-complete.scss

@@ -2,3 +2,7 @@
 @import "bootstrap-sprockets";
 @import "bootstrap-variables"; //our overwrites of bootstrap variables
 @import "bootstrap";
+
+// Plugins
+
+@import "bootstrap3-switch";

app/assets/stylesheets/gallery.scss

@@ -0,0 +1,59 @@
+$thumbnail-size: 12px;
+$thumbnail-margin: 2px;
+$thumbnail-active-size: $thumbnail-size + $thumbnail-margin;
+
+#blueimp-gallery {
+  .slides {
+    height: calc(100% - 40px);
+    padding: 20px 0 0 0;
+    margin: 0;
+  }
+
+  [class^="entypo-"], [class*="entypo-"] {
+    color: $text-grey;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .play-pause {
+    z-index: 2;
+    color: $text-grey;
+  }
+
+  .prev, .next {
+    border-color: $text-grey;
+  }
+
+  .prev [class^="entypo-"], .prev [class*="entypo-"] {
+    padding-right: 6px;
+  }
+
+  .next [class^="entypo-"], .next [class*="entypo-"] {
+    padding-left: 6px;
+  }
+
+  .indicator {
+    margin: 8px 0;
+    position: unset;
+    height: $thumbnail-size + 5px;
+    li {
+      border: none;
+      margin: $thumbnail-margin;
+      vertical-align: middle;
+      width: $thumbnail-size;
+      height: $thumbnail-size;
+      border-radius: $thumbnail-size / 2;
+
+      &.active, &:hover{
+        margin: $thumbnail-margin / 2;
+        width: $thumbnail-active-size;
+        height: $thumbnail-active-size;
+        border-radius: $thumbnail-active-size / 2;
+        transition: linear 0.2s;
+        transition-property: height, width, margin;
+      }
+    }
+  }
+}

app/assets/stylesheets/lightbox.scss

@@ -1,147 +0,0 @@
-#lightbox{
-  z-index: 1003;
-  position: fixed;
-  top: 0;
-  right: 0;
-  display: none;
-  overflow-y: auto;
-  width: 100%;
-  text-align: center;
-  padding-top: 80px;
-  padding-bottom: 20px;
-
-  color: $text-dark-grey;
-  text-shadow: none;
-  font-size: 12px;
-
-  &.show{
-    position: absolute;
-    display: block;
-  }
-
-  #lightbox-image{
-    box-shadow: 0 10px 20px black;
-    top: 0;
-    display: block;
-    margin-bottom: 120px;
-    background: white;
-  }
-
-  #lightbox-content{
-    text-align: left;
-    display: inline-block;
-  }
-
-  #lightbox-links{
-    margin-top: 12px;
-
-    .attribution{
-      float: right;
-    }
-
-    #lightbox-attribution-link{
-      color: #999;
-      font-weight: bold;
-      &:hover{
-        color: #eee;
-      }
-    }
-  }
-
-  #lightbox-close-link,
-  #lightbox-attribution-link,
-  #lightbox-short-link{
-    display: inline-block;
-    color: #333;
-    text-decoration: none;
-    line-height: 14px;
-
-    &:hover{
-      color: #eee;
-    }
-  }
-
-  #lightbox-close-link{
-    color: $text-dark-grey;
-    margin-bottom: 12px;
-  }
-}
-
-#lightbox-backdrop{
-  box-shadow:inset 0 0 50px #000000;
-
-  z-index: 1002;
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  background-color: rgba(0,0,0,0.9);
-  display: none;
-}
-
-#lightbox-navigation{
-  z-index: 1004;
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  text-align: center;
-  background-color: rgba(0,0,0,0.4);
-  padding: 5px 0;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-#lightbox-scrollleft, #lightbox-scrollright{
-  z-index: 1005;
-  color: #fff;
-  background-color: #0f0f0f;
-  display: inline-block;
-  height: 70px;
-  width: 30px;
-  position: fixed;
-  cursor: pointer;
-  font-size: 3em;
-}
-
-#lightbox-scrollleft{
-  left: 0px;
-}
-
-#lightbox-scrollright{
-  right: 0px;
-}
-
-#lightbox-imageset{
-  display: inline-block;
-  vertical-align: bottom;
-  padding-left: 50px;
-  padding-right: 50px;
-
-  img{
-    transition: opacity 0.2s;
-    opacity: 0.2;
-    height: 70px;
-    width: 70px;
-    margin-right: 5px;
-    cursor: pointer;
-    background-color: white;
-
-    &:last-child{
-      margin-right: 0;
-    }
-
-    &.selected{
-      opacity: 1;
-    }
-  }
-}
-
-body.lightboxed{
-  overflow: hidden;
-  #lightbox-backdrop{
-    display: block;
-  }
-}
-

app/assets/templates/header_tpl.jst.hbs

@@ -108,18 +108,5 @@
         </div>
       </div>
     </div>
-
-    <div id="lightbox">
-      <div id="lightbox-content">
-        <a href="#" id="lightbox-close-link">[x] {{t "header.close"}}</a>
-        <img id="lightbox-image">
-        <div id="lightbox-navigation">
-          <div id="lightbox-scrollleft">«</div>
-          <div id="lightbox-imageset"></div>
-          <div id="lightbox-scrollright">»</div>
-        </div>
-      </div>
-    </div>
-    <div id="lightbox-backdrop"></div>
   </div>
 </nav>

app/assets/templates/photo_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div class="media col-md-4">
+<div class="media">
   <div class="bd">
     {{#if loggedIn}}
       <div class="control-icons">
@@ -21,8 +21,8 @@
     {{/if}}
 
     <div class="thumbnail img-thumbnail">
-      <a href="#" class="photo-link">
+      <a href="{{sizes.large}}" class="photo-link gallery-picture">
-        <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+        <img src="{{sizes.large}}" class="photo big_photo">
       </a>
     </div>
 

app/assets/templates/status-message_tpl.jst.hbs

@@ -24,15 +24,15 @@
 
 {{#if largePhoto}}
   <div class="photo_attachments nsfw-hidden">
-    <a href="#" class="stream-photo-link">
+    {{#with largePhoto}}
-      {{#with largePhoto}}
+      <a href="{{sizes.large}}" class="stream-photo-link gallery-picture">
-        <img src="{{sizes.large}}" class="stream-photo big_stream_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+        <img src="{{sizes.large}}" class="stream-photo big_stream_photo">
-      {{/with}}
+      </a>
-    </a>
+    {{/with}}
 
     {{#each smallPhotos}}
-      <a href="#" class="stream-photo-link">
+      <a href="{{sizes.large}}" class="stream-photo-link gallery-picture">
-        <img src="{{sizes.small}}" class="stream-photo thumb_small" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+        <img src="{{sizes.small}}" class="stream-photo thumb_small">
       </a>
     {{/each}}
   </div>

app/views/layouts/_header.html.haml

@@ -23,12 +23,3 @@
                   - if AppConfig.settings.enable_registrations? && !current_page?(controller: "/registrations", action: :new)
                     %li= link_to t("devise.shared.links.sign_up"), new_user_registration_path, class: 'login'
                   %li= link_to t('devise.shared.links.sign_in'), new_user_session_path, class: 'login'
-
-        #lightbox
-          #lightbox-content
-            %a#lightbox-close-link(href='#')
-              [x]
-              =t('javascripts.header.close')
-            %img#lightbox-image
-            #lightbox-imageset
-        #lightbox-backdrop

app/views/layouts/application.html.haml

@@ -57,3 +57,15 @@
 
     = include_chartbeat
     = include_mixpanel_guid
+
+    .blueimp-gallery.blueimp-gallery-controls#blueimp-gallery
+      .slides
+      %h3.title
+      %a.prev
+        .entypo-chevron-small-left
+      %a.next
+        .entypo-chevron-small-right
+      %a.close
+        .entypo-cross
+      %a.play-pause
+      %ol.indicator

app/views/people/show.html.haml

@@ -26,7 +26,7 @@
         -if user_signed_in? && current_page?(person_path(current_user.person))
           = render 'publisher/publisher', publisher_aspects_for(nil)
 
-        #main_stream.stream
+        .stream.clearfix#main_stream
           -# JS
 
         #paginate

config/.jshint.json

@@ -52,6 +52,7 @@
     "parse_url",
     "punycode",
     "qq",
+    "blueimp",
 
     "loginAs",
     "logout",

features/desktop/photo_gallery.feature

@@ -19,9 +19,3 @@ Feature: viewing the photo lightbox
       And I press the attached image
       And I press the close lightbox link
       Then I should not see the photo lightbox
-
-    Scenario: closing the lightbox by clicking the backdrop
-      Then I should see an image attached to the post
-      And I press the attached image
-      And I press the lightbox backdrop
-      Then I should not see the photo lightbox

features/step_definitions/gallery_steps.rb

@@ -0,0 +1,11 @@
+Then "I should see the photo lightbox" do
+  step %(I should see a "#blueimp-gallery" within "body")
+end
+
+Then "I should not see the photo lightbox" do
+  step %(I should not see a "#blueimp-gallery" within "body")
+end
+
+Then "I press the close lightbox link" do
+  find(:css, "#blueimp-gallery .close").click
+end

features/step_definitions/lightbox_steps.rb

@@ -1,19 +0,0 @@
-Then 'I should see the photo lightbox' do
-  step %{I should see a "img" within "#lightbox-imageset"}
-  step %{I should see a "#lightbox-backdrop" within "body"}
-  step %{I should see a "#lightbox-image" within "body"}
-end
-
-Then 'I should not see the photo lightbox' do
-  step %{I should not see a "#lightbox-imageset" within "body"}
-  step %{I should not see a "#lightbox-backdrop" within "body"}
-  step %{I should not see a "#lightbox-image" within "body"}
-end
-
-Then 'I press the close lightbox link' do
-  find(:css, "#lightbox-close-link").click
-end
-
-Then 'I press the lightbox backdrop' do
-  find(:css, "#lightbox-backdrop").click
-end

spec/javascripts/widgets/lightbox-spec.js

@@ -1,95 +0,0 @@
-/*   Copyright (c) 2010-2012, Diaspora Inc.  This file is
- *   licensed under the Affero General Public License version 3 or later.  See
- *   the COPYRIGHT file.
- */
-
-describe("Diaspora.Widgets.Lightbox", function() {
-  var photos;
-
-  var createDummyMarkup = function(opts){
-    var defaults = {
-      linkClass: 'stream-photo-link',
-      imageParent: 'stream_element',
-      imageClass: 'stream-photo'
-    };
-
-    var classes = _.extend(defaults, opts);
-    
-    var output = $('<div/>').addClass(classes.imageParent);
-    _.each(photos, function(photo){
-      output.append(
-        $('<a />')
-          .attr('href', '#')
-          .addClass(classes.linkClass)
-          .append(
-            $('<img />')
-              .attr('src', photo.sizes.large)
-              .addClass(classes.imageClass)
-              .data({
-                'small-photo': photo.sizes.small,
-                'full-photo': photo.sizes.large
-              })
-          )
-      );
-    });
-    
-    return output;
-  };
-  
-  beforeEach(function(){
-    $("#jasmine_content").html(
-      '<div id="lightbox" style="display: none;">TESTCONTENT</div>' +
-      '<div id="lightbox-imageset"></div>' +
-      '<div id="lightbox-backdrop"></div>' +
-      '<div id="lightbox-close-link"></div>'
-    );
-
-    photos = $.parseJSON(spec.readFixture("photos_json"))["photos"];
-  });
-  
-  context("opens the lightbox correctly", function() {
-    var lightbox, photoElement;
-    
-    beforeEach(function() {
-      $("#jasmine_content").append(createDummyMarkup());
-      photoElement = $('.stream-photo').first();
-      
-      lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
-      $('.stream_element').delegate("a.stream-photo-link", "click", lightbox.lightboxImageClicked);
-    });
-      
-    it("shows the lightbox when a photo is clicked", function() {
-      spyOn(lightbox, 'revealLightbox');
-      photoElement.trigger('click');
-      expect(lightbox.revealLightbox).toHaveBeenCalled();
-    });
-    
-  });
-
-  context("opens lightbox for differently named elements", function(){
-    var lightbox, photoElement;
-
-    beforeEach(function() {
-      $("#jasmine_content").append(createDummyMarkup({
-        linkClass: 'photo-link',
-        imageParent: 'main_stream',
-        imageClass: 'photo'
-      }));
-      photoElement = $('.photo').first();
-
-      lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
-      lightbox.set({
-        imageParent: '.main_stream',
-        imageSelector: 'img.photo'
-      });
-      $('.main_stream').delegate("a.photo-link", "click", lightbox.lightboxImageClicked);
-    });
-
-    it("shows the lightbox when a photo is clicked", function() {
-      spyOn(lightbox, 'revealLightbox');
-      photoElement.trigger('click');
-      expect(lightbox.revealLightbox).toHaveBeenCalled();
-    });
-  });
-  
-});