This is a migrated thread and some comments may be shown as answers.
getting images to fit
6 Answers 53 Views
This is a migrated thread and some comments may be shown as answers.
mww
Top achievements
Rank 1
mww asked on 15 Dec 2010, 03:59 PM
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 ?

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 16 Dec 2010, 11:43 AM
Hello,


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


-Shinu.
0
David Simmonds
Top achievements
Rank 1
answered on 18 Jan 2013, 07:14 PM
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?
0
mww
Top achievements
Rank 1
answered on 18 Jan 2013, 08:05 PM
to be honest, I dumped the RadRotator in the end and used a JQuery plugin, it was much, much better
0
David Simmonds
Top achievements
Rank 1
answered on 18 Jan 2013, 08:21 PM
Could you show me code as how you did it?
0
mww
Top achievements
Rank 1
answered on 19 Jan 2013, 01:52 PM
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 -->



0
Slav
Telerik team
answered on 23 Jan 2013, 08:33 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
mww
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
David Simmonds
Top achievements
Rank 1
mww
Top achievements
Rank 1
Slav
Telerik team
Share this question
or