getting images to fit

[mww]

I have a RadRotator that takes several images from a database (the image url's)
All images may not be exactly the same size (they dont vary by much though)
How can I force all images displayed in the rotator to be the same size ?  Ive used this

<telerik:RadRotator ID="RadRotator1" runat="server"
                     ScrollDuration="700" FrameDuration="5000"  RotatorType="SlideShow" SlideShowAnimation-Type="Fade" ItemHeight="162px" ItemWidth="207px" PauseOnMouseOver="False">
                     <ItemTemplate>

                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageURL") %>'   Height="162px" Width="210px" />

                     </ItemTemplate>
        </telerik:RadRotator>

but it doesnt work properly, when images fade in and out, I can still see the remnants of the previous image behind the current image.  I just want all images to be the same size and not to see any of the previous images in the background.  Can anyone help ?

[Shinu]

Hello,


Have a look at the following documentation and see whether it is useful for you.
How to configure RadRotator


-Shinu.

[David Simmonds]

I have images which may not be the same height and width. Do I have to force them to be the same size before displaying them in the rotator?

[mww]

to be honest, I dumped the RadRotator in the end and used a JQuery plugin, it was much, much better

[David Simmonds]

Could you show me code as how you did it?

[mww]

first youll need the jquery lightbox plugin

http://leandrovieira.com/projects/jquery/lightbox/

then I created a usercontrol

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageGalleryUserControl.ascx.cs" Inherits="Studio1Website.UserControls.ImageGalleryUserControl" %>
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>

<asp:Literal ID="LiteralImageGallery" runat="server"></asp:Literal>

and this is the usercontrol code behind

public partial class ImageGalleryUserControl : System.Web.UI.UserControl
    {
        public long ArtistID { get; set; }
        public long VenueID { get; set; }
        private Studio1BusinessLayer.ArtistBLManager artistManager = new Studio1BusinessLayer.ArtistBLManager();
        private Studio1BusinessLayer.ImageGalleryBuilder imageGallery = new Studio1BusinessLayer.ImageGalleryBuilder();
        private Studio1BusinessLayer.VenueManager venueManager = new Studio1BusinessLayer.VenueManager();

        public ImageGalleryUserControl()
        {
            this.ArtistID = -1;
            this.VenueID = -1;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (this.ArtistID > -1)
                {
                    GetImages();
                }
                else
                {
                    GetVenueImages();
                }
            }
        }

        private void GetImages()
        {
            List<Studio1BusinessLayer.ArtistImage> images = new List<Studio1BusinessLayer.ArtistImage>();
            images = artistManager.ArtistImageList(this.ArtistID);
            if (null != images)
            {
                imageGallery.ImageList = images;
                this.LiteralImageGallery.Text = imageGallery.Get();
            }
        }
        private void GetVenueImages()
        {
            List<Studio1BusinessLayer.ArtistImage> images = new List<Studio1BusinessLayer.ArtistImage>();
            images = venueManager.VenueImageList(this.VenueID);
            if (null != images)
            {
                imageGallery.ImageList = images;
                this.LiteralImageGallery.Text = imageGallery.Get();
            }
        }
    }

the 'scafolding' code to bring it all together

public class ArtistImage
    {
        public long ArtistID { get; set; }
        public string ImageURL { get; set; }
        public string ThumbNailURL { get; set; }
        public string Description { get; set; }
    }




public class ImageGalleryBuilder
    {
        private List<Studio1BusinessLayer.ArtistImage> _lst = new List<ArtistImage>();
        private int _thumbNailWidth = -1;
        private int _thumbNailHeight;

        public List<Studio1BusinessLayer.ArtistImage> ImageList
        {
            get { return this._lst; }
            set { this._lst = value; }
        }
        public int ThumbNailHeight
        {
             get { return this._thumbNailHeight; }
            set { this._thumbNailHeight = value; }
        }

        public int ThumbNailWidth
        {
            get { return this._thumbNailWidth; }
            set { this._thumbNailWidth = value; }
        }



        public string Get()
        {
            string galleryObject = string.Empty;
            StringBuilder sb = new StringBuilder();
            sb.Append(@"<div id='gallery'> ");
            if(this.ImageList.Count > 0)
            {
                sb.Append(@"<ul> ");
                foreach(Studio1BusinessLayer.ArtistImage ai in this.ImageList)
                {
                    sb.Append(@"<li>");
                    sb.Append(@"<a href='" + ai.ImageURL + "'");

                    sb.Append(" >");
                    sb.Append(@"<img src='" + ai.ThumbNailURL + "'");

                    sb.Append(" alt='" + ai.Description + "' ");
                    sb.Append(@" /> </a> ");
                    sb.Append(@"</li>");
                }
                sb.Append(@"</ul> ");
                sb.Append(@"</div> ");
            }
            else
            {
                sb.Append(@"</div> ");
            }

            galleryObject = sb.ToString();
            return galleryObject;
        }

    }

and then simply use the usercontrol in your page

<!-- Image gallery starts here  -->

      <div id="picture_gallery_container">


        <div id="gallerytop">
        <h2>Gallery</h2>
        </div>
        <div id="gallerymiddle">
        <uc1:ImageGalleryUserControl ID="ImageGalleryUserControl1" runat="server" />
        </div>
        <div id="gallerybottom"><h3>Click once to enlarge image</h3></div>


     </div>  <!-- Image gallery end here -->

[Slav]

Hi guys,

A possible approach to display images with various size in the RadRotator without resizing them is to set the properties Width, Height, ItemWidht and ItemHeight according to the biggest image that will be displayed. You can check the described approach in the attached sample page. Please use it as a reference for your further development if you choose the RadRotator for your implementation.

All the best,
Slav
the Telerik team