Galleria slideshow control: Loading gallery images from a varbinary database field to an ASP.NET page

Question

I am trying to load from a SQL Server database the gallery images of the Galleria slideshow control http://galleria.io/. I have placed my Galleria control in an ASPX page.

I am trying the ListView solution recommended in an old post: Using Galleria jQuery plugin with an asp.net ListView but it's not working. Does anyone know if it is indeed possible to load images to the Galleria control from a database? If so, what data type does the image field need to have? I tried both varbinary (the actual image) and also nvarchar (just the path of the image), none of those work. The page just hungs.

Here is my ASPX code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Aircraftpedia_GalleriaDB.aspx.cs" 
Inherits="Library_Aircraftpedia_GalleriaDB" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="../_js/slider_jQueryUI/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="../_js/galleria/galleria-1.2.7.min.js"></script> 
    </head> 
    <body> 
<asp:SqlDataSource ID="dsSelectAllAircraftpedia" runat="server" ConnectionString="<%$    ConnectionStrings:MYDB%>" 
SelectCommand="cda_Aircraftpedia_SelectAll" SelectCommandType="StoredProcedure" 
ProviderName="<%$ ConnectionStrings:MYDB.ProviderName %>"></asp:SqlDataSource> 
<asp:ListView runat="server" ID="lvw"> 
<LayoutTemplate> 
    <div id="gallery"> 
        <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder> 
    </div> 
</LayoutTemplate> 
<ItemTemplate> 
    <img id="photoAlbumPhotos" src='<%# Eval("AcImage") %>' alt="Image Not Found"     class="photoAlbumPhotos" /> 
</ItemTemplate> 
</asp:ListView> 
<script type="text/javascript"> 
$(document).ready(function () { 
    Galleria.loadTheme('../_js/galleria/themes/classic/galleria.classic.min.js'); 
    $("#gallery").galleria({ 
        width: 700, 
        height: 500 
    }); 
});          
</script> 
</body> 
</html>

And my C# code:

protected void Page_Load(object sender, EventArgs e)
{
    this.lvw.DataSource = this.dsSelectAllAircraftpedia;
    this.lvw.DataBind();
}

Please let me know if you have any ideas on how to make this code work or if you have another solution to recommend.

Thank you.

score 0 · Answer 1 · answered Jun 11 '12 at 18:12

I'm the author, so this is certainly biased, but I think you should check out the http://imageresizing.net/ project. It offers a SQL integration plugin that should let you serve SQL blobs very efficiently with disk caching, and only takes a few minutes to set up.

As a bonus, it will let you easily resize all the images to fit a certain set of constraints, which can be very handy.

Galleria slideshow control: Loading gallery images from a varbinary database field to an ASP.NET page

1 Answers1