Picasa 嵌入库 + 自定义 jQuery UI 滑块答案

【问题标题】：Picasa Embed Gallery + Custom jQuery UI sliderPicasa 嵌入库 + 自定义 jQuery UI 滑块
【发布时间】：2011-10-29 03:09:57
【问题描述】：

我正在尝试创建一个工具来滚动来自 Picasa 的 whem 动态项目。 Picasa 允许嵌套文件选项，这意味着当用户在文件系统中导航时会反复加载新项目。

我想在必要时为这个 div 创建一个自定义滚动条。我找到了我想做的工作版本，但无法让它适应我的情况。基本上我需要每次加载新内容或单击特定元素时检查滚动条的功能。

如果有人可以帮助我集成这个插件，我将非常感激。该插件有很好的文档记录，但我仍然是一个 jQuery 菜鸟，所以我运气不佳。

谢谢。

jQuery UI 滑块插件： http://www.simonbattersby.com/blog/vertical-scrollbar-using-jquery-ui-slider/

嵌入 Picasa 代码段：

jQuery(document).ready(function() {
    jQuery("#picasagallery").EmbedPicasaGallery('andreagerstmann',{
        loading_animation: 'css/loading.gif',
        size: '190',
        msg_loading_list :  'Just one moment please',
        msg_back :   'Back'
    });
});

进行中的复制： http://andreagerstmann.com/gallery.html

【问题讨论】：

标签： jquery jquery-ui scroll gallery picasa

【解决方案1】：

帕特里克

滑块的这种变体是否能满足您的需求：

http://www.simonbattersby.com/demos/vertical_scrollbar_demo_7_addcontent.htm

在此变体中，滑块代码被包装到 setSlider() 函数中 - 因此您只需在 Picasa 代码完成后调用此函数。

西蒙

【讨论】：

【解决方案2】：

我不久前使用：

在 ASP.NET 中无限滚动加载大型数据集 (VBASPNETInfiniteLoading) http://code.msdn.microsoft.com/VBASPNETInfiniteLoading-10c3f379

原创文章： http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

工作示例： http://www.webresourcesdepot.com/dnspinger/

    <link rel="stylesheet" href="Styles/Site.css" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>



    $(document).ready(function () {

       function lastPostFunc() {
           $('#divPostsLoader').html('<img src="images/bigLoader.gif">');

           //send a query to server side to present new content
           $.ajax({
               type: "POST",
               url: "Default.aspx/Foo",
               data: "{}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (data) {

                   if (data != "") {
                       $('.divLoadData:last').after(data.d);
                   }
                   $('#divPostsLoader').empty();
               }

           })
       };

       //When scroll down, the scroller is at the bottom with the function below and fire
    the lastPostFunc function
       $(window).scroll(function () {
           if ($(window).scrollTop() == $(document).height() - $(window).height()) {
               lastPostFunc();
           }
       });

    });

【讨论】：