? galleryformatter-826928-2-public-interface.patch
? gallerystyles/greenarrows/images/next-prev.png
Index: gallerystyles/greenarrows/greenarrows.css
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/galleryformatter/gallerystyles/greenarrows/greenarrows.css,v
retrieving revision 1.1.2.4
diff -u -p -r1.1.2.4 greenarrows.css
--- gallerystyles/greenarrows/greenarrows.css 16 May 2010 16:41:37 -0000 1.1.2.4
+++ gallerystyles/greenarrows/greenarrows.css 28 Sep 2010 11:07:25 -0000
@@ -8,7 +8,7 @@
.galleryformatter-greenarrows .gallery-thumbs .wrapper,
.galleryformatter-greenarrows .gallery-thumbs li.active a,
.galleryformatter-greenarrows .gallery-thumbs li a:hover,
-.galleryformatter-greenarrows .galleryformatter-view-full { background:url("images/sprite.png") no-repeat scroll 0 0 transparent; }
+.galleryformatter-greenarrows .view-full { background:url("images/sprite.png") no-repeat scroll 0 0 transparent; }
.galleryformatter-greenarrows .gallery-slides .panel-overlay {
position: absolute;
@@ -25,15 +25,14 @@
background-repeat: repeat-x;
border-bottom: 1px solid #EEEEEE;
}
-.galleryformatter-greenarrows .galleryformatter-view-full {
+.galleryformatter-greenarrows .view-full {
background-position:center -205px;
height:46px; width:46px;
margin:10px;
- position:absolute;
right:0; top:0;
text-indent:-9999px;
}
-.galleryformatter-greenarrows a:hover .galleryformatter-view-full {
+.galleryformatter-greenarrows a:hover .view-full {
background-position: center -252px;
}
.galleryformatter-greenarrows .gallery-thumbs ul { list-style: none; }
@@ -89,3 +88,31 @@
.galleryformatter-greenarrows .gallery-thumbs .forward:hover { background-position: 0px -52px; }
.galleryformatter-greenarrows .gallery-thumbs .back:hover { background-position: -4px -156px; }
+
+.galleryformatter-greenarrows .slide-button {
+ background: transparent url(images/next-prev.png) no-repeat top left;
+ height: 64px;
+ width: 32px;
+ top: 43%;
+ text-indent: -9999px;
+ filter:alpha(opacity=20);
+ -ms-filter:”alpha(opacity=20)”;
+ -moz-opacity:0.2;
+ -khtml-opacity: 0.2;
+ opacity: 0.2;
+}
+
+.galleryformatter-greenarrows .prev-slide {
+ background-position: top left;
+}
+.galleryformatter-greenarrows .next-slide {
+ background-position: top right;
+}
+.galleryformatter-greenarrows .slide-button:hover {
+ filter: alpha(opacity=100);
+ -ms-filter: ”alpha(opacity=100)”;
+ -moz-opacity: 1;
+ -khtml-opacity: 1;
+ opacity: 1;
+}
+
Index: includes/galleryformatter.theme.inc
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/galleryformatter/includes/Attic/galleryformatter.theme.inc,v
retrieving revision 1.1.2.20
diff -u -p -r1.1.2.20 galleryformatter.theme.inc
--- includes/galleryformatter.theme.inc 28 Sep 2010 10:19:51 -0000 1.1.2.20
+++ includes/galleryformatter.theme.inc 28 Sep 2010 11:07:25 -0000
@@ -88,7 +88,7 @@ function template_preprocess_galleryform
}
$link_url = $widget['link_to_full_preset'] ? imagecache_create_url($widget['link_to_full_preset'], $filepath) : file_create_url($filepath);
// link the slide image and include the span for the icon
- $slides[$id]['image'] = l(''. t('View the full image') .''. $slides[$id]['image'], $link_url, array('attributes' => $link_attributes, 'html' => TRUE,));
+ $slides[$id]['image'] = l(''. t('View the full image') .''. $slides[$id]['image'], $link_url, array('attributes' => $link_attributes, 'html' => TRUE,));
} // END linking to original
// setup thumbnail images
Index: theme/galleryformatter.css
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/galleryformatter/theme/galleryformatter.css,v
retrieving revision 1.1.2.5
diff -u -p -r1.1.2.5 galleryformatter.css
--- theme/galleryformatter.css 30 Jul 2010 11:13:02 -0000 1.1.2.5
+++ theme/galleryformatter.css 28 Sep 2010 11:07:25 -0000
@@ -16,7 +16,7 @@
li.gallery-slide { display: block; }
.gallery-thumbs .wrapper,
-.gallery-slides { overflow: hidden; }
+.gallery-slides { overflow: hidden; position: relative; }
.gallery-frame { width: 99999px; }
.gallery-slides .gallery-slide { float: left; position: relative; }
@@ -35,11 +35,26 @@ li.gallery-slide { display: block; }
.gallery-thumbs li a { outline: none; }
/*** end css gallery ****/
+.galleryformatter .view-full {
+ position: absolute;
+}
+.galleryformatter .slide-button {
+ top: 50%;
+ position: absolute;
+ display: block;
+ cursor: pointer;
+}
+.galleryformatter .prev-slide {
+ left: 0;
+}
+.galleryformatter .next-slide {
+ right: 0;
+}
+
/*** js enabled gallery css **/
.gallery-processed .gallery-frame { position:relative; }
.gallery-processed .gallery-slides .gallery-slide {
float: none;
position: absolute;
top: 0; left: 0;
-}
-
+}
\ No newline at end of file
Index: theme/galleryformatter.js
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/galleryformatter/theme/galleryformatter.js,v
retrieving revision 1.1.2.8
diff -u -p -r1.1.2.8 galleryformatter.js
--- theme/galleryformatter.js 9 Sep 2010 19:40:23 -0000 1.1.2.8
+++ theme/galleryformatter.js 28 Sep 2010 11:07:25 -0000
@@ -19,6 +19,8 @@ Drupal.galleryformatter.prepare = functi
var $thumbsLi = $('li', $thumbs);
var thumbWidth = $thumbsLi.filter(':first').width() + 'px';
var liWidth = $thumbsLi.outerWidth(); // includes padding
+ var $wrapper = $('.wrapper', $el);
+ var visibleWidth = $wrapper.outerWidth();
/*
* Only start the thumbs carrousel if needed
@@ -26,7 +28,9 @@ Drupal.galleryformatter.prepare = functi
if (($thumbsLi.size() * liWidth) > $thumbs.width()) {
$('ul', $thumbs).width('99999px');
$thumbs.infiniteCarousel();
- $thumbsLi = $('li', $thumbs); // we need to reselect because infiniteCarousel inserts new empty li elements if necessary
+ // we need to reselect because infiniteCarousel inserts new empty li elements if necessary
+ $el = $(el);
+ $thumbsLi = $('.gallery-thumbs ul li', $el);
}
$thumbsLi.each(function(){
@@ -85,4 +89,58 @@ Drupal.galleryformatter.prepare = functi
else {
showFirstSlide();
}
+
+ /*
+ * Create a public interface to move to the next and previous images
+ */
+ // Shows the previous slide and scrolls to the previous page if necessary
+ $thumbs.bind('showPrev', function (event) {
+ var currentScroll = $wrapper.get(0).scrollLeft;
+ var $prevThumbLi = $thumbsLi.filter('.active').prevAll().not('.empty, .cloned').filter(':first');
+ // if no results we are on the first element
+ if(!$prevThumbLi.size()) {
+ // select the last one
+ $prevThumbLi = $thumbsLi.not('.empty, .cloned').filter(':last');
+ }
+ var $slideToClick = $('a', $prevThumbLi);
+ var $prevIsVisible = (($prevThumbLi.get(0).offsetLeft >= currentScroll) && ($prevThumbLi.get(0).offsetLeft <= (visibleWidth + currentScroll)));
+ if($prevIsVisible) {
+ $slideToClick.trigger('click');
+ }
+ else {
+ $thumbs.trigger('prev');
+ $slideToClick.trigger('click');
+ }
+ });
+ // Shows the next slide and scrolls to the next page if necessary
+ $thumbs.bind('showNext', function (event) {
+ var currentScroll = $wrapper.get(0).scrollLeft;
+ var $nextThumbLi = $thumbsLi.filter('.active').nextAll().not('.empty, .cloned').filter(':first');
+ // if no results we are on the last element
+ if(!$nextThumbLi.size()) {
+ // select the first one
+ $nextThumbLi = $thumbsLi.not('.empty, .cloned').filter(':first');
+ }
+ var $slideToClick = $('a', $nextThumbLi);
+ var $nextIsVisible = (($nextThumbLi.get(0).offsetLeft >= currentScroll) && ($nextThumbLi.get(0).offsetLeft <= (visibleWidth + currentScroll)));
+ if($nextIsVisible) {
+ var $slideToClick = $('a', $nextThumbLi);
+ $('a', $nextThumbLi).trigger('click');
+ }
+ else {
+ $thumbs.trigger('next');
+ $slideToClick.trigger('click');
+ }
+ });
+
+ // Setup buttons for next/prev slide
+ $slideButtons = ('<>');
+ $('.gallery-slides', $el).append($slideButtons);
+ // Trigger the appropiate events on click
+ $('a.prev-slide', $el).click(function(){
+ $thumbs.trigger('showPrev');
+ });
+ $('a.next-slide', $el).click(function(){
+ $thumbs.trigger('showNext');
+ });
};
Index: theme/infiniteCarousel.js
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/galleryformatter/theme/infiniteCarousel.js,v
retrieving revision 1.1.2.1
diff -u -p -r1.1.2.1 infiniteCarousel.js
--- theme/infiniteCarousel.js 23 May 2010 11:15:58 -0000 1.1.2.1
+++ theme/infiniteCarousel.js 28 Sep 2010 11:07:25 -0000
@@ -78,5 +78,13 @@ $.fn.infiniteCarousel = function () {
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
+
+ // custom events to trigger next and prev pages
+ $(this).bind('next', function () {
+ gotoPage(currentPage + 1);
+ });
+ $(this).bind('prev', function () {
+ gotoPage(currentPage - 1);
+ })
});
};