+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Image Gallery design bug

Image Gallery design bug

6 posts, 0 answered
  1. Trey
    Trey avatar
    7 posts
    Registered:
    16 Dec 2009
    08 Jan 2010
    Link to this post
    Maybe I'm the only person that has seen this, but I'm getting JavaScript errors when using the Image & List template for an Image Gallery control in IE8. The runtime behavior of the control seems fine, and the CMS design time behavior is fine when any other template is used. Sitefinity version is 3.7.2057.2:0.

    ERROR 1
    Seen as soon as the control is saved after selecting the Image & List template. Webpage Error box pops up:

    Line: 346
    Error: Object doesn't support this property or method

    Debugging shows the error at the first line of the inline JavaScript in the template, invoking jQuery:
    $(document).ready(function() { 
     

    ERROR 2
    Seen when selecting a page in the CMS that contains an Image Gallery control that uses the Image & List template.
    Webpage error box pops up:

    Line: 12
    Error: Access is denied.

    Debugging highlights a snippet in the minified jQuery code:
    J.setAttribute(G,""+K) 

    Ignoring the errors seems to have no ill effects other than being extremely annoying. This is fine for me but not for the client I will be handing this project to. Have you seen this before?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Jan 2010
    Link to this post
    Hello Trey,

    Both seems to be a bug. The first issue can be easily sorted by mapping the external template and adding the following reference to your master page


    For the second issue

    1. Map the external template GalleryBigImageAndList.ascx for ImageGallery Control using  ItemListTemplatePath property of the control( advanced tab, TemplatePaths category). You can download the external templates from your account downloads section. Once you are done with the mapping you need to modify $(document).ready(function() as shown below:

    <script type="text/javascript">
     
        $(document).ready(function() {
        var src = $("img:gt(0)").attr("src");
     
            if (src && src != 'undefined') {
                var bigImg = $(".sf_BigImage img").eq(0);
                var pAnchor = getAnchor();
                if (pAnchor != null && $(".sf_photoListBigImg a[href='" + pAnchor + "']").length > 0) {
                    bigImg.attr("href");
                    $(".sf_photoListBigImg a[href='" + pAnchor + "']").eq(0).parent().parent().parent().addClass("sf_bigImgSelected");
     
                }
                else {
                    var bigImgDom = bigImg.get(0);
                    //bigImgDom.setAttribute("src", src);
                    bigImg.attr("src", src);
                    $(".sf_photoListBigImg li").eq(0).addClass("sf_bigImgSelected");
                    setAnchor(src);
                }
                $(".sf_BigImage").show();
     
                $(".sf_photoListBigImg .sf_viewBigImg").click(function() {
     
                    $(".sf_photoListBigImg .sf_bigImgSelected").removeClass("sf_bigImgSelected");
                    bigImg.attr("src", $(this).attr("href"));
                    $(this).parent().parent().parent().addClass("sf_bigImgSelected");
     
                    setAnchor($(this).attr("href"));
     
                    return false;
                });
     
            }

    Your Telerik points have been updated.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Trey
    Trey avatar
    7 posts
    Registered:
    16 Dec 2009
    11 Jan 2010
    Link to this post
    Adding an explicit jQuery reference to the top of the master page eliminated the first error. Using the new JavaScript eliminated the second error, but caused some collateral damage.

    Now when a page with the image gallery control is viewed live, the initial selected image is roughly the same size as the image in the thumbnail list. Once you click on a thumbnail, the loaded image is sized properly. Also, when the page is refreshed after clicking a thumbnail, the large image is completely broken until a thumbnail is clicked. Reloading the page before clicking on any thumbnails produces normal results (the image is not broken, but is still small). 

    The only difference I can see between the two scenarios is the format of the URL in the address bar. On initial page load, the Library path after the anchor character is an absolute path, and the URL contains a query string that I assume is supposed to constrain the sizes of the thumbnails. After clicking on a thumbnail, the Library path becomes relative, and the query string disappears.

    Thoughts? I'm working on this as well using my very limited JavaScript skills, so any help is appreciated.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    12 Jan 2010
    Link to this post
    Hi Trey,

    You could try using the code shown below

    <script type="text/javascript">
     
        $(document).ready(function() {
            var src = $("img:gt(0)").attr("src");
            var href = $("#ctl00_Content_ImageGallery1_ctl00_ctl00_repeater_ctl01_DownloadLink").attr("href");
            if (src && src != 'undefined') {
                var bigImg = $(".sf_BigImage img").eq(0);
                var pAnchor = getAnchor();
                if (pAnchor != null && $(".sf_photoListBigImg a[href='" + pAnchor + "']").length > 0) {
                    bigImg.attr("href");
                    $(".sf_photoListBigImg a[href='" + pAnchor + "']").eq(0).parent().parent().parent().addClass("sf_bigImgSelected");
     
                }
                else {
                    var bigImgDom = bigImg.get(0);
                    bigImg.attr("src", href);
                    $(".sf_photoListBigImg li").eq(0).addClass("sf_bigImgSelected");
                    setAnchor(href);
                }
     
                   ....
                         ....
                               ....

    This is a bug and it was logged in system.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Trey
    Trey avatar
    7 posts
    Registered:
    16 Dec 2009
    12 Jan 2010
    Link to this post
    I'll preface this by saying that I'm not a JavaScript / jQuery person, so please tell me if I've done something dumb.

    After spending a lot of time with IE8's debugger, I think I've figured out what's going on. In the CMS, there's code that essentially NOOP's all the anchors in a page by replacing the contents of the href attribute with "javascript:void(0);". The jQuery in the template relies on that href attribute, plugging its contents into the large image's src attribute. Inside the CMS of course, the image ends up looking like this:
    <img src="javascript:void(0)" alt=""/> 
    which results in a broken image, but no harm done. Under IE8 (and possibly earlier, IE8 is all I have access to on my development workstation), jQuery refuses to plug the JavaScript into the image's src attribute, resulting in the "Access is Denied" error.

    My solution is simply to check whether or not the navigation is locked on the page and bypass the entire script if it is. This also takes care of the broken image showing in other browsers since the large image style is set to display:none and is only shown by the script. In the original template script, replace 
    if (src && src != 'undefined') { 
    with
    if(src && src != 'undefined' && !isInCms) { 

    and add the following small function under the two anchor functions
    1 function isInCMS() { 
    2     var pUrl = document.location.toString(); 
    3     if (pUrl.match('locknavigation=true') != null || pUrl.match('cmspagemode=edit') != null
    4         return true
    5     else 
    6         return false
    7

    I don't have any way to do comprehensive browser testing on this, but it seems straightforward enough. Please let me know if there are unintended consequences from this code or if I've missed something obvious. Thanks for your help and responsiveness so far.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    13 Jan 2010
    Link to this post
    Hi Trey,

    This error seems to be caused only in IE. I was not able to reproduce it in FF before. Also there seems to be a bug in jQuery related to this issue, but this applies to older version of the js library. We need to refactor our code to fix this. It seems that your code works file as well.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
6 posts, 0 answered