This is a migrated thread and some comments may be shown as answers.

ImageGallery hanging on image transistion

11 Answers 303 Views

ImageGallery

This is a migrated thread and some comments may be shown as answers.

Chase asked on 04 Sep 2014, 04:34 PM

I have a pretty basic image gallery right now, using the following code:

<telerik:RadImageGallery runat="server" Width="300px" Height="300px" LoopItems="true" ID="rigFeaturedNews" >

<ImageAreaSettings Width="300px" Height="300px" />

<ToolbarSettings ShowFullScreenButton="false" ShowSlideshowButton="false" ShowThumbnailsToggleButton="false" />

</telerik:RadImageGallery>

I have added two images to the gallery using code behind. On loading the page, the first image displays just fine. At the bottom, the thumbnails for both images are displayed. However, when I click the "next" button, or click on the thumbnail for the second picture, the loading spinner pops up, and the image grays, but the second image never loads.

Any idea what could be causing this?

11 Answers, 1 is accepted

answered on 18 Sep 2014, 03:34 PM

Good to know about DNN.

I pulled the RadImageGallery out into its own project and put it as the only control on a Web Forms page. I'm having the same issue - except now the spinner isn't displaying either. The thumbnails are loading correctly, and the caption text is loading correctly.

Here's the way I'm setting this in the code behind, maybe that's the issue:

foreach (Article article in articles)

{

ImageGalleryItem articleItem = new ImageGalleryItem();

articleItem.Description = article.ArticleIntro;

articleItem.ImageDataValue = article.ArticleImageBytes.ToArray();

rigFeaturedNews.Items.Add(articleItem);

}

The "article.ArticleImageBytes()" field is pulled from a database, where we have images stored in binary format.

The first image is loading correctly.

answered on 26 Sep 2014, 02:57 PM

Here is the markup:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<telerik:RadScriptManager runat="server" />

<telerik:RadImageGallery runat="server" Width="970px" Height="400px" OnNeedDataSource="rigFeaturedNews_NeedDataSource" DataDescriptionField="ArticleIntro"

DataImageField="ArticlePreviewImage" DataTitleField="ArticleTitle" LoopItems="true" ID="rigFeaturedNews" >

<ToolbarSettings ShowFullScreenButton="false" ShowSlideshowButton="false" ShowThumbnailsToggleButton="false" />

<ThumbnailsAreaSettings Mode="ImageSliderPreview" />

</telerik:RadImageGallery>

</body>

</html>

and the code behind:

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

private static DataTable getAllFeaturedArticlesAsDataTable()

{

LSCollegeNewsDataContext newsContext = new LSCollegeNewsDataContext();

var featured = (from a in newsContext.Articles

where a.ArticleIsFeatured == true

select new { a.ArticlePreviewImage, a.ArticleIntro, a.ArticleTitle });

return ToDataTable(newsContext, featured);

}

private static DataTable ToDataTable(System.Data.Linq.DataContext ctx, object query)

{

if (query == null)

{

throw new ArgumentNullException("query");

}

IDbCommand cmd = ctx.GetCommand(query as IQueryable);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = (SqlCommand)cmd;

DataTable dt = new DataTable("sd");

try

{

cmd.Connection.Open();

adapter.FillSchema(dt, SchemaType.Source);

adapter.Fill(dt);

}

finally

{

cmd.Connection.Close();

}

return dt;

}

protected void rigFeaturedNews_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e)

{

rigFeaturedNews.DataSource = new DataView(getAllFeaturedArticlesAsDataTable());

}

answered on 30 Sep 2014, 02:10 PM

So I got it working - for some reason using a list as a DataSource in the NeedDataSource event handler worked :

var featured = from a in newsContext.Articles

where a.ArticleIsFeatured == true

select new

{

a.ArticleIntro,

ArticlePreviewImage = a.ArticlePreviewImage.ToArray(),

ArticleImage = a.ArticleImage.ToArray(),

a.ArticleTitle,

};

rigFeaturedNews.DataSource = featured.ToList();

A little bizarre but glad it's working. Thanks!