added left/right arrow events to the lightbox; lightbox only on stream element images for now
This commit is contained in:
parent
e09ddef361
commit
776368d45e
4 changed files with 43 additions and 12 deletions
|
|
@ -3,9 +3,7 @@
|
||||||
-# the COPYRIGHT file.
|
-# the COPYRIGHT file.
|
||||||
|
|
||||||
- content_for :head do
|
- content_for :head do
|
||||||
= include_javascripts :aspects
|
= include_javascripts :finder
|
||||||
|
|
||||||
= include_javascripts :finder
|
|
||||||
|
|
||||||
#aspect_edit_pane.larger.friend_finder
|
#aspect_edit_pane.larger.friend_finder
|
||||||
#facebox_header
|
#facebox_header
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
= link_to(how_long_ago(post), post_path(post))
|
= link_to(how_long_ago(post), post_path(post))
|
||||||
|
|
||||||
- if post.activity_streams?
|
- if post.activity_streams?
|
||||||
= link_to image_tag(post.image_url), post.object_url
|
= link_to image_tag(post.image_url, 'data-small-photo' => post.image_url), post.object_url, :class => "stream-photo-link"
|
||||||
- else
|
- else
|
||||||
= render 'status_messages/status_message', :post => post, :photos => post.photos
|
= render 'status_messages/status_message', :post => post, :photos => post.photos
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,14 @@
|
||||||
|
|
||||||
- if photos.size > 0
|
- if photos.size > 0
|
||||||
.photo_attachments
|
.photo_attachments
|
||||||
= link_to (image_tag photos.first.url(:scaled_full), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "big_stream_photo"
|
= link_to (image_tag photos.first.url(:scaled_full), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "stream-photo-link big_stream_photo"
|
||||||
- if photos.size > 1
|
- if photos.size > 1
|
||||||
- if photos.size >= 8
|
- if photos.size >= 8
|
||||||
- for photo in photos[1..8]
|
- for photo in photos[1..8]
|
||||||
= link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo)
|
= link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
|
||||||
- else
|
- else
|
||||||
- for photo in photos[1..photos.size]
|
- for photo in photos[1..photos.size]
|
||||||
= link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo)
|
= link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
|
||||||
|
|
||||||
%p{ :class => direction_for(post.text) }
|
%p{:class => direction_for(post.text)}
|
||||||
= markdownify(post.text, :youtube_maps => post[:youtube_titles])
|
= markdownify(post.text, :youtube_maps => post[:youtube_titles])
|
||||||
|
|
|
||||||
|
|
@ -25,26 +25,58 @@ jQuery.fn.center = (function() {
|
||||||
lightbox: $("#lightbox"),
|
lightbox: $("#lightbox"),
|
||||||
imageset: $("#lightbox-imageset"),
|
imageset: $("#lightbox-imageset"),
|
||||||
backdrop: $("#lightbox-backdrop"),
|
backdrop: $("#lightbox-backdrop"),
|
||||||
|
closelink: $("#lightbox-close-link"),
|
||||||
image: $("#lightbox-image"),
|
image: $("#lightbox-image"),
|
||||||
stream: $("#main_stream"),
|
stream: $(".stream_container"),
|
||||||
body: $(document.body),
|
body: $(document.body),
|
||||||
window: $(window)
|
window: $(window)
|
||||||
});
|
});
|
||||||
|
|
||||||
self.stream.delegate("a", "click", self.lightboxImageClicked);
|
self.stream.delegate("a.stream-photo-link", "click", self.lightboxImageClicked);
|
||||||
self.imageset.delegate("img", "click", self.imagesetImageClicked);
|
self.imageset.delegate("img", "click", self.imagesetImageClicked);
|
||||||
|
|
||||||
self.window.resize(function() {
|
self.window.resize(function() {
|
||||||
self.lightbox.css("max-height", (self.window.height() - 100) + "px");
|
self.lightbox.css("max-height", (self.window.height() - 100) + "px");
|
||||||
}).trigger("resize");
|
}).trigger("resize");
|
||||||
|
|
||||||
|
self.closelink.click(self.resetLightbox);
|
||||||
|
|
||||||
self.body.keydown(function(evt) {
|
self.body.keydown(function(evt) {
|
||||||
if(evt.keyCode == 27){
|
|
||||||
|
var imageThumb = self.imageset.find("img.selected");
|
||||||
|
|
||||||
|
switch(evt.keyCode) {
|
||||||
|
case 27:
|
||||||
self.resetLightbox();
|
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) {
|
this.lightboxImageClicked = function(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
|
||||||
|
|
@ -75,7 +107,8 @@ jQuery.fn.center = (function() {
|
||||||
|
|
||||||
this.imagesetImageClicked = function(evt) {
|
this.imagesetImageClicked = function(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
|
||||||
|
|
||||||
self.selectImage($(this));
|
self.selectImage($(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue