diff --git a/jquery-photo-gallery/icon/rotate_left.png b/jquery-photo-gallery/icon/rotate_left.png
new file mode 100755
index 0000000..020ea8b
Binary files /dev/null and b/jquery-photo-gallery/icon/rotate_left.png differ
diff --git a/jquery-photo-gallery/icon/rotate.png b/jquery-photo-gallery/icon/rotate_right.png
old mode 100644
new mode 100755
similarity index 100%
rename from jquery-photo-gallery/icon/rotate.png
rename to jquery-photo-gallery/icon/rotate_right.png
diff --git a/jquery-photo-gallery/jquery.photo.gallery.js b/jquery-photo-gallery/jquery.photo.gallery.js
index cbeaac4..d799ebc 100644
--- a/jquery-photo-gallery/jquery.photo.gallery.js
+++ b/jquery-photo-gallery/jquery.photo.gallery.js
@@ -34,7 +34,8 @@ $.fn.extend({
'' +
'' +
'' +
- '' +
+ '' +
+ '' +
'' +
'' +
'',
@@ -57,7 +58,8 @@ $.fn.extend({
$fullscreen = $(this).find(".oper_fullscreen"),
$bigger = $(this).find(".oper_bigger"),
$smaller = $(this).find(".oper_smaller"),
- $rotate = $(this).find(".oper_rotate"),
+ $rotate_left = $(this).find(".oper_rotate_left"),
+ $rotate_right = $(this).find(".oper_rotate_right"),
$download = $(this).find(".oper_download"),
$prev = $(this).find(".prev"),
$next = $(this).find(".next"),
@@ -268,26 +270,57 @@ $.fn.extend({
smallerImage();
});
- //旋转
- $rotate.on("click", function(){
-
- var rotateClass = $image.attr("class").match(/(rotate)(\d*)/);
+ //左旋转
+ $rotate_left.on("click", function(){
+
+ var rotateClass = $image.attr("class").match(/(rotate)(-?)(\d*)/);
+ // 是否已经进行了旋转，是则计算周期，继续旋转
+ if(rotateClass){
+ // 如果不存在-号，则为右旋转转左旋转，要顺接右旋转状态
+ if (!rotateClass[2]) {
+ rotateClass[3] = parseInt(rotateClass[3]) + 180
+ }
+ var nextDeg = (rotateClass[3] * 1 + 90) % 360;
+ $image.removeClass(rotateClass[0]).addClass("rotate-" + nextDeg);
+ $thumbImg.removeClass(rotateClass[0]).addClass("rotate-" + nextDeg);
+ resizeImage(nextDeg);
+ resizeThumbImg(nextDeg);
+ isVertical = nextDeg == 90 || nextDeg == 270;
+ } else{ // 否则添加一个初始旋转的rotate
+ $image.addClass("rotate-90");
+ $thumbImg.addClass("rotate-90");
+ resizeImage("90");
+ resizeThumbImg("90");
+ isVertical = true;
+ }
+ });
+
+ //右旋转
+ $rotate_right.on("click", function(){
+
+ var rotateClass = $image.attr("class").match(/(rotate)(-?)(\d*)/);
+ if(rotateClass){
+ // 如果存在-号，则为左旋转转右旋转，要顺接左旋转状态
+ if (rotateClass[2]) {
+ rotateClass[3] -= 180
+ }
+ var nextDeg = (rotateClass[3] * 1 + 90) % 360;
+ $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
+ $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
+ // nextDeg取绝对值，防止左旋转然后右旋转顺接时， nextDeg为负数的情况
+ nextDeg = Math.abs(nextDeg)
+ resizeImage(nextDeg);
+ resizeThumbImg(nextDeg);
+ isVertical = nextDeg == 90 || nextDeg == 270;
+ } else{
+ $image.addClass("rotate90");
+ $thumbImg.addClass("rotate90");
+ resizeImage("90");
+ resizeThumbImg("90");
+ isVertical = true;
+ }
+ });
- if(rotateClass){
- var nextDeg = (rotateClass[2] * 1 + 90) % 360;
- $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
- $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
- resizeImage(nextDeg);
- resizeThumbImg(nextDeg);
- isVertical = nextDeg == 90 || nextDeg == 270;
- } else{
- $image.addClass("rotate90");
- $thumbImg.addClass("rotate90");
- resizeImage("90");
- resizeThumbImg("90");
- isVertical = true;
- }
- });
//下载
$download.on("click", function(){
diff --git a/jquery-photo-gallery/photoGallery.css b/jquery-photo-gallery/photoGallery.css
index faddc40..9d190bd 100644
--- a/jquery-photo-gallery/photoGallery.css
+++ b/jquery-photo-gallery/photoGallery.css
@@ -78,10 +78,15 @@ i{
height: 19px;
background-image: url('icon/smaller.png');
}
-.icon_tool-rotate{
+.icon_tool-rotate_left{
width: 17px;
height: 20px;
- background-image: url('icon/rotate.png');
+ background-image: url('icon/rotate_left.png');
+}
+.icon_tool-rotate_right{
+ width: 17px;
+ height: 20px;
+ background-image: url('icon/rotate_right.png');
}
.icon_tool-download{
width: 16px;
@@ -98,24 +103,52 @@ i{
height: 38px;
background-image: url('icon/next.png');
}
-/* 效果 */
-.rotate0{
- transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
+/* 右旋转 */
+.rotate0, .rotate-0{
+ transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
}
.rotate90{
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
}
.rotate180{
- transform: rotate(180deg);
- -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
}
.rotate270{
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ -webkit-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ -moz-transform: rotate(270deg);
}
+/* 左旋转 */
+.rotate-90{
+ transform: rotate(-90deg);
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+}
+.rotate-180{
+ transform: rotate(-180deg);
+ -webkit-transform: rotate(-180deg);
+ -ms-transform: rotate(-180deg);
+ -moz-transform: rotate(-180deg);
+}
+.rotate-270{
+ transform: rotate(-270deg);
+ -webkit-transform: rotate(-270deg);
+ -ms-transform: rotate(-270deg);
+ -moz-transform: rotate(-270deg);
+}
+
.gallery{
width: 100%;
height: 100%;