Image galleries; Lightbox script not working

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?

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

I'll PM you a link. Thanks.

Actually, can you just provide an example of the link to the fancybox script?

Hello John,

The fancybox script is attached.

Greetings,
Jordan
the Telerik team

Place this in the 'scripts' folder?

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

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

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

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.)

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.

Ok. That worked. But when you say "resolved in the upper versions," what do you mean? I'm running SF 4.2.....

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

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.

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

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;

Same for me. Same version SF and same browser issues.

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

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?

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.

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

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.

I need an answer from the people from Telerik on this problem.

Please answer the above question...

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

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