1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / image module - thumbnail and large image on same page?

image module - thumbnail and large image on same page?

3 posts, 0 answered
  1. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    30 Nov 2008
    Link to this post
    Hi

    I need the image module to display all the thumbnails on a page, but also display 1 large image

    When you click on one of these thumbnail images, it will then load the large version of this image

    i.e.
    3 thumbnails (50px by 50px)
    1 Large Placeholder (500px by 500px)

    If you click on thumbnail 1, it shows it in the large placeholder
    Ideally, the loading of the large image should be ajax.

    i know this functionality doesn't exist, but i need it to exist pretty quickly.

    Could you let me know what you think is the easiest way to tackle this, i was thinking of extending the image and documents module,

    or use a rad rotator, (without the rotating arrows)
    The problem with this, is that i need the user to update images/ image names

    Your help on a solution would be appreciated (i.e. can it be done with the documents/images module with a little rework.

    Thanks!

  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    02 Dec 2008
    Link to this post
    Hello Quade,

    Here is an example how to achieve the required functionality extending Image Gallery control:

    1. Make a copy of ~/Sitefinity/ControlTemplates/Libraries/GalleryListViewTemplate.ascx template and its resource file (~/Sitefinity/ControlTemplates/Libraries/App_LocalResources\GalleryListViewTemplate.ascx.resx).
    2. Modify the template copy:
        - Declare an Image control for displaying the large image
        - Find a HyperLink control with ID="DownloadLink" and replace it with ImageButton

    <asp:HyperLink ID="backLink" runat="server" Text="<%$Resources:GoBack %>" /> 
    <asp:Image ID="LargeImg" runat="server"/> 
    <asp:Repeater ID="repeater" runat="server"
        <HeaderTemplate> 
            <ol class="sf_listAndPage"
        </HeaderTemplate> 
        <ItemTemplate> 
            <li> 
            <dl> 
                <dd class="sf_image"
                    <asp:ImageButton ID="Thumbnail" runat="server" /> 
                </dd> 

    3. Create a control which extends from ImageGallery base class:

    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.HtmlControls; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using Telerik.Libraries.WebControls; 
    using Telerik.Cms.Engine; 
     
    namespace Telerik.Libraries.WebControls 
        public class ImageGalleryExtender : ImageGallery 
        { 
            protected override void CreateChildControls() 
            { 
                base.ListViewTemplatePath = "~/Sitefinity/ControlTemplates/Libraries/GalleryListViewTemplateExtended.ascx"
                 
                base.CreateChildControls(); 
     
                if (this.currentItemId != Guid.Empty) 
                { 
                    if(this.ListContainer.Controls.Count == 1) 
                    { 
                        Control container = this.ListContainer.Controls[0]; 
     
                        if(container is UserControl) 
                        { 
                            Image largeImg = container.FindControl("LargeImg"as Image; 
     
                            if (largeImg != null
                            { 
                                IContent currentContent = this.Manager.GetContent(this.currentItemId); 
                                string url = String.Concat(currentContent.Url, this.Manager.Provider.ContentExtension); 
                                largeImg.ImageUrl = this.ResolveUrl(url); 
                            } 
                        } 
                    } 
                } 
           } 
     
            protected override void SetListMetadata(Control itemContainer, IContent contentItem) 
            { 
                base.SetListMetadata(itemContainer, contentItem); 
                 
                if (base.GalleryTemplateMode == GalleryViewMode.ListDetails) 
                { 
                    ImageButton thumbnail = itemContainer.FindControl("Thumbnail"as ImageButton; 
     
                    if (thumbnail != null
                    { 
                        string url = string.Concat(contentItem.Url, this.Manager.Provider.ThumbnailExtension); 
                        thumbnail.ImageUrl = ResolveUrl(url); 
                        thumbnail.CommandArgument = contentItem.ID.ToString(); 
                        thumbnail.Command += new CommandEventHandler(thumbnailButton_Command); 
                    } 
                } 
            } 
     
            void thumbnailButton_Command(object sender, CommandEventArgs e) 
            { 
                this.currentItemId = new Guid(e.CommandArgument.ToString()); 
                this.ChildControlsCreated = false
            } 
     
            private Guid currentItemId; 
        } 
     

    4. Register the newly created control in the <toolboxControls> section of the web.config file to display it in Add Controls toolbox:

    <add name="Image Gallery Extender" section="Images &amp; Documents" 
              type="Telerik.Libraries.WebControls.ImageGalleryExtender, App_Code" /> 

    Do let us know if this helps.

    All the best,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    03 Dec 2008
    Link to this post
    wow thats great

    thanks very much, worked first time!
Register for webinar
3 posts, 0 answered