Jquery画廊式的fancybox
Jquery gallery like fancybox
我正在构建自己的图像库,就像fancybox
一样。
请参阅:http://snabbdesign.com/stack/stack.html
我在淡出和进入#gallery
时遇到了一些问题。有时背景(#gallery
)会在图像之前淡出。
此外,有时.gallery_image
不会像它应该的那样居中。
请帮忙!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{
margin:0;
}
#gallery{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
background:#000;
opacity:0.95;
display:none;
}
.gallery_image{
width:auto;
height:auto;
position:fixed;
left:0;
top:0;
}
#gallery_left,#gallery_right{
position:fixed;
height:100px;
width:100px;
top:50%;
margin-top:-50px;
background:#f00;
cursor:pointer;
display:none;
}
#gallery_left{
left:0;
}
#gallery_right{
right:0;
}
</style>
</head>
<body>
<div id="ji">
<img src="1.png">
<img src="2.png">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function () {
var $gallery_loaded = false,
height_of_window = $(window).height(),
width_of_window = $(window).width(),
max_height = height_of_window - 100,
max_width = width_of_window - 100,
$ji_img = $('#ji img');
$ji_img.css('cursor', 'pointer');
$ji_img.click(function () {
var position_of_image = $(this).index();
if (!$gallery_loaded) {
$gallery_loaded = true;
$('body').append('<div id="gallery"></div>');
$ji_img.each(function () {
var big_src = $(this).attr("src").match(/[^'.]+/) + "-big.png";
$('body').append('<img style="display:none" class="gallery_image" src="' + big_src + '" />');
}); // end each
$('.gallery_image').each(function () {
var $this = $(this);
height_of_gallery_image = $this.height();
width_of_gallery_image = $this.width();
if (width_of_gallery_image >= max_width) {
$this.css({
'max-width': max_width + 'px'
})
}
if (height_of_gallery_image >= max_height) {
$this.css({
'max-height': max_height + 'px'
})
}
margin_top = (height_of_window - $this.height()) / 2;
margin_left = (width_of_window - $this.width()) / 2;
$this.css({
'margin-top': margin_top + 'px',
'margin-left': margin_left + 'px'
})
}); // end each
$('body').append('<div id="gallery_left"></div><div id="gallery_right"></div>');
} //end if gallery_loaded
$('#gallery').fadeIn(500);
$('#gallery_left,#gallery_right').delay(1000).fadeIn(500);
$('.gallery_image').eq(position_of_image).delay(500).fadeIn(500)
$('#gallery').click(function () {
$('.gallery_image').fadeOut(500)
$('#gallery_left,#gallery_right').fadeOut(500);
$('#gallery').delay(500).fadeOut(500);
});
}); // end click function
}); // end document redy
</script>
</body>
</html>
1)这对我来说不会发生,但如果发生了,我建议你看看.requeue()
2) 使用.outerHeight()和.outerWidth()代替.height()与.width()
相关文章:
- jquery fancybox+angularJS:fancybox按钮动作问题
- jQuery fancybox multiple album
- Fancybox within Jquery Cycle Slide
- 阻止jquery fancybox在单击链接时关闭
- 如何覆盖beforeShow块中的.href?(jquery/fancybox)
- 用于Soundcloud曲目的jQuery fancyBox
- Jquery Fancybox 如何添加额外的导航按钮
- jQuery FancyBox图片库中的推拉门效果
- 使用带有jquery cookie的fancybox
- Jquery Fancybox 可拖动的滚动条问题
- Jquery Fancybox 自动缩放无法按预期工作
- jQuery fancybox 在 IE7 中不起作用
- jquery Fancybox Parent被滚动到顶部
- Javascript/Jquery Callback for Fancybox 是 否 确认
- JQuery & Fancybox 单击图像以打开新页面/链接(更新现有代码)
- jQuery issue with fancybox
- Fancybox (jQuery) - 将信息从父级传递到 iframe,并将 iframe 传回父级
- fancybox/jQuery:为什么可以'我点击了一个与粉丝盒有关系的按钮后就放弃了
- 在fancybox Jquery问题在magento错误是:Jquery(..).fanybox不是一个函数
- Fancybox jQuery媒体助手-播放器卡住加载