Galleria.io and sitefinity

Posted by Community Admin on 20-Sep-2012 00:00

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 */

.contentcolor:#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: */

#galleriaheight:420px;

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<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>

<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.

Posted by Community Admin on 20-Sep-2012 00:00

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>

Posted by Community Admin on 20-Sep-2012 00:00

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

Posted by Community Admin on 20-Sep-2012 00:00

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.

Posted by Community Admin on 21-Sep-2012 00:00

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. :(

Posted by Community Admin on 21-Sep-2012 00:00

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?

This thread is closed

All Replies