More in this section

Forums / Developing with Sitefinity / Galleria.io and sitefinity

Galleria.io and sitefinity

6 posts, 0 answered
  1. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    20 Sep 2012
    Link to this post
    I have bought a galleria plugin so that i can get the exact style of a gallery i want.
    But when i try to put it inside sitefinity it stops working.
    The images appear but no styles or java script works.

    Is it perhaps the way i point to the folder where the scripts are?
    I did this:
    <script src="galleria/galleria-1.2.8.min.js"></script>
    Perhaps i need to do it differently when inside sitefinity?

    Here is my code:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cintGallery.ascx.cs" Inherits="SitefinityWebApp.Widgets.cintGallery.cintGallery" %>
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=0.3">
            <title>Galleria Azur Theme</title>
            <style>
     
                /* Demo styles */
                .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;max-width:820px;margin:20px auto;}
     
                /* This rule is read by Galleria to define the gallery height: */
                #galleria{height:420px;}
     
            </style>
     
            <!-- load jQuery -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
     
            <!-- load Galleria -->
            <script src="galleria/galleria-1.2.8.min.js"></script>
     
        </head>
        <body>
            <div class="content">
                <div id="galleria">
                    <asp:ListView ID="images" runat="server">
                        <ItemTemplate>
                            <a href="<%#Eval("ThumbnailUrl")%>">
                                <img title="<%#Eval("Title")%>"
                                     alt="<%#Eval("Title")%>"
                                     src="<%#Eval("ThumbnailUrl")%>">
                            </a>
                        </ItemTemplate>   
                    </asp:ListView>
                </div>
            </div>
            <script>
     
            // Load the Azur theme
            Galleria.loadTheme('galleria/themes/azur/galleria.azur.min.js');
     
            // Initialize Galleria
            Galleria.run('#galleria');
     
        </script>
        </body>
    </html>
    using System;
    using System.Linq;
    using System.Collections.Generic;
    using Telerik.Sitefinity.Modules.Libraries;
    using Telerik.Sitefinity.Libraries.Model;
     
    namespace SitefinityWebApp.Widgets.cintGallery
    {
        public partial class cintGallery : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                LibrariesManager librariesManager = LibrariesManager.GetManager();
                Album album = librariesManager.GetAlbums().Where(a => a.Title == "Events 2010").FirstOrDefault();
                 
                images.DataSource = album.Images();
                images.DataBind();
            }
        }
    }

    Any advice would be welcome.
  2. Brett Whittington
    Brett Whittington avatar
    89 posts
    Registered:
    10 Aug 2012
    20 Sep 2012
    Link to this post
    This may or may not be true, but when I switched from 3.7 to 4.4, (I've converted to 5.1 since.) I had to put static files such as Images / CSS / Javascript files into the WebsiteTemplates folder found under App_Data/Sitefinity/ (Fullpath: App_Data/Sitefinity/WebsiteTemplates) .  You may have any folder structure you want under there.

    A good indication that this is what you need to do is using Fiddler or Firebug, is your Javascript file giving you a 404 error when it tries to load?  If it is, you probably need to put the javascript file in the folder I described above.  You can also load it using virtual pathing by loading via script manager.

    <asp:ScriptManager ID="ScriptManager" runat="server" LoadScriptsBeforeUI="true"  >
            <Scripts>
                <asp:ScriptReference  Path="~/Sitefinity/WebsiteTemplates/JavaScript/jquery-1.7.1.min.js" ScriptMode="Release" />
                <asp:ScriptReference Path="~/Sitefinity/WebsiteTemplates/Javascript/jquery.tools.min.js" ScriptMode="Release"/>
            </Scripts>
        </asp:ScriptManager>

  3. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    20 Sep 2012
    Link to this post
    Brett,

    When you move it to the folder you mentioned. How then do you refer to it?
    I moved it and tired just saying:  <script src="galleria/galleria-1.2.8.min.js"></script> 
    But it did not make any difference.

    Thanks
  4. Brett Whittington
    Brett Whittington avatar
    89 posts
    Registered:
    10 Aug 2012
    20 Sep 2012
    Link to this post
    See the code that I also sent.  You have to reference the JS so that it loads server side.  The code that I sent should modifiable to do what you want.
  5. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    21 Sep 2012
    Link to this post
    Thanks Brett.
    It still does not actually work. But you were right with regards to the script manager.
    I changed it to this:
    <asp:ScriptManager ID="ScriptManager" runat="server" LoadScriptsBeforeUI="false"  >
                <Scripts>
                    <asp:ScriptReference  Path="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ScriptMode="Release" />
                    <asp:ScriptReference  Path="~/galleria/galleria-1.2.8.min.js" ScriptMode="Release" />
                </Scripts>
            </asp:ScriptManager>
    and i am no longer getting a fidler error on the /galleria/galleria-1.2.8.min.js
    But it still does not work.
    Galleria also requires some additional code at the bottom of the page which is this:
    <script>
     
            // Load the Azur theme
            Galleria.loadTheme('galleria/themes/azur/galleria.azur.min.js');
     
            // Initialize Galleria
            Galleria.run('#galleria');
     
        </script>
    I tried hard coding it even to my local server to see if it would work like this:
    <script>
     
            // Load the Azur theme
                Galleria.loadTheme('http://localhost:50956/WDRBlue/galleria/themes/azur/galleria.azur.min.js');
     
            // Initialize Galleria
            Galleria.run('#galleria');
     
        </script>
    But nothing still. Also no more errors in fidler. So not really sure what to do now. :(

  6. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    21 Sep 2012
    Link to this post
    Wait, my bad. I was changing some settings on the LoadScriptBeforeUI.
    Put it back to true, and now it works when it is hard coded.
    Still a solution where i did not have to do that would be great.

    Anyone from the sitrefinity team?
6 posts, 0 answered