Galleria js on Custom Module

Posted by Community Admin on 04-Aug-2018 06:46

Galleria js on Custom Module

All Replies

Posted by Community Admin on 25-Jul-2011 00:00
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.
Posted by Community Admin on 27-Jul-2011 00:00
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
Posted by Community Admin on 27-Jul-2011 00:00
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?
Posted by Community Admin on 29-Jul-2011 00:00
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
Posted by Community Admin on 11-Aug-2011 00:00
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
Posted by Community Admin on 15-Aug-2011 00:00
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
Posted by Community Admin on 15-Aug-2011 00:00
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
Posted by Community Admin on 15-Aug-2011 00:00
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
Posted by Community Admin on 15-Aug-2011 00:00
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?
Posted by Community Admin on 17-Aug-2011 00:00
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
Posted by Community Admin on 18-Aug-2011 00:00
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
Posted by Community Admin on 27-Oct-2011 00:00
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?
Posted by Community Admin on 13-Dec-2011 00:00
I have faced this problem. Can anyone write the solution of this?
Posted by Community Admin on 10-Feb-2012 00:00
Same problem here...
Posted by Community Admin on 14-Feb-2012 00:00
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
This thread is closed