Skip to content
Browse files

Added the ability to click on an image to advance the slideshow.

As per http://getsatisfaction.com/stacey/topics/next_image_upon_click, I modified the JS files to enable a user to click on a picture to advance it.
  • Loading branch information...
1 parent 9794b38 commit 19c8f0070204ea1bf7c3ee96a208a81150ad7af6 @byee01 committed Jul 29, 2010
Showing with 16 additions and 4 deletions.
  1. +14 −2 public/docs/js/gallery.js
  2. +2 −2 public/docs/js/init-gallery.js
View
16 public/docs/js/gallery.js
@@ -1,22 +1,27 @@
Gallery = {
currentImage: 0,
imageHolders: null,
+ imageWrapper: null,
imageHolderWidth: null,
imageCountHolder: null,
maxCount: null,
nextButton: null,
prevButoon: null,
- init: function(imageHolder, imageWrapperWidth, imageCountHolder, nextButton, prevButton, descriptionHolder, descriptionWidth) {
+ init: function(imageHolder, imageWrapper, imageCountHolder, nextButton, prevButton, descriptionHolder, descriptionWidth) {
// set custom variables
this.imageHolder = imageHolder;
- this.imageWrapperWidth = imageWrapperWidth;
+ this.imageWrapperWidth = imageWrapper.width();
+ this.imageWrapper = imageWrapper;
this.imageCountHolder = imageCountHolder;
this.maxCount = $("img", imageHolder).length;
this.nextButton = nextButton;
this.prevButton = prevButton;
this.descriptionHolder = descriptionHolder;
this.descriptionWidth = descriptionWidth;
+ // Gives the wrapper a cursor so the user knows it's clickable.
+ this.imageWrapper.css('cursor', 'pointer');
+
// check if a specific image has been specified in the URL
if(document.URL.match(/#[0-9]+/)) {
this.gotoImage(new Number(new String(document.URL.match(/#[0-9]+/)).replace("#", "")) - 1);
@@ -39,6 +44,13 @@ Gallery = {
this.blur();
return false;
});
+
+ // Advance by clicking on picture
+ this.imageWrapper.click(function() {
+ Gallery.next();
+ this.blur();
+ return false;
+ });
},
next: function() {
// show next image
View
4 public/docs/js/init-gallery.js
@@ -6,8 +6,8 @@ $(function() {
$("div.image").wrapAll("<div id='image-wrapper'><div id='image-holder'></div></div>");
$("div.image").show();
- // init gallery: Gallery.init(imageHolder, imageWrapperWidth, imageCountHolder, nextButton, prevButton)
- Gallery.init($("div#image-holder"), 560, $("p#gallery-count").children("span")[0], $("a#next-image"), $("a#previous-image"));
+ // init gallery: Gallery.init(imageHolder, imageWrapper, imageCountHolder, nextButton, prevButton)
+ Gallery.init($("div#image-holder"), $("div#image-wrapper"), $("p#gallery-count").children("span")[0], $("a#next-image"), $("a#previous-image"));
} else {
// hide gallery count and navigation

1 comment on commit 19c8f00

@kolber
kolber commented on 19c8f00 Aug 2, 2010

Thanks Brian.
I will merge this into template 1 once I get some free time to test it out.

Please sign in to comment.
Something went wrong with that request. Please try again.