Changeset 26203

Show
Ignore:
Timestamp:
18.09.2012 15:42:14 (7 years ago)
Author:
sjm84
Message:

Adding slideshow functionality for paged image collections

Location:
main/trunk/greenstone3/web/interfaces/default
Files:
1 added
4 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js

    r26020 r26203  
    12331233    _baseURL = gs.xsltParams.library_name; 
    12341234} 
     1235 
     1236function showSlideShow() 
     1237{ 
     1238    var visible = $("#ssOption").attr('checked'); 
     1239    if(visible) 
     1240    { 
     1241        $("#gs-document").hide(); 
     1242        if(!($("#gs-slideshow").length)) 
     1243        { 
     1244            var slideshowDiv = $("<div>", {id:"gs-slideshow"}); 
     1245            var loadingImage = $("<img>", {src:gs.imageURLs.loading}); 
     1246            slideshowDiv.append(loadingImage); 
     1247             
     1248            $("#gs-document").after(slideshowDiv); 
     1249             
     1250            retrieveImagesForSlideShow(function(imageIDArray) 
     1251            { 
     1252                loadingImage.hide(); 
     1253                if(imageIDArray && imageIDArray.length > 0) 
     1254                { 
     1255                    var imageURLs = new Array(); 
     1256                    for(var i = 0; i < imageIDArray.length; i++) 
     1257                    { 
     1258                        if(imageIDArray[i].source && imageIDArray[i].source.search(/.*\.(gif|jpg|jpeg|png)$/) != -1) 
     1259                        { 
     1260                            imageURLs.push(gs.collectionMetadata.httpPath + "/index/assoc/" + gs.documentMetadata.assocfilepath + "/" + imageIDArray[i].source); 
     1261                        } 
     1262                    } 
     1263                    new SlideShowWidget(slideshowDiv, imageURLs, imageIDArray); 
     1264                } 
     1265            }); 
     1266        } 
     1267        else 
     1268        { 
     1269            $("#gs-slideshow").show(); 
     1270        } 
     1271    } 
     1272    else 
     1273    { 
     1274        if($("#gs-slideshow").length) 
     1275        { 
     1276            $("#gs-slideshow").hide(); 
     1277        } 
     1278        $("#gs-document").show(); 
     1279    } 
     1280} 
     1281 
     1282function retrieveImagesForSlideShow(callback) 
     1283{ 
     1284    var template = ""; 
     1285    template += '<xsl:template match="/">'; 
     1286    template +=   '<images>['; 
     1287    template +=     '<xsl:for-each select="//documentNode">'; 
     1288    template +=       '<xsl:text disable-output-escaping="yes">{"source":"</xsl:text><gsf:metadata name="Source"/><xsl:text disable-output-escaping="yes">",</xsl:text>'; 
     1289    template +=       '<xsl:text disable-output-escaping="yes">"id":"</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">"}</xsl:text>'; 
     1290    template +=       '<xsl:if test="position() != count(//documentNode)">,</xsl:if>'; 
     1291    template +=     '</xsl:for-each>'; 
     1292    template +=   ']</images>'; 
     1293    template += '</xsl:template>'; 
     1294 
     1295    var url = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + gs.cgiParams.d + "?ed=1&ilt=" + template.replace(" ", "%20"); 
     1296 
     1297    $.ajax( 
     1298    { 
     1299        url:url, 
     1300        success: function(data) 
     1301        { 
     1302            var startIndex = data.indexOf(">", data.indexOf(">") + 1) + 1; 
     1303            var endIndex = data.lastIndexOf("<"); 
     1304            var arrayString = data.substring(startIndex, endIndex); 
     1305            var imageIDArray = eval(arrayString); 
     1306 
     1307            callback(imageIDArray); 
     1308        } 
     1309    }); 
     1310} 
     1311 
     1312function SlideShowWidget(mainDiv, images, idArray) 
     1313{ 
     1314    var _inTransition = false; 
     1315    var _images = new Array(); 
     1316    var _mainDiv = mainDiv; 
     1317    var _imageDiv = $("<div>", {id:"ssImageDiv"}); 
     1318    var _navDiv = $("<div>", {style:"height:2em;"}); 
     1319    var _nextButton = $("<img>", {src:gs.imageURLs.next, style:"float:right; cursor:pointer;"}); 
     1320    var _prevButton = $("<img>", {src:gs.imageURLs.prev, style:"float:left; cursor:pointer;"}); 
     1321    var _clearDiv = $("<div>", {style:"clear:both;"}); 
     1322    var _currentIndex = 0; 
     1323     
     1324    _navDiv.append(_nextButton); 
     1325    _navDiv.append(_prevButton); 
     1326    _navDiv.append(_clearDiv); 
     1327    _mainDiv.append(_navDiv); 
     1328    _mainDiv.append(_imageDiv); 
     1329     
     1330    for(var i = 0; i < images.length; i++) 
     1331    { 
     1332        _images.push($("<img>", {src:images[i], "class":"slideshowImage"})); 
     1333    } 
     1334     
     1335    _imageDiv.append(_images[0]); 
     1336     
     1337    this.nextImage = function() 
     1338    { 
     1339        if(!_inTransition) 
     1340        { 
     1341            _inTransition = true; 
     1342            if((_currentIndex + 1) < _images.length) 
     1343            { 
     1344                _imageDiv.fadeOut(1000, function() 
     1345                { 
     1346                    _imageDiv.empty(); 
     1347                    _imageDiv.append(_images[_currentIndex + 1]); 
     1348                    _currentIndex++; 
     1349                    _imageDiv.fadeIn(1000, function() 
     1350                    { 
     1351                        _inTransition = false; 
     1352                    }); 
     1353                }); 
     1354            } 
     1355            else 
     1356            { 
     1357                _inTransition = false; 
     1358            } 
     1359        } 
     1360    } 
     1361     
     1362    this.prevImage = function() 
     1363    { 
     1364        if(!_inTransition) 
     1365        { 
     1366            _inTransition = true; 
     1367            if((_currentIndex - 1) >= 0) 
     1368            { 
     1369                _imageDiv.fadeOut(1000, function() 
     1370                { 
     1371                    _imageDiv.empty(); 
     1372                    _imageDiv.append(_images[_currentIndex - 1]); 
     1373                    _currentIndex--; 
     1374                    _imageDiv.fadeIn(1000, function() 
     1375                    { 
     1376                        _inTransition = false; 
     1377                    }); 
     1378                }); 
     1379            } 
     1380            else 
     1381            { 
     1382                _inTransition = false; 
     1383            } 
     1384        } 
     1385    } 
     1386     
     1387    var getRootFilenameFromURL = function(url) 
     1388    { 
     1389        var urlSegments = url.split("/"); 
     1390        var filename = urlSegments[urlSegments.length - 1]; 
     1391        return filename.replace(/_thumb\..*$/, ""); 
     1392    } 
     1393     
     1394    var setLink = function(currentLink, index) 
     1395    { 
     1396        $(currentLink).click(function() 
     1397        { 
     1398            _inTransition = true; 
     1399            _currentIndex = index; 
     1400            _imageDiv.fadeOut(1000, function() 
     1401            { 
     1402                _imageDiv.empty(); 
     1403                _imageDiv.append(_images[_currentIndex]); 
     1404                _imageDiv.fadeIn(1000, function() 
     1405                { 
     1406                    _inTransition = false; 
     1407                }); 
     1408            }); 
     1409        }); 
     1410    } 
     1411 
     1412    var sliderLinks = $(".pageSliderCol a"); 
     1413    for(var i = 0; i < sliderLinks.length; i++) 
     1414    { 
     1415        var currentLink = sliderLinks[i]; 
     1416        var id = $(currentLink).attr("href").split("'")[1]; 
     1417 
     1418        for(var j = 0; j < idArray.length; j++) 
     1419        { 
     1420            if(idArray[j].id == id) 
     1421            { 
     1422                var image = idArray[j].source; 
     1423                 
     1424                for(var l = 0; l < images.length; l++) 
     1425                { 
     1426                    var filename = getRootFilenameFromURL(images[l]); 
     1427                    if (filename == image) 
     1428                    { 
     1429                        setLink(currentLink, l); 
     1430                        break; 
     1431                    } 
     1432                } 
     1433                 
     1434                break; 
     1435            } 
     1436        } 
     1437    } 
     1438 
     1439    _nextButton.click(this.nextImage); 
     1440    _prevButton.click(this.prevImage); 
     1441} 
  • main/trunk/greenstone3/web/interfaces/default/style/core.css

    r26118 r26203  
    652652} 
    653653 
     654.tocTextCell { 
     655    padding-left:5px; 
     656} 
     657 
    654658.tableOfContentsContainer { 
    655659    padding:1px; 
     
    834838} 
    835839 
     840#gs-slideshow{ 
     841    width:65%; 
     842} 
     843 
     844.slideshowImage{ 
     845    width:100%; 
     846} 
     847 
    836848/* 
    837849ul.childrenlist li { 
  • main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl

    r25936 r26203  
    110110            <xsl:text disable-output-escaping="yes">gs.imageURLs.pageIcon = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'page_icon_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text> 
    111111            <xsl:text disable-output-escaping="yes">gs.imageURLs.trashFull = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'trash_full_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text> 
    112             <xsl:text disable-output-escaping="yes">gs.imageURLs.blank = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'blank_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text> 
     112            <xsl:text disable-output-escaping="yes">gs.imageURLs.next = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'next_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text> 
     113            <xsl:text disable-output-escaping="yes">gs.imageURLs.prev = "</xsl:text><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'prev_image')"/><xsl:text disable-output-escaping="yes">";</xsl:text> 
    113114        </script> 
    114115    </xsl:template> 
  • main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl

    r26175 r26203  
    176176                 
    177177                <!-- The section name, links to the section in the document --> 
    178                 <td>                 
     178                <td class="tocTextCell">                 
    179179                    <a id="toclink{@nodeID}" href="javascript:focusSection('{@nodeID}');"> 
    180180                        <xsl:if test="util:hashToSectionId(@nodeID)"> 
     
    216216                    <xsl:attribute name="style"> 
    217217                        <xsl:choose> 
    218                             <xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@docType = 'paged' or /page/pageResponse/document/documentNode/@docType = 'pagedhierarchy'"> 
     218                            <xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/@docType = 'paged' or /page/pageResponse/document/@docType = 'pagedhierarchy'"> 
    219219                            </xsl:when> 
    220220                            <xsl:otherwise> 
     
    242242                        </xsl:choose> 
    243243                    </select> 
     244                </li> 
     245                 
     246                <!-- Slide-show options --> 
     247                <li id="slideShowOptions"> 
     248                    <xsl:attribute name="style"> 
     249                        <xsl:choose> 
     250                            <xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/@docType = 'paged' or /page/pageResponse/document/@docType = 'pagedhierarchy'"> 
     251                            </xsl:when> 
     252                            <xsl:otherwise> 
     253                                display:none; 
     254                            </xsl:otherwise> 
     255                        </xsl:choose> 
     256                    </xsl:attribute> 
     257                    <img> 
     258                        <xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'slideshow_image')"/></xsl:attribute> 
     259                    </img> 
     260                    <input id="ssOption" type="checkbox" onclick="showSlideShow()" class="optionCheckBox"/> 
    244261                </li> 
    245262             
     
    282299                            $("#zoomToggle").change(function() 
    283300                            { 
    284                                 _imageZoomEnabled = !_imageZoomEnabled; 
     301                                _imageZoomEnabled = $("#zoomToggle").attr("checked"); 
    285302                            }); 
    286303                        </xsl:text> 
     
    301318                                    if(divs[i].getAttribute("id") &amp;&amp; divs[i].getAttribute("id").search(/^mover.*/) != -1) 
    302319                                    { 
    303                                         divs[i].style.height = 200 + (2 * sliderValue) + "px"; 
    304                                         divs[i].style.width = 200 + (2 * sliderValue) + "px"; 
     320                                        divs[i].style.height = 400 + (2 * sliderValue) + "px"; 
     321                                        divs[i].style.width = 400 + (2 * sliderValue) + "px"; 
    305322                                    } 
    306323                                }