lazy load gallery

2 files changed, 24 insertions, 4 deletions

diff --git a/MediaBrowser.WebDashboard/Html/itemDetails.html b/MediaBrowser.WebDashboard/Html/itemDetails.html
index 6dac0a486..b1c4b32e9 100644
--- a/MediaBrowser.WebDashboard/Html/itemDetails.html
+++ b/MediaBrowser.WebDashboard/Html/itemDetails.html
@@ -56,7 +56,7 @@
                 <h3>Cast & Crew</h3>
                 <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
             </div>
-            <div data-role="collapsible" data-content-theme="a">
+            <div data-role="collapsible" data-content-theme="a" id="galleryCollapsible">
                 <h3>Gallery</h3>
                 <div id="galleryContent"></div>
             </div>
diff --git a/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js b/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js
index ec14d5ec4..8a97943b0 100644
--- a/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js
+++ b/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js
@@ -3,9 +3,18 @@
     onPageShow: function () {
 
         ItemDetailPage.reload();
+
+        $('#galleryCollapsible', this).on('expand', ItemDetailPage.onGalleryExpand);
     },
     
-    reload: function() {
+    onPageHide: function () {
+
+        $('#galleryCollapsible', this).off('expand', ItemDetailPage.onGalleryExpand);
+
+        ItemDetailPage.item = null;
+    },
+
+    reload: function () {
         var id = getParameterByName('id');
 
         Dashboard.showLoadingMsg();
@@ -15,6 +24,8 @@
 
     renderItem: function (item) {
 
+        ItemDetailPage.item = item;
+
         var page = $.mobile.activePage;
 
         ItemDetailPage.item = item;
@@ -30,7 +41,6 @@
         ItemDetailPage.renderImage(item);
         ItemDetailPage.renderOverviewBlock(item);
         ItemDetailPage.renderScenes(item);
-        ItemDetailPage.renderGallery(item);
         ItemDetailPage.renderMediaInfo(item);
 
         $('#itemName', page).html(name);
@@ -265,6 +275,16 @@
         MediaPlayer.play([ItemDetailPage.item]);
     },
 
+    onGalleryExpand: function() {
+
+        if (ItemDetailPage.item) {
+
+            ItemDetailPage.renderGallery(ItemDetailPage.item);
+
+            $(this).off('expand', ItemDetailPage.onGalleryExpand);
+        }
+    },
+
     renderGallery: function (item) {
 
         var page = $.mobile.activePage;
@@ -353,4 +373,4 @@
     }
 };
 
-$(document).on('pageshow', "#itemDetailPage", ItemDetailPage.onPageShow);
+$(document).on('pageshow', "#itemDetailPage", ItemDetailPage.onPageShow).on('pagehide', "#itemDetailPage", ItemDetailPage.onPageHide);