This project is read-only.

Resetting the gallery to display the first image

Oct 20, 2012 at 12:43 AM

I spent a long time searching the internet for a cool-looking gallery to display images - AD Gallery is absolutely perfect for my needs. Thanks very, very much.

Anyway, a quick query. The original version of my website consisted of a navigation frame containing links to items found in a museum. When a link was clicked, details of the item were displayed in a separate frame (including a few pictures displayed using AD Gallery). The website used a MySQL database and PHP pages to retrieve the relevant info about each item. In its original form, clicking the link would cause the PHP page to reload. This worked well but there was a white flash as the page reloaded. For this (and several other reasons) I decided to rewrite the site using Ajax, XMLHttpRequest and Javascript.

So now clicking on a link in the navigation bar causes a PHP page to produce the list of images required (together with the necessary HTML tags) and the results put into a <div></div> tag using:

document.getElementById("div_id").innerHTML=xmlhttp.responseText;

...and then the AD Gallery script which was original found at the top of the HTML page is triggered to ensure the gallery displays properly.

This works really nicely - except for one issue. Suppose the first item I click has 5 photos and I navigate along to photo number 3. When I click a second item, the details are loaded but the photo that is displayed is photo 3. This is fine if the second item has 3 or more photos but, if not, it causes a missing picture sign to appear. The thumbnails load fine and when the thumbnail is clicked, the main photo loads properly.

So, the question is, 'can the photo to be displayed be reset using a Javascript script so that AD Gallery displays the first photo?'

Nov 11, 2012 at 2:19 PM

Hi lvphj,

I am walking down the same path you have and was wondering if you found an answer to your problem elsewhere?  If not, once I get to the point where I can duplicate the issue, I will work through the issue myself and post an answer here.

Frank

Nov 14, 2012 at 8:13 PM

Ok... after a great deal of toil and trouble that made me a stronger and smarter man I have a solution.

My requirements were:

Images for the gallery to feed off an AJAX call

JSON returned to the client containing image URLS and info

Slide show to auto start

No URL changing please

Different galleries loaded via AJAX when menu items are clicked

 

Issues I had:

Getting images to load and slideshow starting

Once past the above every time I loaded a new gallery I got duplicated file counts and slideshow controls

The old gallery slide show running with the new gallery slide show showing images from both the old and new galleries on top of each other.

 

The code that works (JavaScript function called wen a gallery link is clicked):

    <script type="text/javascript">

        \\ function called on link click feeding in the ID of the photo set
         function GetGalleryItems(photoSetID)
        {

           \\  CRITICAL - Stop the slide show if slide show functionality is used
            $(".ad-slideshow-stop").trigger('click');

          \\ Make the AJAX call to get the new gallery info
            $.ajax({
                type: "POST",
                url: "test.aspx/GetGallery",
                contentType: "application/json; charset=utf-8",
                data: "{'photoSetID':'" + photoSetID + "'}",
                dataType: "json",
                success: function (result)
                {
                    DisplayListItems(result);
                },
                "error": function (result)
                {
                    var response = result.responseText;
                    alert('Error loading: ' + response);
                }
            });
        }
        function DisplayListItems(result)
        {

           \\ Start processing AJAX response by first striping off the "d" trash Microsoft added to the web response (cost me hours of time).
            if (result.hasOwnProperty("d"))
            {
                result = result.d;
            }

            \\ manually create the image UL as using prebuilt UL HTML and adding it InnerHTML does not work as the img element gets disassociated from the A        element

            var newUL = document.createElement("ul");
            newUL.setAttribute("class", "ad-thumb-list");
            var newA;
            var newLI;
            var newImg;

            $.each(result, function(i, val)
            {
                var single = result[i];
                var newImg = document.createElement("img");
                newImg.setAttribute("src", val.LocalSelectSizeUrl);
                newImg.setAttribute("title", val.Title);
                newImg.setAttribute("longdesc", val.LongDesc);
                newImg.setAttribute("alt", val.Alt);
                newImg.setAttribute("class", val.CssClass);
                var newA = document.createElement("a");
                newA.setAttribute("href", val.LocalFullSizeUrl);
                newA.appendChild(newImg);
                newLI = document.createElement("li");
                newLI.appendChild(newA);
                newUL.appendChild(newLI);
            });

            \\ This seemed to have no effect but I figured I leave it in just to be safe
            if (window['galleries'] != undefined)
            {
                galleries = null;
            }

           \\  CRITICAL - Clear the child elements of these elements

            $("#ImageList").empty();
            $(".ad-image-wrapper").empty();
            $(".ad-controls").empty();
            $("#ImageList").append(newUL);

           \\ state the gallery code
            var galleries = $('.ad-gallery').adGallery();
        }
    </script>

 

Thanks to Andy for creating and the sharing this code.  I probably could have done something myself but even with the issues I had this was a big times saver over going down my own path.  With the exception of one change I made the library fits my needs perfectly.

I added a parameter for displaying and hiding the picture title and description by mouse over and mouse out.  If anyone is interested in that let me know and I can get you the modifications.

 

Frank