Как сделать "зум в фейсбуке" - PullRequest
Новая
       17

Как сделать "зум в фейсбуке"

2 голосов
/ 10 марта 2011

Я создаю веб-сайт, и мне нравится функциональность этого вызова Google Chrome: Facebook Photo Zoom @ https://chrome.google.com/extensions/detail/elioihkkcdgakfbahdoddophfngopipi

Я думаю, что основная идея, стоящая за расширением, заключается в том, что когда вы наводите курсор на миниатюру, она захватываетисходный файл изображения и отображает его в полном объеме.Если изображение слишком большое, то оно будет располагаться по углам или на верхней и нижней полосах окна.Если он не слишком большой, он будет плавать рядом с позицией мыши.

Логика, стоящая за ним, я понимаю, но на самом деле кодирование кажется немного пугающим.Я предполагаю, что единственные части этого я не понимаю, как вы кодируете позиции развернутых изображений и заставляете их сжиматься / расширяться, когда вы перемещаете мышь влево / вправо.Спасибо

Ответы [ 4 ]

0 голосов
/ 17 сентября 2011

См. Kabbar Image Zoomer на http://www.ideabonus.com/Kabbar/index.html

0 голосов
/ 10 марта 2011

Проверьте это изображение предварительного просмотра подсказка, которая похожа на то, что делает это расширение Chrome, но вы должны предоставить ей URL-адрес миниатюры и полноразмерного изображения. Вот оригинальное сообщение в блоге .

Я изменил скрипт, чтобы настроить размер изображения, чтобы он соответствовал расстоянию между курсором и правым краем браузера. Это не идеально, но это работает. Вот демоверсия . 

/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){
    /* CONFIG */

        xOffset = 10;
        yOffset = 20;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $('a.preview').hover(function(e){
        this.t = this.title;
        this.title = '';
        var p, c = (this.t != '') ? '<br/>' + this.t : '';
        $('body').append('<p id="preview"><img src="' + this.href + '" alt="Image preview" />' + c + '</p>');

        // load image and get size
        p = $('#preview');
        p
            .fadeIn('fast')
            .find('img').load(function(){
                // get image dimensions after it has been loaded
                p.data('widths', [ $(window).width(), p.find('img').width() ]);
                // set image to 100% to fit in preview window
                $(this).width('100%');
                position(e);
            });
    },
    function(){
        this.title = this.t;
        $('#preview').remove();
    });

    $('a.preview').mousemove(function(e){
        position(e);
    });

    var position = function(e){
        var w, prevw = $('#preview'),
            w = $.data( prevw[0], 'widths' );
        if ( w ) {
            prevw
                .css('top', e.pageY + yOffset)
                .css('left', e.pageX + xOffset)
                .css('max-width', (e.pageX + prevw.outerWidth() > w[0]) ?  w[0] - e.pageX - xOffset : w[1] || 'auto' );
        }
    };

};

// starting the script on page load
$(document).ready(function(){
    imagePreview();
});
0 голосов
/ 10 марта 2011

на при наведении курсора вы создаете большое изображение с помощью 

css({position: 'absolute', left: e.pageX, top: e.pageY})

на mousemove вы обновляете левый и верхний таким же образом.

проверьте также:

0 голосов
/ 10 марта 2011

13 zoom jquery plugins здесь Выберите лучшее для ваших нужд:)

...