图像Javascript弹出窗口

时间:2012-05-04 21:03:19

标签: javascript html css

我正在寻找图像弹出的解决方案。

鼠标点击时放大的常用图像。这个想法应该像Highslide pop-up。我想用CSS分配事件。例如,如果img标签具有应该放大图像的特定类。

也许有人有一个很好的解决方案。

2 个答案:

答案 0 :(得分:1)

试试fancybox。他们在网站上有演示和代码示例,因此您应该能够弄清楚如何仅在某个类的元素上触发它。

$('img.someClass').fancybox({/* ..whatever options you want.. */ });

答案 1 :(得分:1)

试试这个jsfiddle:http://jsfiddle.net/3Z8RZ/37/

HTML:

<button>bigger</button>
<img class="smaller" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg">

JS:

     $(document.body).on('click', 'button', function() {         
        $('img').toggleClass('bigger');       
    });​

CSS:

.smaller{
width:50px;
height:50px;
}
.bigger{
    width:250px;
    height:250px;
}​