Lightbox image being loaded into same page

Hi

I'm using the lightbox option in the image gallery and the image is loading in underneath my current site layout on the same page... any ideas why this is happening?

Thanks...

Cheers
Richard

Hello Richard,

This looks like as an issue with the z-index or you are applying some css classes that overay the div used by LightBox.

All the best,
Ivan Dimitrov
the Telerik team

Hi Ivan

I've used the css from the sdk hospital theme, just to get the css elements identified:

.sfLightboxMode li.sfimagesTmb

    position: relative;
    float: left;
    margin: 5px;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    list-style: none;
    list-style-type: none;

.sfLightboxMode li.sfimagesTmb a

    display: block;
    position: relative;
    float: left;
    border: 5px solid #efefef;
    width: 76px;
    height: 76px;
    overflow: hidden;

.sfLightboxMode li.sfimagesTmb a:hover border: 5px solid #d5d5d5;
.sfLightboxMode li.sfimagesTmb a img padding: 0;

Anything there look dodgy?

Thanks...

Cheers
Richard

Hi Richard,

Is there a demo/live page that we can see what is going wrong with the LigthBox.

Regards,
Ivan Dimitrov
the Telerik team

Here we are:

http://cms.fulcrum.smarterworks.co.uk/clients/case-studies/the-papal-visit-cofton-park

Thanks

Cheers
Richard

Hi Richard,

I am getting 404 error when I try to access the link. Can you update it please?

Kind regards,
Ivan Dimitrov
the Telerik team

Hi Ivan

Should be ok now... you managed to pick the 5mins where I stopped IIS7 to copy the site across! :-)

Thanks

Cheers
Richard

Hi

Please can this be looked at asap. I think my master page might be missing the javascript reference. I have copied the instructions for creating a template from a master page that yiou have published. Can you check that this is correct and will bring in the scripts... the script bit under the form tag doesn't have a closing tag, is this right, can you check through and let me know... that page is stil up there for you to look at.

Thanks

Cheers
Richard

Hi

More checking and it works ok in the site when using one of your templates, but when using the template I created based on a master page it doesn't, what am I missing from the master page that means it doesn't work?

Thanks

Cheers
Richard

Hi Richard Cross,

The path to the CSS file of the lightbox (fancybox) is incorrect. Now it is pointing to

cms.fulcrum.smarterworks.co.uk/.../fancybox.css

and it should be

cms.fulcrum.smarterworks.co.uk/.../fancybox.css

Hi Jordan

I haven't done anything with linking style sheets, I'm only using the main.css in the Global folder, this must all be automatically done by Sitefinity. Sitefinity is obviously providing the current link to the wrong folder, how do I tell it to go somewhere different? Sitefinity has put the style sheet in that folder and given the wrong link. Obviously this is something that will have to be changed for a future release. I can't alter the path as this is generated automatically so I will have to move the file, will this follow through what you will do in a future release?

Thanks

Cheers
Richard

Update.... I don't have a Styles folder, how can I get Sitefinity to look in the CSS folder as you say?

Hello Richard Cross,

On you server there is a file

http://cms.fulcrum.smarterworks.co.uk/Sitefinity/WebsiteTemplates/TEMPLATE001/App_Themes/THEME001/css/fancybox.css

You just need to create a folder called Styles in .../App_themes/THEME001/ and move this file in it.
--------------------------------------------------------------------------------------------------------

The CSS of the fancybox is included by default with the default theme. If you want to use the built-in fancybox functionality with your custom theme you need this file in the Styles folder.

Thanks Jordan

Understood... the three folders detailed in your custom theme instructions are, Global, CSS and Images. Is this incorrect then? Should CSS be Styles? Will it change to this for future releases or is this an additional folder that custom themes require?

Thanks

Cheers
Richard

Hi Jordan

Nope, still not working I'm afraid...

Cheers
Richard

Hello Richard Cross,

I have change the path in your html with Firebug  ("styles" to "css") and everything works fine - see the attached screenshot. You should only add the fancybox images in you images folder.

The "styles" path won't be changed. If you don't want to use this name you can change the path from your template - see the second screenshot (edit_template.jpg).

All the best,
Jordan
the Telerik team

Hi Jordan

Thank you so much, but this isn't making any sense...

1. I have changed the Lightbox template to CSS/Fanybox.css and it doesn't work with my template after the page has been rendered.
2. I have a test page without my masterpage, but based on one of your layouts and that works with both CSS/Fancybox.css and Styles/Fancybox.css when I change the Lightbox template

It must be something that is happening on the fly when the page is generated, do you think? It obviously works for you if you change the code after the page has been generated...

In the top row of the instaructions for what to have in a .master page to use with Sitefinity it has Inherits"App_Master_MasterPage2" %> I have Inherits"Masterpage2" %> I don't have the App_Master in there. Would this make a difference?

If I change it, will it break my template and I lose all my templates based on my .master page, and layouts, placeholders and content?

Any more ideas?

Cheers
Richard

Hi Richard Cross,

This sounds as a strange problem. Can you point the template to the css folder or move the file in the Styles folder on the server (the live link that you provided us earlier). It will be easier to track the problem.

There are several ways to get this work:

1. To copy the CSS rules in your global folder and remove the path from the fancybox template
2. To point to the CSS file directly from your master page or inside the layout template (the CSS widget)
3. To import the fancybox's CSS file in your main.css file with @import...there are many workarounds

Hi Jordan

Getting there now.... Sorry it was a permissions on the folder/file and copied and pasted and it didn't take the permissions with it... sorry for the red herring. It is now working in both folders! But.... I now dodn't get the forward/back/close icons on the pictures... any ideas?

I still think there is an inconsitency with being told to create a 'CSS' folder in the template creation instructions where as the fancybox.css is being looked for in a 'Styles' folder that we don't get told to create, does this seem right?

Which one is correct and will be in the upgrades moving forward; 'CSS' as per template instructions or 'Styles' as called for by the Lightbox effect, or both?

Cheers
Richard

Hi Richard Cross,

We are using minimized version of fancybox. Here is the CSS and the image that is used in the default template.


Kind regards,
Jordan
the Telerik team