放大缩小多张照片
zoom in zoom out to multiple photos
我想让照片缩放当我点击原始照片。
我已经使用了下面的代码:
我可以当我点击照片,然后缩放图像出现。
但是由于我的程序要求,我的网页上有多张照片。
所以当我点击第一张照片时,这张照片就会放大。
然后我需要再次点击这张照片,使这张照片变为正常。
这是我的程序代码流
假设用户忘记点击当前放大照片,使其再次变为正常大小。
假设它还是放大的。
然后用户点击另一张照片进行缩放。
此时,用户想要放大的照片没有被放大。
因为第一张照片还是放大的
这是我的问题。
1)当用户点击另一张照片进行缩放时,我怎么知道其中一张照片仍然是放大的?
2)如果jquery代码可以知道这种情况,请告诉我。
3)如果jquery可以知道这种情况,我如何删除当前放大的照片,用户忘记点击,以恢复正常大小。
4)我应该添加什么代码到我当前的jquery代码,请告诉我。
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.quickZoom.1.0.js"></script>
<script tyle="text/javascript">
$(document).ready(function() {
$('.OrignialImage').quickZoom({
zoom: 4,
speedIn: 500,
speedOut: 200,
easeIn:'easeOutBack',
titleInSpeed: 200
});
});
</script>
..................
.OrignialImage{width:150px; height:150px;}
.HtmlTableHeight{width: 160px; height: 160px;}
.quickZoom-hoverShadow {-moz-box-shadow:0 0 10px 0 #000;
-webkit-box-shadow:0 0 10px 0 #000;
box-shadow:0 0 10px 0 #000;}
..................
<table border="1" height="1000px" cellpadding="0" cellspacing="0">
<tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr>
<tr class="HtmlTableHeight" ><td><img src="images/C003_2.jpg" alt="title" class="OrignialImage" /></td></tr>
<tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr>
<tr class="HtmlTableHeight" ><td><img src="images/C003_4.jpg" alt="title" class="OrignialImage" /></td></tr>
<tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr>
<tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr>
</table>
..................
/*
* quickZoom 0.1.0 - JavaScript Image viewer
* Copyright (c) 2011 Louis Sawtell, contact@louis-sawtell.com, http://louis-sawtell.com
*
* I make modify his coding as my requirement.
*/
(function($) {
$.fn.quickZoom = function(options) {
var thumbX, thumbY;
var IsFinishedFirstClick = false;
// define default values
var defaults = {
shadow: true
};
// merge the defaults with given parameters
var e = $.extend(defaults, options);
// set $(this) to var to speed up code
var myThis = $(this);
var OriginalPictureTop = 0;
var OriginalPictureLeft = 0;
myThis.click(function(){
if(IsFinishedFirstClick != true)
{
// this code for first time click to image.
// assign vars to avoid overusing $(this)
var target = $(this);
OriginalPictureTop = target.offset().top;
OriginalPictureLeft = target.offset().left;
// get thumbnail dimensions
thumbX = target.width();
thumbY = target.height();
// get zoomed dimensions
var zoomX = thumbX*e.zoom;
var zoomY = thumbY*e.zoom;
// If the thumbnail doesn't represent the image aspect ratio..
if (e.sqThumb) {
// create img var to gather full size dimensions
var img = new Image();
img.src = target.attr("src");
// get aspect ratio
var ratio = img.height/img.width;
// apply ratio
zoomY = zoomY*ratio;
}
// this is the offset for the title
var marginX = (zoomX-thumbX)/2;
var marginY = (zoomY-thumbY)/2;
// add z-index and optional shadow
if (e.shadow) {target.addClass('quickZoom-hoverShadow');}
target.css({'z-index':10});
target.css({
position: "fixed",
top:10+"px",
left:200+"px",
})
target.stop(true, false).animate({
width:zoomX+'px',
height:zoomY+'px',
}, {
// This place for even which fire after animate.
});
IsFinishedFirstClick = true;
}
else
{
//this code for second click.
var target = $(this);
target.css({
position:"absolute",
top:OriginalPictureTop+"px",
left:OriginalPictureLeft+"px",
})
target.stop(true, false).animate({
width: thumbX+'px',
height: thumbY+'px',
}, {
duration: e.speedOut,
easing: e.easeOut,
complete: function() {
target.css({'z-index':1});
}
});
target.removeClass('quickZoom-hoverShadow');
target.css({'z-index':2});
IsFinishedFirstClick = false;
OriginalPictureTop = 0;
OriginalPictureLeft = 0;
}
});
}
})(jQuery);
声明一个全局变量,该变量在运行缩放函数时设置,然后在用户手动减小缩放时清除。这样,当用户点击缩放按钮时,你就可以检查用户是否没有手动缩小。
很抱歉,因为我没有机会检查这个(目前在我的午餐),但希望你能得到我所说的要点。
var zoomState; // Outside of the function to declare globally.
$(document).ready(function() {
$('.OrignialImage').click(function() {
if (zoomState != null) {
// Auto decrease zoom.
} else {
$('.OriginalImage').quickZoom({
zoom: 4,
speedIn: 500,
speedOut: 200,
easeIn:'easeOutBack',
titleInSpeed: 200
});
zoomState = $(this); // Set zoomState.
} // end if
});
});
相关文章:
- 灯箱只显示第一张照片
- 照片在模态中滑动多张照片
- 如何通过javascript api在Facebook上发布多张照片
- Jquery 动画第二张照片未显示
- 制作The Galleria Facebook相册的第一张照片 The Actual Facebook Album的封面
- JavaScript幻灯片卡在第一张照片上
- 将多张照片发布到一个帖子中
- 在画布标签里放一张照片
- 上传一张照片到朋友的涂鸦墙上
- 两张照片放在一起.显示一个悬停.可能与css或只有javascript
- 放大缩小多张照片
- Facebook Graph jQuery AJAX调用,代表用户发布一张照片
- 使用PhoneGap从设备图片库中选择多张照片
- 从Flickr公共帐户获取最新的12张照片
- 当我点击一张照片时,如何更改页面上的所有照片?
- 使用html5的网络摄像头拍摄一张照片
- 通过JS在svg中添加图像命名空间仍然没有;不要给我看那张照片
- Javascript:在网络浏览器中显示照片之前,是否可以捕获多张照片
- 我如何让用户上传多张照片,如脸书
- 将两张照片合二为一