getting images to fit

7 posts, 0 answers
  1. mww
    mww avatar
    257 posts
    Member since:
    Sep 2012

    Posted 15 Dec 2010 Link to this post

    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 ?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2010 Link to this post

    Hello,


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


    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David Simmonds
    David Simmonds avatar
    56 posts
    Member since:
    Mar 2010

    Posted 18 Jan 2013 Link to this post

    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?
  5. mww
    mww avatar
    257 posts
    Member since:
    Sep 2012

    Posted 18 Jan 2013 Link to this post

    to be honest, I dumped the RadRotator in the end and used a JQuery plugin, it was much, much better
  6. David Simmonds
    David Simmonds avatar
    56 posts
    Member since:
    Mar 2010

    Posted 18 Jan 2013 Link to this post

    Could you show me code as how you did it?
  7. mww
    mww avatar
    257 posts
    Member since:
    Sep 2012

    Posted 19 Jan 2013 Link to this post

    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 -->



  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 23 Jan 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017