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

Forums / Developing with Sitefinity / Galleria js on Custom Module

Galleria js on Custom Module

15 posts, 0 answered
  1. Augus
    Augus avatar
    34 posts
    Registered:
    29 Mar 2011
    25 Jul 2011
    Link to this post
    Hello,
    I'm creating a custom module which inside it contain an image gallery using Galleria js.  I'm aware that in Sitefinity Image Gallery widget is using Galleria.js too, if we choose "Thumbnail strip + Image on the same page" gallery type.

    Right now my gallery in custom module only working fine if i'm adding the sitefinity image gallery widget with "Thumbnail strip + Image on the same page". if using my own js i'm always get "Galleria() is not a function" error on firebug. i'm suspecting wrong way to include the js.

    my question is, can i reuse that library for my custom module? as i had difficulty using my own js.
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    21 Aug 2017
    27 Jul 2011
    Link to this post
    Hi Augus,

    To use the Garlleria.js can be used in your module by adding the .js and setting its build action to EmbeddedResource. Then in AssemblyInfo.cs add
    [assembly: WebResource("Assembly_Name.Folder_Path.Galleria.js", "application/x-javascript")]
    // refer to how the .js files are registered in Products module
    Use the Gallery in your frontend .ascx file.

    Yes you can reuse the built in galleria.js. You can find the script reference to it in Administration->Settings->Advanced->Pages->Script Manager -> Script References.

    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
  3. Augus
    Augus avatar
    34 posts
    Registered:
    29 Mar 2011
    27 Jul 2011
    Link to this post
    Hi Velikov,

    Thanks for the answer, my problem is galleria need theme that load like this
    Galleria.loadTheme('/js/galleria.classic.js');
    

    and i not sure how to change it into using embedded js.
    if i'm reusing the build-in galleria do i need to load the galleria theme also?
  4. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    21 Aug 2017
    29 Jul 2011
    Link to this post
    Hello Augus,

    You need to load the theme too. To set a .js file to embedded resource refer to the screenshot. And add it to AssemblyInfo.cs
    [assembly: WebResource("ScriptViewControl.Resources.MyControl.js", "application/x-javascript")]
    ScriptViewControl ---- is name of the Assembly(your project name)
    Resources ------ folder where I save sripts

    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
  5. Augus
    Augus avatar
    34 posts
    Registered:
    29 Mar 2011
    11 Aug 2011
    Link to this post
    Hello Velikov,
    sorry for late response. yes i'm aware how to make it as embedded resource. what i didn't know is how to call it after embedded it.

    if we are using non embedded js, we can use this.
    Galleria.loadTheme('/js/galleria.classic.js');

    but this line surely is not working
    Galleria.loadTheme('<%=WebResource("Sitefinity.Framework.Resources.Modules.galleria.classic.js")%>');

    please enlighten me.

    Thanks

    Augus
  6. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    21 Aug 2017
    15 Aug 2011
    Link to this post
    Hello Augus,

    Use JavaScriptEmbedControl. Note RadScriptManager (which is called by Sitefinity when embedding external files) first tries to load scripts coming from relative paths, then scripts from embedded resources, and finally from CDN. Have this in mind when calling the same embedded and relative .js files they will eventually both get loaded and this might cause errors.
    <sf:JavaScriptEmbedControlrunat="server"ID="jQueryLink"ScriptEmbedPosition="Head"
    </sf:JavaScriptEmbedControl>
    <sf:JavaScriptEmbedControlrunat="server"ID="jQueryUILink"ScriptEmbedPosition="Head"
    </sf:JavaScriptEmbedControl>
    <sf:JavaScriptEmbedControlrunat="server"ID="JavaScriptEmbedControl6"Url="~/RTC_Scripts/series.js"
        ScriptEmbedPosition="Head">
    </sf:JavaScriptEmbedControl>
    <sf:JavaScriptEmbedControlrunat="server"ID="JavaScriptEmbedControl5"Url="~/RTC_Scripts/jquery.anythingslider.js"
        ScriptEmbedPosition="Head">
    </sf:JavaScriptEmbedControl>


    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
  7. Augus
    Augus avatar
    34 posts
    Registered:
    29 Mar 2011
    15 Aug 2011
    Link to this post
    Hello Velikov,

    thanks for the reply,
    but how do you call embedded javascript using JavaScriptEmbedControl? should i change the Url property with ResourceAssemblyInfo property?

    i'll explain again maybe i weren't very clear last post.
    i'm already have this code in my template.ascx
    01.<sitefinity:ResourceLinks id="resourcesLinks" runat="server">
    02.    <sitefinity:ResourceFile JavaScriptLibrary="JQuery"/>
    03.    <sitefinity:ResourceFile Name="Sitefinity.Framework.Resources.Modules.GenericLists.WidgetTemplates.Frontend.galleria-1.2.4.js" AssemblyInfo="Sitefinity.Framework.Modules.GenericLists.Widgets.Frontend.PageList,Sitefinity.Framework" Static="true" />
    04.    <sitefinity:ResourceFile Name="Sitefinity.Framework.Resources.Modules.GenericLists.WidgetTemplates.Frontend.galleria.classic.js" AssemblyInfo="Sitefinity.Framework.Modules.GenericLists.Widgets.Frontend.PageList,Sitefinity.Framework" Static="true" />
    05.    <sitefinity:ResourceFile Name="Sitefinity.Framework.Resources.Modules.GenericLists.WidgetTemplates.Frontend.galleria.classic.css" AssemblyInfo="Sitefinity.Framework.Modules.GenericLists.Widgets.Frontend.PageList,Sitefinity.Framework" Static="true" />
    06.</sitefinity:ResourceLinks>
    07. 
    08.<sitefinity:ResourceLinks id="resourcesLinks2" runat="server">
    09.    <sitefinity:ResourceFile Name="Sitefinity.Framework.Resources.Modules.GenericLists.WidgetTemplates.Frontend.PageList.js" AssemblyInfo="Sitefinity.Framework.Modules.GenericLists.Widgets.Frontend.PageList,Sitefinity.Framework" Static="true"/>
    10.</sitefinity:ResourceLinks>

    sitefinity:ResourceLinks id="resourcesLinks"  contains Jquery, Galleria.js, Galleria.Classic.js and Galleria.Classic.css.
    sitefinity:ResourceLinks id="resourcesLinks2" contains my $(window).load function (to fire up the galleria js)

    here's the function

    1.$(window).load(function () {
    2.    Galleria.loadTheme('/js/galleria.classic.js');
    3.    $(".image-gallery").galleria({
    4.        width: 500,
    5.        height: 500
    6.    });
    7.});

    as you can see the Galleria.loadTheme('/js/galleria.classic.js'); is still using the relative javascript file.
    i want to change this code to use the embedded Galleria.Classic.js file that i included in sitefinity:ResourceLinks id="resourcesLinks".
    is that possible?

    Best Regards,

    Augus Hartato
  8. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    21 Aug 2017
    15 Aug 2011
    Link to this post
    Hello Augus,

    I suggest you use
    <sf:JavaScriptEmbedControlrunat="server"ID="jQyeryLink"ScriptEmbedPosition="Head"ScriptType="JQueryGalleria"></sf:JavaScriptEmbe
    to reference the embedded galleria. This is the approach that will not cause errors or other script problems. You can review all embedded scripts for reference in Administration->Settings->Advanced->Pages->Script Manager->ScriptReferences.

    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
  9. Augus
    Augus avatar
    34 posts
    Registered:
    29 Mar 2011
    15 Aug 2011
    Link to this post
    Hi Velikov,

    i tried
    <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink1" ScriptEmbedPosition="Head" ScriptType="JQueryGalleria"></sf:JavaScriptEmbedControl>
    
    and it just print like this on HTML body

    <span id="BodyContainer_C017_ctl00_jQyeryLink1" ScriptType="JQueryGalleria"></span>
    <span id="BodyContainer_C017_ctl00_jQyeryLink2" ScriptType="JQueryGalleriaClassicTemplate"></span>
    
    is there something i do wrong?
    
  10. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    21 Aug 2017
    17 Aug 2011
    Link to this post
    Hello Augus,

    Can you try using javascriptembedcontrol like:
    <sf:JavaScriptEmbedControlrunat="server" ID="jQueryUILink" ScriptEmbedPosition="Head"
        Url="Telerik.Sitefinity.Resources.Scripts.galleria.classic.js">
    </sf:JavaScriptEmbedControl>
    Alternatively you can use the resource file:
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.galleria.classic.js"></sf:ResourceFile>


    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
  11. Augus
    Augus avatar
    34 posts
    Registered:
    29 Mar 2011
    18 Aug 2011
    Link to this post
    Hello Velikov,

    umm no luck
    i tried
    1.<sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="Telerik.Sitefinity.Resources.Scripts.galleria.js" ></sf:JavaScriptEmbedControl>
    2.   <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink1" ScriptEmbedPosition="Head" Url="Telerik.Sitefinity.Resources.Scripts.galleria.classic.js" ></sf:JavaScriptEmbedControl>

    firebug gave me erorrs
    1."NetworkError: 404 Not Found - http://localhost:8080/Telerik.Sitefinity.Resources.Scripts.galleria.classic.js"
    2."NetworkError: 404 Not Found - http://localhost:8080/Telerik.Sitefinity.Resources.Scripts.galleria.js"

    tried this
    1.<sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.galleria.js" AssemblyInfo="Sumo.Sitefinity.Framework.Modules.GenericLists.Widgets.Frontend.PageList,Sumo.Sitefinity.Framework" Static="true" />
    2.    <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.galleria.classic.js" AssemblyInfo="Sumo.Sitefinity.Framework.Modules.GenericLists.Widgets.Frontend.PageList,Sumo.Sitefinity.Framework" Static="true" />

    but nothing happened. still get .galleria is not a function

    i'll try send my code to support ticket.

    Best Regards,

    Augus Hartato
  12. derek
    derek avatar
    37 posts
    Registered:
    15 Jun 2007
    27 Oct 2011
    Link to this post
    Hi guys,

    Is there any updates to this?

    I'm also trying to get Galleria working.  After spending a full day trying get around the fact that my existing code did not work only to find that jQuery, Fancybox and Galleria are all included in stock SF4.2.

    I'm now calling the scripts in our master page like this:
    <sf:ResourceLinks ID="ResourceLinks" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.jquery.fancybox-1.3.1.js" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.galleria.js" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.galleria.classic.js" />
    </sf:ResourceLinks>

    In a user control, we have some code that displays the galleria gallery:
    <div id="gallery">
        <asp:Repeater id="galleriaRepeater" runat="server">
            <ItemTemplate>
                <a class="grouped_elements" rel="group" href='<%# DataBinder.Eval(Container.DataItem, "Image") %>' ><img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' title='<%# DataBinder.Eval(Container.DataItem, "Name") %>' alt='<%# DataBinder.Eval(Container.DataItem, "AlternateText") %>'/></a>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <script type="text/javascript">
    $('#gallery').galleria({
        transition: 'fade',
        autoplay: 3000,
        width: 240,
        height: 162
    });
    </script>


    This code however throws an error in Firebug:
    Galleria._cssMap is undefined
    [Break On This Error] css: Galleria._cssMap["classic"] ?..."classic"] : 'galleria.classic.css',


    At this point, I'm a bit unsure of how to call load the galleria CSS. Is there a suggested method for accessing this?

    Another question would be, given that FancyBox is in the core javascript libraries, how do actually use it?
    Once again, it should be as simple as:
    <script type="text/javascript">
    $(document).ready(function() {
        $("a#single_image").fancybox();
    });
    </script>
    However, it looks like fancybox can't find the appropriate CSS files.
    Stanislav, do you have any ideas to get these to work?
  13. Ashraf Ahmed
    Ashraf Ahmed avatar
    2 posts
    Registered:
    13 May 2010
    13 Dec 2011
    Link to this post
    I have faced this problem. Can anyone write the solution of this?
  14. Guillermo Londono
    Guillermo Londono avatar
    4 posts
    Registered:
    24 Aug 2006
    10 Feb 2012
    Link to this post
    Same problem here...
  15. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    21 Aug 2017
    14 Feb 2012
    Link to this post
    Hi,

     To galleria has 3 files used in Sitefinity (galleria.classic.js, galleria.history.js, galleria.js)
    Reference them in the template (.ascx)

    <%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    <
    sitefinity:ResourceLinks id="resourcesLinks" runat="server">
        <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.galleria.js" Static="true" />
    </sitefinity:ResourceLinks>

    Another option is to load the gallery script on the master page template used to create Sitefinity page where you need the gallery.

    Another way to load the gallery is with javascriptembedcontrol:
    <sf:JavaScriptEmbedControl runat="server" ID="jQueryLink" ScriptEmbedPosition="Head"
        
    </sf:JavaScriptEmbedControl>
        
    <sf:JavaScriptEmbedControl runat="server" ID="jQueryUILink" ScriptEmbedPosition="Head"
        
    </sf:JavaScriptEmbedControl>
        
    <sf:JavaScriptEmbedControl runat="server" ID="JavaScriptEmbedControl6" Url="~/RTC_Scripts/series.js"
        
        ScriptEmbedPosition ="Head">
        
    </sf:JavaScriptEmbedControl>
        
    <sf:JavaScriptEmbedControl runat="server" ID="JavaScriptEmbedControl5" Url="~/RTC_Scripts/jquery.anythingslider.js"
        
        ScriptEmbedPosition="Head">
        
    </sf:JavaScriptEmbedControl>
    It can load scripts from relative path and from web resource. It can also be used on master pages.

    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
15 posts, 0 answered