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

Forums / Designing & Styling / Image galleries; Lightbox script not working

Image galleries; Lightbox script not working

25 posts, 0 answered
  1. John
    John avatar
    26 posts
    Registered:
    30 Nov 2010
    14 Mar 2011
    Link to this post
    I'm inserting an image gallery control on a page, and trying to use the "Thumbnails + Overlay (lightbox) option. The lightbox script does not appear to parse correctly - I get a bulleted list of thumbnails, and when I click on these, the page refreshes and the full sized image appears at the bottom of the page.

    Am I missing something?
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    15 Mar 2011
    Link to this post
    Hi John,

    Can you check if the files needed for the fancybox are loaded correctly - a CSS and a JS file. This could happen if you use custom template with custom theme and missed to provide these files in your files structure. Also you can provide us a link to the live (test) site so we can check the things in-place.


    Regards,
    Jordan
    the Telerik team
  3. John
    John avatar
    26 posts
    Registered:
    30 Nov 2010
    17 Mar 2011
    Link to this post
    I'll PM you a link. Thanks.
  4. John
    John avatar
    26 posts
    Registered:
    30 Nov 2010
    17 Mar 2011
    Link to this post
    Actually, can you just provide an example of the link to the fancybox script?
  5. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    23 Mar 2011
    Link to this post
    Hello John,

    The fancybox script is attached.

    Greetings,
    Jordan
    the Telerik team
  6. John
    John avatar
    26 posts
    Registered:
    30 Nov 2010
    23 Mar 2011
    Link to this post
    Place this in the 'scripts' folder?
  7. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    24 Mar 2011
    Link to this post
    Hello John,

    Please check what is the path where the site is looking for the script. You can use Firebug and see in the Net tab where should be the missing files.

    Best wishes,
    Jordan
    the Telerik team
  8. Jules
    Jules avatar
    65 posts
    Registered:
    20 Jul 2005
    15 Aug 2011
    Link to this post
    I'm having this problem too.....

    Except Firebug is telling me that the script is being loaded (searching scripts for "fancybox" yields one that starts with
    "/* START Telerik.Sitefinity.Resources.Scripts.jquery.fancybox-1.3.1.js */")

    Jules
  9. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    18 Aug 2011
    Link to this post
    Hello Julia,

    Thank you for sharing the script loading information. This is how the script should be loading. I suppose the appearance of images as bulleted items is caused by no styles loading for the image gallery. Can you examine with firebug if css is applied to the gallery. Maybe you are using a theme or css in a css widget on the page(or at the master page) that is conflicting with the css of image gallery. If you have no such css conflicts can you take the css output of a image gallery(from a project where the gallery is working) and paste it in a css widget on the page with the gallery. This should solve the problem.

    Regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Jules
    Jules avatar
    65 posts
    Registered:
    20 Jul 2005
    02 Sep 2011
    Link to this post
    Sorry it's taken me so long to get back to this. It looks like there's no CSS being applied at all to the lightbox-related CSS classes. (See attached screenshot.)
  11. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    07 Sep 2011
    Link to this post
    Hello Julia,

    Thank you for providing the screenshot. This is an issue when you upgrade your project to Sitefinity  4.1.
    To fix it add the missing css to a css widget on the same page or in the theme that the page is using. The problem is resolved in upper versions.
    .sfimagesTmbList .sfimagesTmb {
        display: inline-block;
        height: 120px;
        overflow: hidden;
        padding: 10px;
        width: 120px;
    }
    .sfimagesTmbList a {
        display: block;
        height: 120px;
        overflow: hidden;
        text-align: center;
        width: 120px;
    }
    .sfimagesTmbList img {
        vertical-align: middle;
    }


    Best wishes,
    Stanislav Velikov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  12. Jules
    Jules avatar
    65 posts
    Registered:
    20 Jul 2005
    07 Sep 2011
    Link to this post
    Ok. That worked. But when you say "resolved in the upper versions," what do you mean? I'm running SF 4.2.....
  13. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    07 Sep 2011
    Link to this post
    Hi Julia,

    I am happy to hear you resolved it. I have seen this error when a project was upgraded to Sitefinity 4.1, but not to Sitefinity 4.2. Excuse me for this I was unaware this was still an issue.

    Best wishes,
    Stanislav Velikov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  14. Jörg
    Jörg  avatar
    16 posts
    Registered:
    17 Mar 2009
    17 Sep 2011
    Link to this post
    I also have the same issue.
    The provides CSS works only for newer browsers. When running IE8 in compatability mode, the bullets will still show.
  15. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    21 Sep 2011
    Link to this post
    Hi Jörg ,

    Which version of Sitefinity are you using? In the latest release 4.2 it displays properly in IE8 and IE7. Can you check a project where you have a functional image gallery(new project created with project manager). And see if the css is the same as the one you have added.

    Best wishes,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  16. Jörg
    Jörg  avatar
    16 posts
    Registered:
    17 Mar 2009
    22 Sep 2011
    Link to this post
    Hi Stanislav

    I have version 4.2.1650.0 (Community Edition) and without adding

    .sfimagesTmbList .sfimagesTmb { height: 120px; overflow: hidden; padding: 10px; width: 120px; float: left; display: inline-block; }

    .sfimagesTmbList a { height: 120px; overflow: hidden; text-align: center; width: 120px; display: block; }

    .sfimagesTmbList img { vertical-align: middle; border: 1px #000 solid; }


    To my own stylesheet the image list does not show correctly in IE9 (compatability mode), IE8 (compatability mode),  Firefox 3.6.13 and also Safari 5.0.2.

    You can see the result at http://www.yeah-ha.com/albums/public where I currently have disabled my own style additions. (I will uncomment them again in a few days.)

    Joerg



  17. Jules
    Jules avatar
    65 posts
    Registered:
    20 Jul 2005
    22 Sep 2011
    Link to this post
    Same for me. Same version SF and same browser issues.
  18. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    26 Sep 2011
    Link to this post
    Hi Julia,

    The problems you experience should be caused by using the gallery widget on a page that uses a custom theme. Make sure you add the gallery css to the theme css files or place it in a css widget.
    This happens because the image gallery widget loads its css from sitefinty default frontend theme which by default is assigned to every template. Removing the theme loads no css to a page and so the gallery is displayed as list. You can observe the problem by going to a random template and selecting "no theme" as currently selected theme.

    Regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  19. Jules
    Jules avatar
    65 posts
    Registered:
    20 Jul 2005
    26 Sep 2011
    Link to this post
    I'm a little mystified as to why this one widget would fail to have its CSS when I use my theme when every other widget I've used so far has properly loaded CSS.

    Will this be fixed in a future release? If so, any idea which one?
  20. Jörg
    Jörg  avatar
    16 posts
    Registered:
    17 Mar 2009
    26 Sep 2011
    Link to this post
    I would also say, that this is a bug.
    As probably 99.9% of all sites will use a custom theme, Telerik cannot be serious to expect the developers to include the lightbox specific CSS on their own.
  21. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    28 Sep 2011
    Link to this post
    Hi Jörg ,

    Every widget in Sitefinity uses some sort of styling that is located in the default frontend theme. When the frontend theme is removed with a blank theme or other not containing these classes.
    You can add the styles from the default frontend theme specifically for the gallery go to Sitefinity SDK Content/Resources/BasicFrontendTheme and navigate to the styles folder.

    If the styles are embedded to the widget when it is dropped to a page restyling it will require to add the same classes and use "!important" to ignore the one loaded by default.


    Greetings,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  22. Ruben
    Ruben avatar
    10 posts
    Registered:
    02 May 2011
    15 Dec 2011
    Link to this post
    Hi Telerik,

    We are having a similar problem with the image gallery. Only our image gallery is of the type Thumbnail strip + image on samepage. We are using Sitefinity 4.1.1339.0.
    The Image Gallery is working in the backend, but not in the front end. We are using a custom frontend CSS. Probably we are missing some Stylesheet declarations and some script file. Because the page is complaining that Object doesn't support property or method 'galleria'.

    I have attached screenshots to see the difference between backend and frontend. In the front, the images are just placed next to each other.

    Please provide a solution for this, because just we use our own css should not mean we have no access to the standard image gallery.
  23. Ruben
    Ruben avatar
    10 posts
    Registered:
    02 May 2011
    19 Dec 2011
    Link to this post
    I need an answer from the people from Telerik on this problem.

    Please answer the above question...
  24. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    05 Dec 2016
    20 Dec 2011
    Link to this post
    Hello Ruben,

    The problem shouldn`t be in the css classes (as from the description), but in the javascript loaded on the page since the image is displayed properly, but the script that is aligning and resizing the images is conflicting with another script on the page.
    Can you do a test by placing the gallery widget with the same settings on a page without a template (start form scratch) and check if you stilll get the same behaviour. If yes the problem should be coming from Sitefinity 4.1.1339 release which had such problems and the easiest fix I can offer is to test on a backup of the project to upgrade to some of the service packs for Sitefinity 4.1.

    If you don`t have a problem with the test page then a script loaded from the master page template or javascript widget should be causing this. Since the gallery is using jQuery I suggest using jQuery.noConflict().

    Kind regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  25. Ruben
    Ruben avatar
    10 posts
    Registered:
    02 May 2011
    20 Dec 2011
    Link to this post
    Hi Stanislav,
    Thanks for your informing reply.

    In a 'clean' page without a template, the image gallery worked as expected. So it had to be one of the scripts I registered in my masterpage. When deleting the jquery library itself from the RadScriptManager, the image gallery worked, and all my custom jQuery controls also kept working.

    Thanks for your solution!

    Ruben Meintema
25 posts, 0 answered