Question

我想在Codyhouse的3D折叠面板jquery插件中进行一些修改。

我有一个包含链接的画廊，每个链接都将作为模式窗口打开，并从外部文件加载内容。

工作方式：：我在模态窗口内添加了一个链接，该链接应打开下一个图库项目。当用户单击模式窗口内的“下一个”链接时，应关闭当前模式，然后打开一个新窗口，其中包含加载的下一个图库项目的内容。

目前，该链接无效，只是关闭了当前的模式窗口。

这是jquery代码：

jQuery(document).ready(function($){
var gallery = $('.cd-gallery'),
    foldingPanel = $('.cd-folding-panel'),
    mainContent = $('.cd-main');
    openContent = $('.cd-fold-content');
/* open folding content */
gallery.on('click', 'a.ajax-link', function(event){
    event.preventDefault();
    openItemInfo($(this).attr('href'));
});

/* close folding content */
foldingPanel.on('click', '.cd-close-link', function(event){
    event.preventDefault();
    toggleContent('', false);
});
gallery.on('click', function(event){
    /* detect click on .cd-gallery::before when the .cd-folding-panel is open */
    if($(event.target).is('.cd-gallery') && $('.fold-is-open').length > 0 ) toggleContent('', false);
})

foldingPanel.on('click', '.cd-close-ajax', function(event){
    event.preventDefault();
    toggleContent('', false, function(){            
        openItemInfo($(this).attr('href'));
    });
});

function openItemInfo(url) {
    var mq = viewportSize();
    if( gallery.offset().top > $(window).scrollTop() && mq != 'mobile') {
        /* if content is visible above the .cd-gallery - scroll before opening the folding panel */
        $('body,html').animate({
            'scrollTop': gallery.offset().top
        }, 100, function(){ 
            toggleContent(url, true);
        }); 
    } else if( gallery.offset().top + gallery.height() < $(window).scrollTop() + $(window).height()  && mq != 'mobile' ) {
        /* if content is visible below the .cd-gallery - scroll before opening the folding panel */
        $('body,html').animate({
            'scrollTop': gallery.offset().top + gallery.height() - $(window).height()
        }, 100, function(){ 
            toggleContent(url, true);
        });
    } else {
        toggleContent(url, true);
    }
}

function toggleContent(url, bool) {
    if( bool ) {
        /* load and show new content */
        var foldingContent = foldingPanel.find('.cd-fold-content');
        foldingContent.load(url+' .cd-fold-content > *', function(event){
            setTimeout(function(){
                $('body').addClass('overflow-hidden');
                foldingPanel.addClass('is-open');
                mainContent.addClass('fold-is-open');
            }, 100);

        });
    } else {
        /* close the folding panel */
        var mq = viewportSize();
        foldingPanel.removeClass('is-open');
        mainContent.removeClass('fold-is-open');

        (mq == 'mobile' || $('.no-csstransitions').length > 0 ) 
            /* according to the mq, immediately remove the .overflow-hidden or wait for the end of the animation */
            ? $('body').removeClass('overflow-hidden')

            : mainContent.find('.cd-item').eq(0).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                $('body').removeClass('overflow-hidden');
                mainContent.find('.cd-item').eq(0).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
            });
    }

}

function viewportSize() {
    /* retrieve the content value of .cd-main::before to check the actua mq 
*/
    return window.getComputedStyle(document.querySelector('.cd-main'), 
'::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
}
});

这是一个结构：

<div class="cd-folding-panel">

   <div class="fold-left"></div> <!-- this is the left fold -->

   <div class="fold-right"></div> <!-- this is the right fold -->

   <div class="cd-fold-content long-scroll">
      <!-- content will be loaded using javascript -->        
   </div>

   <a class="cd-close cd-close-link" href="#0"></a>

  <a href="nextitem.html" class="next cd-close-ajax">Next Item</a>

</div> <!-- .cd-folding-panel -->

jQuery函数的顺序执行

0 个答案: