讓 Magnific Popup 的箭頭出現在圖片旁邊

edited 十月 2013 in Javascript
Magnific Popup 是一個 jquery lightbox plugin ,用起來還蠻舒服的 ;)

網址: http://dimsemenov.com/plugins/magnific-popup/

只是有個問題,它 Gallery 箭頭放在畫面的兩邊,不夠顯眼,所以想要讓箭頭出現在圖片兩側

我的作法是在 resize 事件去計算適當的位置,像這樣:
$j('a.lightboxPop').magnificPopup({
    preloader: true,
    items: boxImages,
    gallery: {
        enabled: true,
        tPrev: '上一張',
        tNext: '下一張'
    },
    type: 'image',
    callbacks: {
        open: function() {
            clearInterval(boxInterval);
        },
        resize: function() {
            setTimeout(function() {
                var winWidth = $j(window).width();
                var imgWidth = $j('img.mfp-img').width();
                var rightWidth = $j('.mfp-arrow-right').width();
                $j('.mfp-arrow-right').css('left', (winWidth / 2) + (imgWidth / 2) - rightWidth);
                $j('.mfp-arrow-left').css('left', (winWidth / 2) - (imgWidth / 2));
            }, 300);
        }
    }
});

只是有時候遇到網路比較慢,圖片還沒載入的話會出問題...

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=7615
Sign In or Register to comment.