幫助加載「畫廊」畫廊與.load

我有100多個圖像的圖像畫廊，使其加載速度更快我想它分割成30組在頁面上有一個導航「圖庫1 2 3 4 5「，當用戶點擊任何數字時，我想將鏈接的href加載到」#rCol「 - 但只有」#galleria「部分。我可以得到它加載的內容，但它）加載整個頁面和B）「環球免稅店」功能未啓用。幫助加載「畫廊」畫廊與.load

是否可以創建一個包含所有圖像的xml文件並創建一次跳過30的傳呼機？

我想從鏈接的href做一個var，所以我不必爲每個類添加一個類，併爲每個類寫一個函數。

$("ul#gallery li a").live('click',function(e) { 
     e.preventDefault(); 
     var $parent = $(this).parent(); 
     $parent.addClass("selected").siblings().removeClass("selected"); 
     var href = $(this).attr('href'); 
     $("#rCol").load(href, function() { 
      $("#galleria").galleria(); 
     }); 
    }); 

// Initialize Galleria 
$("#galleria").galleria({ 
    transition: 'fade', 
    width: 800, 
    height: 536, 


    extend: function(options) { 

     Galleria.log(this) // the gallery instance 
     Galleria.log(options) // the gallery options 

     // listen to when an image is shown 
     this.bind('image', function(e) { 

      Galleria.log(e) // the event object may contain custom objects, in this case the main image 
      Galleria.log(e.imageTarget) // the current image 

      // lets make galleria open a lightbox when clicking the main image: 
      $(e.imageTarget).click(this.proxy(function() { 
       this.openLightbox(); 
      })); 
     }); 
    } 
});

有什麼想法嗎？

試圖重新初始化「圓頂場所」功能here。各種各樣的問題，沒有更新縮略圖然後點擊專輯2，回到專輯1它加載整個頁面的div。

$("ul#gallery li a").live('click',function(e) { 
     e.preventDefault(); 
     var $parent = $(this).parent(); 
     $parent.addClass("selected").siblings().removeClass("selected"); 
     var href = $(this).attr('href'); 
     $("#rCol").load(href, function() { 
      $("#galleria").galleria({ 
           transition: 'fade', 
           width: 800, 
           height: 536, 


           extend: function(options) { 

           Galleria.log(this) // the gallery instance 
           Galleria.log(options) // the gallery options 

           // listen to when an image is shown 
           this.bind('image', function(e) { 

           Galleria.log(e) // the event object may contain custom objects, in this case the main image 
           Galleria.log(e.imageTarget) // the current image 

      // lets make galleria open a lightbox when clicking the main image: 
      $(e.imageTarget).click(this.proxy(function() { 
       this.openLightbox(); 
      })); 
      }); 
     } 



          }); 
     }); 
    });

來源

2011-05-02 Dirty Bird Design

「加載整個頁面」，你的意思是包括''和''和''？這會讓它變得有趣。你能發佈一個鏈接到整個HTML響應嗎？你可能只需要在JS中使用2個'response.split'。（討厭，但可能。） – Rudie 2011-05-02 20:25:12

PS。 '.live'確實只適用於''點擊事件，不適用於廣告系列插件，但您可以重新初始化，沒問題。 – Rudie 2011-05-02 20:26:39

@Rudie，請參閱上面編輯的評論，以便我重新啓用畫廊功能。 thx人。 – 2011-05-02 20:41:09

畫廊（您的HTML會是這樣的，對嗎？）

<div id="rCol"> 
    <div id="galleria"> 
    <ul> 
     <li><img src="" alt /></li> 
     <li><img src="" alt /></li> 
     <!-- etc --> 
    </ul> 
    </div> 
</div>

的導航鏈接（您的導航鏈接語義奈何不了）

<ul id="galleria-nav"> 
    <li><a href="?page=1">...</a></li> 
    <li><a href="?page=2">...</a></li> 
    <!-- etc --> 
</ul>

Javascripts（這是重要部分）

<script> 
function loadPage(href) { 
    // do ajax call, with success handler: 
    $.post(href, function(rsp) { 
    // `rsp` is now the ENTIRE html page (incl <html> etc????) 
    // what you should do here, is filter the HTML, so you keep only div#galleria 
    // I can't do that here, because I have no idea what your actual HTML looks like 
    $('rCol').html(rsp); 
    initGalleryClickables(); 
    }, null); // the `null` is just to show you there's no actual POST data 
} 
function initGalleryClickables() { 
    // reinit the galleria plugin (DOM changed) 
    $("#galleria").galleria({ 
    transition: 'fade', 
    // more settings that you already have in your code 
    }); 
    // reinit gallery image links? for lightbox or something? maybe not... 
} 
// no point in reiniting the nav links: their DOM doesn't change 
$('#galleria-nav a').click(function(e) { 
    e.preventDefault(); // it's not a link 
    loadPage(this.href); 
}); 
</script>

我不喜歡jQuery.live並儘量避免它。它使用冒泡，並且在大DOM中效率不高。在很多情況下，這也不是必需的。像這個。

我認爲在你的情況下，問題在於你從ajax請求得到的響應（參見行內註釋）。你也許可以用Javascript來過濾正確的HTML片段，但很多更好的辦法是做這個過濾服務器端。我假設你有權訪問輸出腳本。有幾個if就足夠了。

編輯
您可以使用.live的導航鏈接（和畫廊的圖片鏈接，如果有任何（鏈接）），但你還是要重新初始化的Galleria插件，所以我不使用.live並重新開始整個事情

正如我所說：你需要過濾正確的一段HTML。最好是服務器端（比Javascript更少的下載和更容易的過濾）。我幫不了你，除非你給我看一些服務器端代碼=）

來源

2011-05-02 21:49:09 Rudie

我真的很感激。雖然不幸我不完全明白這一點。我想我會嘗試用PHP攻擊過濾服務器端....如果你身邊 - 關於「rsp」的一些進一步的解釋和我需要做的服務器端將是很棒的。 thx人。 – 2011-05-03 02:21:08

我不能告訴你該怎麼做服務器端，除非我知道你現在怎麼做。你有權訪問輸出腳本？ PHP？ ASP？一個CMS？我已經在上面的答案中擴展和評論了代碼。 – Rudie 2011-05-03 07:41:31

幫助加載「畫廊」畫廊與.load

回答

相關問題