CYCLOMEDIA

• Name ImagePanel
• CSS Class Div : "CC_ImagePanel", Child Images: "CC_Image", Curretly Selected Image: "CC_Image Selected"
• Type Controls.Image

The ImagePanel allows you to group a collection of Images, either declared inline in the ASPX as Chan Images or added via one of the Add() method overloads. It's base uses include showing a selection of images to the user and automatic image-gallery creation.

Development versions of the ImagePanel have Javascript scrolling, and can even be styled as a DropDown selecter or a slideshow, as well as dedicated javascript objects to manipulate and hook to. For now the Panel merely shows its child images in an (optionally) overflowed DIV whilst exposing the Target property and CSS styling the selected image.

Like the Chan DropDown the ImagePanel does not hold its state across PostBacks, meaning you will usually have to populate it during Page_Init(), despite this it contains a suite of addition, removal and move functions.

Roadmap

• Impliment scrolling
• Proper server and client side object model, nice JS API would be good too.

ASPX

<table style="margin: 0 auto" >
    <tr>
    <td>
        <Chan:ImagePanel runat="server" id="ipl" target="imgTarget" />
    </td>
    <td style="vertical-align: middle;" >
        <Chan:Image runat="server" id="imgTarget" />
    </td>
    </tr>
</table>
	

C#

using System;
using Chan;

namespace MySite
{
    public class MyPage : Chan.Page
    {
        protected Chan.Controls.ImagePanel ipl;
        
        public override void Page_Init()
        {
            // populate the image panel, you could do this from
            // a database, for example
            ipl.Add( "thumbs/apple.png" , "images/apple.png" );
            ipl.Add( "thumbs/banana.png" , "images/banana.png" );
            ipl.Add( "thumbs/pear.png" , "images/pear.png" );
            
            // set the first image to be selected, this will be
            // overridden by the PostBack when NoScript is active
            ipl.SelectedIndex = 0;
        }
    }
}