弹不出图片来~只能弹出文本和简单的空格等反正都是文本类的,不会弹出图片~
为巴林左旗等地区用户提供了全套网页设计制作服务,及巴林左旗网站建设行业解决方案。主营业务为网站设计、成都做网站、巴林左旗网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
$("ID").click(function(){
$("弹出层ID").show();
})
弹出层:
div id="tachu"
embed src=";resourceId=0_04_05_99/v.swf" /
/div
//开始弹出层要隐藏,要弹出必须绝对定位设置css的z-index
点击弹出层的切换下一张按钮时,把弹窗的这张图片的src改成页面中下一张图片的src,点上一张也是,换上一张图片的src,这样通过改src就可以实现,或者是用这个插件,
1、首先你要先准备好small.jpg、big.jpg小图和大图;
2、然后加载jquery文件;
3、开始写效果代码。
效果代码如下:
------------------html代码------------------------
pimg class='small_img' src='small.jpg' //p
p图片实际尺寸大小:span id="small_size"/span/p
div id='big_div' style="display:none;"!-- 弹出层 --
p id="close"X/p
pimg class="big_img" src='big.jpg' //p
p图片实际尺寸大小:span id="big_size"/span/p
/div
Jquery代码:
script src="jquery文件路径"/script
script
$(document).ready(function(){
var small = $('.small_img'); //小图
var big_div = $('#big_div'); //大图弹出层
var small_size = $('#small_size'); //显示小图实际尺寸区域
var big_size = $('#big_size'); //显示大图实际尺寸区域
var smallWidth = small.width(); //小图宽度
var smallHeight = small.height(); //小图高度
var bigWidth = $('.big_img').width(); //大图宽度
var bigHeight = $('.big_img').height(); //大图高度
var small_str = smallWidth+' X '+smallHeight+' 像素';
var big_str = bigWidth+' X '+bigHeight+' 像素';
small_size.text(small_str); //显示小图片实际尺寸
small.click(function(){ //点击显示大图弹出层
big_div.show();
big_div.css({ //这里半透明样式我就不写了
'position' : 'fixed',
'left' : '0',
'top' : '0',
'background' : '#eee'
});
big_size.text(big_str);
});
$('#close').click(function(){
big_div.hide();
});
});
/script
因为你没有为第二个图片设置 src属性吧~~
或者
$("#bigimg_show").iviewer('loadImage', "第二个图片");
你说的是后面整个半透明的背景吧,这个无法控制,这部分是整个容器的背景,容器是绝对定位,如果修改了容器,那么图片就无法定位了,折中的办法就是取消容器背景色,给图片添加阴影,达到期望的效果。
.viewer-container{background-color: transparent;}
.viewer-canvasimg {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5);
否则只能修改插件源代码