Permalink
Browse files

Added experimental zooming, panning and rotation.

  • Loading branch information...
Code Computerlove
Code Computerlove committed Apr 19, 2011
1 parent b408ee2 commit 5dab3d50a43fefa2fbbbb292185a33b43ce3c067
Showing with 591 additions and 64 deletions.
  1. +9 −2 src/examples/debug.html
  2. +47 −16 src/photoswipe.js
  3. +122 −3 src/slider-class.js
  4. +22 −3 src/slider-item-class.js
  5. +29 −1 src/util-dom-jQuery.js
  6. +28 −0 src/util-dom.js
  7. +161 −39 src/viewport-class.js
  8. +173 −0 src/zoom-pan-rotate-item-class.js
View
@@ -17,6 +17,7 @@
<script type="text/javascript" src="../document-overlay-class.js"></script>
<script type="text/javascript" src="../viewport-class.js"></script>
<script type="text/javascript" src="../slider-item-class.js"></script>
+ <script type="text/javascript" src="../zoom-pan-rotate-item-class.js"></script>
<script type="text/javascript" src="../slider-class.js"></script>
<script type="text/javascript" src="../caption-class.js"></script>
<script type="text/javascript" src="../toolbar-class.js"></script>
@@ -100,7 +101,8 @@
console.log('onCaptionAndToolbarHide');
});
-
+
+
var thumbEls = Code.photoSwipe('a', '#Gallery', {
getImageSource: Code.PhotoSwipe.GetImageSource,
@@ -109,18 +111,23 @@
fadeOutSpeed: 500,
slideSpeed: 250,
swipeThreshold: 50,
+ swipeTimeThreshold: 250,
loop: true,
slideshowDelay: 3000,
imageScaleMethod: 'fit', // Either "fit" or "zoom"
preventHide: false,
zIndex: 1000,
+ /* Experimental! */
+ allowUserZoom: true,
+ allowRotationOnUserZoom: true,
+
captionAndToolbarHide: false,
captionAndToolbarHideOnSwipe: true,
captionAndToolbarFlipPosition: false,
captionAndToolbarAutoHideDelay: 5000,
captionAndToolbarOpacity: 0.8,
- captionAndToolbarShowEmptyCaptions: true
+ captionAndToolbarShowEmptyCaptions: true
});
View
@@ -52,12 +52,17 @@
fadeOutSpeed: 500,
slideSpeed: 250,
swipeThreshold: 50,
+ swipeTimeThreshold: 250,
loop: true,
slideshowDelay: 3000,
imageScaleMethod: 'fit', // Either "fit" or "zoom"
preventHide: false,
zIndex: 1000,
+ /* Experimental! */
+ allowUserZoom: true,
+ allowRotationOnUserZoom: true,
+
captionAndToolbarHide: false,
captionAndToolbarHideOnSwipe: true,
captionAndToolbarFlipPosition: false,
@@ -200,6 +205,7 @@
fadeInSpeed: this.settings.fadeInSpeed,
fadeOutSpeed: this.settings.fadeOutSpeed,
swipeThreshold: this.settings.swipeThreshold,
+ swipeTimeThreshold: this.settings.swipeTimeThreshold,
zIndex: this.settings.zIndex+1
});
@@ -442,33 +448,63 @@
/*
- * Function: onViewportClick
+ * Function: onViewportTouch
*/
onViewportTouch: function(e){
this.stopSlideshow();
switch(e.action){
-
- case ViewportClass.Actions.swipeLeft:
- this.lastShowPrevTrigger = Code.PhotoSwipe.ShowPrevTriggers.swipe;
- this.showNext();
+
+ case ViewportClass.Actions.gestureStart:
+ if (this.settings.allowUserZoom && !this.isBusy){
+ this.fadeOutCaptionAndToolbar();
+ this.slider.zoomStart();
+ }
break;
- case ViewportClass.Actions.swipeRight:
- this.lastShowPrevTrigger = Code.PhotoSwipe.ShowPrevTriggers.swipe;
- this.showPrevious();
+ case ViewportClass.Actions.gestureChange:
+ if (this.settings.allowUserZoom && !this.isBusy){
+ this.slider.zoom(e.scale, (this.settings.allowRotationOnUserZoom) ? e.rotation : 0);
+ }
break;
-
- default:
- // Click event
+
+ case ViewportClass.Actions.gestureEnd:
+ if (this.settings.allowUserZoom && !this.isBusy){
+ this.slider.zoomEnd(e.scale, (this.settings.allowRotationOnUserZoom) ? e.rotation : 0);
+ }
+ break;
+
+ case ViewportClass.Actions.touchStart:
+ if (this.settings.allowUserZoom && !this.isBusy){
+ this.slider.panStart(e.point);
+ }
+ break;
+
+ case ViewportClass.Actions.touchMove:
+ if (this.settings.allowUserZoom && !this.isBusy){
+ this.slider.pan(e.point);
+ }
+ break;
+
+ case ViewportClass.Actions.click:
if (!this.settings.hideToolbar){
this.toggleCaptionAndToolbar();
}
else{
this.hide();
}
break;
+
+ case ViewportClass.Actions.swipeLeft:
+ this.lastShowPrevTrigger = Code.PhotoSwipe.ShowPrevTriggers.swipe;
+ this.showNext();
+ break;
+
+ case ViewportClass.Actions.swipeRight:
+ this.lastShowPrevTrigger = Code.PhotoSwipe.ShowPrevTriggers.swipe;
+ this.showPrevious();
+ break;
}
@@ -698,11 +734,6 @@
}
-
- //if (this.captionAndToolbar.isFading){
- // return;
- //}
-
if (this.captionAndToolbar.isHidden){
this.captionAndToolbar.fadeIn();
View
@@ -3,7 +3,7 @@
// Licensed under the MIT license
// version: %%version%%
-(function(Util, SliderItemClass){
+(function(Util, SliderItemClass, ZoomPanRotateItemClass){
/*
* Class: Code.PhotoSwipe.SliderClass
@@ -14,10 +14,14 @@
parentElWidth: null,
parentElHeight: null,
items: null,
+ scaleEl: null,
+
+ lastScaleValue: null,
previousItem: null,
currentItem: null,
nextItem: null,
+ zoomPanRotateItem: null,
hasBounced: null,
lastShowAction: null,
@@ -120,6 +124,8 @@
*/
resetPosition: function(){
+ this.removeZoomPanRotate();
+
this.parentElWidth = Util.DOM.width(this.parentEl);
this.parentElHeight = Util.DOM.height(this.parentEl);
@@ -153,6 +159,105 @@
},
+
+ /*
+ * Function: zoomStart
+ */
+ zoomStart: function(){
+
+ if (Util.isNothing(this.zoomPanRotateItem)){
+
+ this.zoomPanRotateItem = new ZoomPanRotateItemClass({}, this.currentItem.el, this.el);
+
+ Util.DOM.hide(this.currentItem.imageContainerEl);
+
+ }
+
+ },
+
+
+
+ /*
+ * Function: zoom
+ */
+ zoom: function(scaleValue, rotationValue){
+
+ if (Util.isNothing(this.zoomPanRotateItem)){
+ return;
+ }
+
+ this.zoomPanRotateItem.zoom(scaleValue, rotationValue);
+
+ },
+
+
+
+ /*
+ * Function: zoomEnd
+ */
+ zoomEnd: function(scaleValue, rotationValue){
+
+ if (Util.isNothing(this.zoomPanRotateItem)){
+ return;
+ }
+
+ // Store last scale
+ this.zoomPanRotateItem.setStartingScale(scaleValue);
+ this.zoomPanRotateItem.setStatingRotation(rotationValue);
+
+ },
+
+
+
+ /*
+ * Function: panStart
+ */
+ panStart: function(point){
+
+ if (Util.isNothing(this.zoomPanRotateItem)){
+ return;
+ }
+
+ this.zoomPanRotateItem.panStart(point);
+
+ },
+
+
+
+ /*
+ * Function: pan
+ */
+ pan: function(point){
+
+ if (Util.isNothing(this.zoomPanRotateItem)){
+ return;
+ }
+
+ this.zoomPanRotateItem.pan(point);
+
+ },
+
+
+
+ /*
+ * Function: removeZoomPanRotate
+ */
+ removeZoomPanRotate: function(){
+
+ if (Util.isNothing(this.zoomPanRotateItem)){
+ return;
+ }
+
+ this.zoomPanRotateItem.removeFromDOM();
+ this.zoomPanRotateItem = null;
+
+ // This needs reviewing. Not sure why but leaving this
+ // causes a major delay in the swipe event triggering (iOS)
+ Util.DOM.show(this.currentItem.el);
+
+ },
+
+
/*
* Function: setCurrentFullSizeImage
*/
@@ -181,6 +286,8 @@
*/
showNext: function(){
+ this.removeZoomPanRotate();
+
this.lastShowAction = Code.PhotoSwipe.SliderClass.ShowActionTypes.next;
this.hasBounced = false;
@@ -202,6 +309,8 @@
*/
showPrevious: function(){
+ this.removeZoomPanRotate();
+
this.lastShowAction = Code.PhotoSwipe.SliderClass.ShowActionTypes.previous;
this.hasBounced = false;
@@ -270,6 +379,11 @@
*/
onShowNextEnd: function(){
+ Util.DOM.show(this.currentItem.imageContainerEl);
+
+ // Ensure currentItem is visible, may not be if zooming / panning
+ Util.DOM.show(this.currentItem.el);
+
// Swap the next and current around, then re-center the slider
Util.swapArrayElements(this.items, 1, 2);
@@ -291,7 +405,12 @@
* Function: onShowPreviousEnd
*/
onShowPreviousEnd: function(){
-
+
+ Util.DOM.show(this.currentItem.imageContainerEl);
+
+ // Ensure currentItem is visible, may not be if zooming / panning
+ Util.DOM.show(this.currentItem.el);
+
// Swap the previous and current around, then re-center the slider
Util.swapArrayElements(this.items, 1, 0);
@@ -378,4 +497,4 @@
};
-})(Code.PhotoSwipe.Util, Code.PhotoSwipe.SliderItemClass);
+})(Code.PhotoSwipe.Util, Code.PhotoSwipe.SliderItemClass, Code.PhotoSwipe.ZoomPanRotateItemClass);
Oops, something went wrong.

0 comments on commit 5dab3d5

Please sign in to comment.