Changeset 26203


Ignore:
Timestamp:
2012-09-18T15:42:14+12:00 (9 years ago)
Author:
sjm84
Message:

Adding slideshow functionality for paged image collections

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

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                                }
Note: See TracChangeset for help on using the changeset viewer.