Using Fancybox 2.x for Galleries

Posted by Community Admin on 09-Oct-2013 00:00

Good Day

A client of mine wants a slide show functionality on the gallery.

www.fancyapps.com/.../ has this functionality

Now SF does still (again) use 1.x version of fancybox due to compatibility (license) issues. I don't mind buying a license but need some advice how to best switch from 1.x to 2.x

I thought of simply create a new Widget under Admin - Design - Widget Templates but

a) I still cannot choose different templates in the gallery widget
b) Even if I could I probably have some conflicts SF loading 1.x and me loading 2.x

Any advice on how to approach this the easiest way?

Markus

Posted by Community Admin on 10-Oct-2013 00:00

@Telerik
@all

Anyone?

Markus

Posted by Community Admin on 14-Oct-2013 00:00

Hi Marcus,

I first want to start with the fact that using a newer version of the galleria plug-in hasn't been officially tested, so we cannot guarantee that it will work as expected. However, you can try replacing the script the following way:

1. Set all the .js and .css files Build action to Embedded Resource.

2. Change the paths to the files like so (please note that those paths are according to setup where we have dropped the files in the root of my project):

internal const string GalleriaJs = "SitefinityWebApp.galleria-1.2.9.min.js";

internal const string GalleriaClassicTemplateJs = "SitefinityWebApp.galleria.classic.min.js";

internal const string GalleriaClassicCss = "SitefinityWebApp.galleria.classic.css";

3. Place the following code instead of the one you are using (change the paths as described above):

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Configuration;

using Telerik.Sitefinity.Libraries.Model;

using Telerik.Sitefinity.Modules.Libraries.Web.UI.Images;

using Telerik.Sitefinity.Web.Configuration;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity.Web.UI.ContentUI.Contracts;

using Telerik.Web.UI;

using Telerik.Sitefinity.Resources;

namespace SitefinityWebApp

public class CustomProjectThumbnailStripView : MasterThumbnailStripView

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var descriptor = new ScriptControlDescriptor(typeof(MasterThumbnailStripView).FullName, this.ClientID);

ClientScriptManager scriptManager = this.Page.ClientScript;

descriptor.AddProperty("_galleriaTemplateUrl", scriptManager.GetWebResourceUrl(typeof(CustomProjectThumbnailStripView), CustomProjectThumbnailStripView.GalleriaClassicTemplateJs));

descriptor.AddProperty("_imagesContainerId", this.ImagesContainer.ClientID);

descriptor.AddProperty("_thumbnailsWidth", this.ThumbnailsWidth);

descriptor.AddProperty("_thumbnailsHeight", this.ThumbnailsHeight);

descriptor.AddProperty("_canvasHeight", this.CanvasHeight);

var galleriaCssUrl = scriptManager.GetWebResourceUrl(typeof(CustomProjectThumbnailStripView), CustomProjectThumbnailStripView.GalleriaClassicCss);

descriptor.AddProperty("_galleriaCssUrl", galleriaCssUrl.Remove(0, 1)); // removing the leading /

if (this.EnablePrevNextLinks.HasValue)

descriptor.AddProperty("_enablePrevNextLinks", this.EnablePrevNextLinks);

return new[] descriptor ;

public override IEnumerable<ScriptReference> GetScriptReferences()

var scripts = new List<ScriptReference>(base.GetScriptReferences());

// removing the already used script

var galleriaScript = scripts.Where(s => s.Name == "Telerik.Sitefinity.Resources.Scripts.galleria.js").SingleOrDefault();

scripts.Remove(galleriaScript);

// referencing the new one

scripts.Add(new ScriptReference(CustomProjectThumbnailStripView.GalleriaJs, typeof(CustomProjectThumbnailStripView).Assembly.FullName));

return scripts.ToArray();

//

internal const string GalleriaJs = "SitefinityWebApp.galleria-1.2.9.min.js";

internal const string GalleriaClassicTemplateJs = "SitefinityWebApp.galleria.classic.min.js";

internal const string GalleriaClassicCss = "SitefinityWebApp.galleria.classic.css";

4. Go to SitefinityWebApp->Properties->AssemblyInfo.cs and open the file. In it paste the following:

[assembly: WebResource("SitefinityWebApp.galleria-1.2.9.min.js", "application/x-javascript")]

[assembly: WebResource("SitefinityWebApp.galleria.classic.min.js", "application/x-javascript")]

[assembly: WebResource("SitefinityWebApp.galleria.classic.css", "text/css", PerformSubstitution = true)]

Adjust the highlighted paths according to your folder setup.

5. Build and run the project.

6. Replace the view: under Administration -> Settings -> Advanced -> ContentView -> Controls -> ImagesFrontend -> ImagesFrontendThumbnailsListStrip -> ViewType and replace the viewtype with your custom type: SitefinityWebApp.CustomTool.CustomProjectThumbnailStripView

Now all the scripts should be properly registered and you should not get any errors in the console tab of the browser.

However as we have tested this on our end we have reached to the following message from the widget - image. We cannot provide any solution to this as it is caused by the JavaScript itself (third party code) which cannot load its CSS.

Regards,
Svetoslav Manchev
Telerik

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

Posted by Community Admin on 16-Oct-2013 00:00

Dear Svetoslav

Thanks' for the detailed answer. Thats a whole lot of steps to be taken. Considering version 2.x was used once in sitefinity.

Markus

Posted by Community Admin on 17-Oct-2013 00:00

Dear Svetoslav

Just wondering if there were any discussions yet to switch to inhouse solution in 6.3?

demos.telerik.com/.../defaultcs.aspx

Markus

Posted by Community Admin on 21-Oct-2013 00:00

Hello Markus,

Including of RadLightBox control in the next version of Sitefinity is under consideration. Once there is information about the next version, it will be published at Sitefinity roadmap.

Regards,
Svetoslav Manchev
Telerik

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

This thread is closed

All Replies