javascript - 画像 Javascript ポップアップ

Question

画像ポップアップの解決策を探しています。

マウスクリックで拡大される通常の画像。アイデアは、Highslide ポップアップのようなものにする必要があります。CSS を使用してイベントを割り当てたいと思います。たとえば、img タグに特定のクラスがある場合、その画像を拡大する必要があります。

誰かが良い解決策を持っているかもしれません。

Answer 1

ファンシーボックスを試してください。彼らはサイトとコード例にデモを持っているので、特定のクラスを持つ要素でのみそれをトリガーする方法を理解できるはずです.

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

Answer 2

try this 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;
}​