Mike Hacker

In a previous post I showed how you can easily create a photo gallery using jQuery,  a jQuery plug-in and the SharePoint web services.    Recently I identified an issue that prevented the photo gallery from being displayed in the Chrome and Safari web browsers.   This post will explain the issue and how to resolve it.

If you were to look at the XML returned by the SharePoint web service you would see that there are a series of <z:row> nodes that contain the data we use for displaying our photo gallery.   In our original javascript I used the jQuery .find method to locate all nodes with the tag name of z:row.    This works well for Internet Explorer and FireFox but other browsers such as Safari and Chrome return 0 results.     The issue is the namespace z.   Because of this issue we have to abandon the jQuery find method and look for an alternate way that will work cross browser.

During my testing I found out that using GetElementsByTagName(“z:row”) would return all of the nodes I needed from the XML file only when run under Internet Explorer or Firefox.    This method would return 0 results when run in Chrome or Safari.

There is another method called GetElementsByTagNameNS which is not supported by Internet Explorer but is supported by other browsers.  Using this method I could get the required nodes in Chrome and Safari.  

Now that I figured out how to located the nodes, I just need to make a few modifications to my original scripts.   Below is the complete modified script:

<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src=/Scripts/jquery.prettyPhoto.js"></script>
<link href=/Scripts/prettyPhoto.css" media="screen" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("LoadPhotoListData");

    function LoadPhotoListData() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Photo Gallery</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='EncodedAbsThumbnailUrl' /> \
                               <FieldRef Name='FileRef' /> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='NameOrTitle' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        jQuery.ajax({
            url: "/_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    }
    function processResult(xData, status) {

            var rows;

        if (xData.responseXML.getElementsByTagName("z:row").length==0)

            {

        rows = xData.responseXML.getElementsByTagNameNS('*', 'row');

            }

            else

            {

        rows = xData.responseXML.getElementsByTagName("z:row");

            }


        jQuery(rows).each(function() {
            var url = $(this).attr("ows_FileRef");
            url = url.substring(url.indexOf(';#') + 2);
            var title = $(this).attr("ows_Title");
            if (title == undefined)
                title = $(this).attr("ows_NameOrTitle");
            var liHtml = "<a rel='prettyPhoto' class='group' title='" + title + "' href='/" + url + "'><img border='0' src='" + $(this).attr("ows_EncodedAbsThumbnailUrl") + "' alt='" + title + "'></a> ";
            jQuery("#myThumbs").append(liHtml);
        });

        jQuery("a[rel^='prettyPhoto']").prettyPhoto({
            animationSpeed: 'normal', /* fast/slow/normal */
            padding: 40, /* padding for each side of the picture */
            opacity: 0.35, /* Value betwee 0 and 1 */
            showTitle: true, /* true/false */
            allowresize: true, /* true/false */
            counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
            theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */
            callback: function() { }
        });

    }
</script>

<div id="myThumbs" ></div>