0

このクールな画像スライダーhttp://www.jscraft.net/demo/plugins/filters/を使用していますが、ご覧のとおり、このスライダーを大きな画像に使用すると問題が発生する可能性があります...基本的にやりたいこと(スライダーに表示されるように) 各小さい画像の周りにアンカー タグを追加し、画像をクリックすると、その画像の大きいサイズが飛び出します (または、ページから移動せずに任意の種類のスムーズな表示)。 .それを行う方法についてのアイデアはありますか? おそらくjqueryまたはjavascriptで？そのために別のスライダーも使用したくないことに注意してください。スクリプトを混同するのは好きではありません...

ありがとうございました！

4

2 に答える 2

3

わかりました、私はこれを手に入れました..これがあなたのコードです..

そのJavaScript：

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    $('img.zoomable').css({ cursor: 'pointer' }).live('click', function () {
        var img = $('img.bigImg');
        var bigImg = $('<img />').css({
            'max-width': '100%',
            'max-height': '100%',
            'display': 'inline'
            //'margin': '-25% 0 0 -25%'
        });
        bigImg.attr({
            src: img.attr('src'),
            alt: img.attr('alt'),
            title: img.attr('title')
        });
        var over = $('<div />').text(' ').css({
            'height': '100%',
            'width': '100%',
            'background': 'rgba(0,0,0,.82)',
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'opacity': 0.0,
            'cursor': 'pointer',
            'z-index': 9999,
            'text-align': 'center'
        }).append(bigImg).bind('click', function () {
            $(this).fadeOut(300, function () {
                $(this).remove();
            });
        }).insertAfter(this).animate({
            'opacity': 1
        }, 300);
    });


</script>

そしてHTML：

<img class="zoomable" src="smallImage.jpg" height="100" width="100"/>
<img class="bigImg" style="visibility:hidden" src="bigImage.jpg"/>

すべての画像に 2 つのリンクを追加する必要があります。

于 2012-08-12T18:11:38.527 に答える
2

Zoomableというプラグインです。画像に「zoomable」というクラスを与え、このスクリプトを追加します

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    $('img.zoomable').css({ cursor: 'pointer' }).live('click', function () {
        var img = $(this);
        var bigImg = $('<img />').css({
            'max-width': '100%',
            'max-height': '100%',
            'display': 'inline'
            //'margin': '-25% 0 0 -25%'
        });
        bigImg.attr({
            src: img.attr('src'),
            alt: img.attr('alt'),
            title: img.attr('title')
        });
        var over = $('<div />').text(' ').css({
            'height': '100%',
            'width': '100%',
            'background': 'rgba(0,0,0,.82)',
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'opacity': 0.0,
            'cursor': 'pointer',
            'z-index': 9999,
            'text-align': 'center'
        }).append(bigImg).bind('click', function () {
            $(this).fadeOut(300, function () {
                $(this).remove();
            });
        }).insertAfter(this).animate({
            'opacity': 1
        }, 300);
    });


</script>
于 2012-08-12T15:22:55.893 に答える