Changeset 26305 for main/trunk/greenstone3

Timestamp:

2012-10-11T14:52:29+13:00 (12 years ago)

Author:

sjm84

Message:

Changed the slideshow to use more of the screen and reverting the page width change

Location:

main/trunk/greenstone3/web/interfaces/default

Files:

• js/document_scripts.js (modified) (5 diffs)
• js/jquery.blockUI.js (added)
• style/core.css (modified) (3 diffs)
• transform/layouts/header.xsl (modified) (1 diff)

main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js

@@ -1291 +1291 @@
 function showSlideShow()
 {
-    var visible = $("#ssOption").attr('checked');
-    if(visible)
-    {
-        $("#gs-document").hide();
-        if(!($("#gs-slideshow").length))
-        {
-            var slideshowDiv = $("<div>", {id:"gs-slideshow"});
-            var loadingImage = $("<img>", {src:gs.imageURLs.loading});
-            slideshowDiv.append(loadingImage);
-            
-            $("#gs-document").after(slideshowDiv);
-            
-            retrieveImagesForSlideShow(function(imageIDArray)
-            {
-                loadingImage.hide();
-                if(imageIDArray && imageIDArray.length > 0)
-                {
-                    var imageURLs = new Array();
-                    for(var i = 0; i < imageIDArray.length; i++)
+    $("#ssOption").attr('checked', false);
+    if(!($("#gs-slideshow").length))
+    {
+        var slideshowDiv = $("<div>", {id:"gs-slideshow"});
+        var loadingImage = $("<img>", {src:gs.imageURLs.loading});
+        slideshowDiv.append(loadingImage);
+        
+        $.blockUI({message: $(slideshowDiv), css:{top: "5%", left: "5%", width: "90%", height: "90%", overflow: "auto", cursor: "auto"}});
+        
+        retrieveImagesForSlideShow(function(imageIDArray)
+        {
+            loadingImage.hide();
+            if(imageIDArray && imageIDArray.length > 0)
+            {
+                var imageURLs = new Array();
+                for(var i = 0; i < imageIDArray.length; i++)
+                {
+                    if(imageIDArray[i].source && imageIDArray[i].source.search(/.*\.(gif|jpg|jpeg|png)$/) != -1)
                     {
-                        if(imageIDArray[i].source && imageIDArray[i].source.search(/.*\.(gif|jpg|jpeg|png)$/) != -1)
-                        {
-                            imageURLs.push(gs.collectionMetadata.httpPath + "/index/assoc/" + gs.documentMetadata.assocfilepath + "/" + imageIDArray[i].source);
-                        }
+                        imageURLs.push(gs.collectionMetadata.httpPath + "/index/assoc/" + gs.documentMetadata.assocfilepath + "/" + imageIDArray[i].source);
                     }
-                    new SlideShowWidget(slideshowDiv, imageURLs, imageIDArray);
-                }
-            });
-        }
-        else
-        {
-            $("#gs-slideshow").show();
-        }
-        
-        if($("#zoomOptions").length)
-        {
-            $("#zoomOptions").hide();
-        }
+                }
+                new SlideShowWidget(slideshowDiv, imageURLs, imageIDArray);
+            }
+        });
     }
     else
     {
-        if($("#gs-slideshow").length)
-        {
-            $("#gs-slideshow").hide();
-        }
-        $("#gs-document").show();
-        
-        if($("#zoomOptions").length)
-        {
-            $("#zoomOptions").show();
-        }
+        $("#gs-slideshow").show();
+    }
+    
+    if($("#zoomOptions").length)
+    {
+        $("#zoomOptions").hide();
     }
 }
@@ -1384 +1367 @@
     var _nextButton = $("<img>", {src:gs.imageURLs.next, style:"float:right; cursor:pointer;"});
     var _prevButton = $("<img>", {src:gs.imageURLs.prev, style:"float:left; cursor:pointer; display:none;"});
+    var _closeLink = $("<a href=\"javascript:$.unblockUI()\">Close Slideshow</a>");
     var _clearDiv = $("<div>", {style:"clear:both;"});
     var _currentIndex = 0;
     
     _navDiv.append(_nextButton);
+    _navDiv.append(_closeLink);
     _navDiv.append(_prevButton);
     _navDiv.append(_clearDiv);
@@ -1418 +1403 @@
                 }
             
-                _imageDiv.fadeOut(1000, function()
+                _imageDiv.fadeOut(500, function()
                 {
                     _imageDiv.empty();
                     _imageDiv.append(_images[_currentIndex + 1]);
                     _currentIndex++;
-                    _imageDiv.fadeIn(1000, function()
+                    _imageDiv.fadeIn(500, function()
                     {
                         _inTransition = false;
@@ -1449 +1434 @@
                 }
             
-                _imageDiv.fadeOut(1000, function()
+                _imageDiv.fadeOut(500, function()
                 {
                     _imageDiv.empty();
                     _imageDiv.append(_images[_currentIndex - 1]);
                     _currentIndex--;
-                    _imageDiv.fadeIn(1000, function()
+                    _imageDiv.fadeIn(500, function()
                     {
                         _inTransition = false;
@@ -1480 +1465 @@
             _inTransition = true;
             _currentIndex = index;
-            _imageDiv.fadeOut(1000, function()
+            _imageDiv.fadeOut(500, function()
             {
                 _imageDiv.empty();
                 _imageDiv.append(_images[_currentIndex]);
-                _imageDiv.fadeIn(1000, function()
+                _imageDiv.fadeIn(500, function()
                 {
                     _inTransition = false;

main/trunk/greenstone3/web/interfaces/default/style/core.css

@@ -151 +151 @@
     position: relative;
     margin: 0 auto 20px auto;
-    width: 80%;
+    max-width: 1000px;
     padding: 0;
     line-height: 120%;
@@ -160 +160 @@
 #topArea {
     border: none;
-    width: 80%;
+    max-width: 1000px;
     margin: 20px auto 0;
 }
@@ -840 +840 @@
 }
 
-#gs-slideshow{
-    width:65%;
-}
-
 .slideshowImage{
     width:100%;

main/trunk/greenstone3/web/interfaces/default/transform/layouts/header.xsl

@@ -56 +56 @@
         <script type="text/javascript" src="interfaces/{$interface_name}/js/jquery-ui.min.js"><xsl:text> </xsl:text></script>
         <script type="text/javascript" src="interfaces/{$interface_name}/js/jquery.themeswitcher.min.js"><xsl:text> </xsl:text></script>
+        <script type="text/javascript" src="interfaces/{$interface_name}/js/jquery.blockUI.js"><xsl:text> </xsl:text></script>
         
         <script type="text/javascript" src="interfaces/{$interface_name}/js/direct-edit.js"><xsl:text> </xsl:text></script>