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

Forums / Developing with Sitefinity / Using Fancybox 2.x for Galleries

Using Fancybox 2.x for Galleries

6 posts, 0 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    09 Oct 2013
    Link to this post
    Good Day

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

    http://www.fancyapps.com/fancybox/ 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
  2. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    10 Oct 2013
    Link to this post
    @Telerik
    @all

    Anyone?

    Markus
  3. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    14 Oct 2013
    Link to this post
    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
  4. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    16 Oct 2013 in reply to Svetoslav Manchev
    Link to this post
    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
  5. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    17 Oct 2013 in reply to Markus
    Link to this post
    Dear Svetoslav

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

    http://demos.telerik.com/aspnet-ajax/lightbox/examples/overview/defaultcs.aspx

    Markus
  6. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    21 Oct 2013
    Link to this post
    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
6 posts, 0 answered