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

Forums / General Discussions / Lightbox on a single image

Lightbox on a single image

7 posts, 0 answered
  1. Ryan Ternier
    Ryan Ternier avatar
    32 posts
    Registered:
    24 Nov 2005
    14 Jan 2010
    Link to this post
    Is it possible to have the lightbox effect on a single image? The image gallery works sometimes but not all the time when you want it floating, or set to a specific size with only 1 image (The gallery never sizes properly and centers properly the way we need to use it).

    thanks,
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Jan 2010
    Link to this post
    Hello Ryan Ternier,

    You can create a simple user control that shows only one image that you specify through a public property and add it as a href and src of an img tag.

    sample.

    <a href="LightBoxImages/image1.jpg" rel="lightbox"><img src="LightBoxImages/thumb1.jpg" width="150" height="50" alt="" /></a>

    Another option is using ImageGallery control - disable the Paging from the Advanced tab, then from control's Basic tab go to Gallery settings and set "..." to "1".
    You can apply custom styles to the control mapping GaleryLightboxList template. Then you can use CssFileLink control to set the path to your custom stylesheet.

    The third option is creating a custom control that inherits from ImageGallery and implementing the first suggestion inside ImageGallery control.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Ryan Ternier
    Ryan Ternier avatar
    32 posts
    Registered:
    24 Nov 2005
    14 Jan 2010
    Link to this post
    Thanks for the quick reply Ivan.

    I'll give the first one ago, because it will be easier for others to use the System without having to monkey around as much.

  4. Ryan Ternier
    Ryan Ternier avatar
    32 posts
    Registered:
    24 Nov 2005
    14 Jan 2010
    Link to this post
    Ivan,

    For the first method you put down - what do I need to do in order for it to access the images already uploaded into SiteFinity?

    I have this:
     
        string _imageLocation = string.Empty; 
        string _thumbnailLocation = string.Empty; 
         
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]   
        public string ImageLocation 
        { 
            get { return _imageLocation; } 
            set { _imageLocation = value; } 
        } 
         
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]   
        public string ThumbnailLocation 
        { 
            get { return _thumbnailLocation; } 
            set { _thumbnailLocation = value; } 
     
        } 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            lnkImageLink.NavigateUrl = ThumbnailLocation == "" ? ImageLocation : ThumbnailLocation; 
            imgLightbox.ImageUrl = ImageLocation
        } 
     

    It appears to work. However, when I view the page, it's just an empty image.

    When i go  back to look at the editor i see this under ImageLocation:
    [Libraries]f24a972d-a7ed-4724-b379-314cc4520ba5

    Now what's getting me is I saw something like this yesterday while burrowing through the forums, but now I can't find it!
  5. Ryan Ternier
    Ryan Ternier avatar
    32 posts
    Registered:
    24 Nov 2005
    14 Jan 2010
    Link to this post
    Got it working. Here's the final results. Now the only thing I need is to tell Lightbox not to put the image at full size... if someone has a browser window of 800x600 and the image is say 1900x1200 , it should scale...

    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using Telerik.Web.UI; 
    using Telerik.Cms.Web.UI; 
    using Telerik.Cms.Engine; 
     
    public partial class CustomControls_ImageLightbox : System.Web.UI.UserControl 
        string _imageLocation = string.Empty; 
        string _thumbnailLocation = string.Empty; 
        int _width = 96
        int _height = 96
         
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]   
        public string ImageLocation 
        { 
            get { return _imageLocation; } 
            set { _imageLocation = value; } 
        } 
         
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]   
        public string ThumbnailLocation 
        { 
            get { return _thumbnailLocation; } 
            set { _thumbnailLocation = value; } 
     
        } 
     
        public int Height 
        { 
            get { return _height; } 
            set { _height = value; } 
        } 
     
        public int Width 
        { 
            get { return _width; } 
            set { _width = value; } 
        } 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            string t = ThumbnailLocation == "" ? ImageLocation : ThumbnailLocation; 
            lnkImageLink.NavigateUrl = GetItemUrl("Libraries", new System.Guid(t.Substring(t.IndexOf(']') + 1)), false); 
            imgLightbox.ImageUrl = GetItemUrl("Libraries", new System.Guid(ImageLocation.Substring(ImageLocation.IndexOf(']') + 1)), false); 
            imgLightbox.Width = Width; 
            imgLightbox.Height = Height; 
        } 
     
     
        public string GetItemUrl(string provider, Guid id, bool resolveAsAbsoluteUrl) 
        { 
            if (ContentManager.Providers.ContainsKey(provider)) 
            { 
                IContent cnt = ContentManager.Providers[provider].GetContent(id); 
                if (cnt != null) 
                    return VirtualPathUtility.ToAbsolute(cnt.UrlWithExtension, this.Context.Request.ApplicationPath); 
            } 
            else 
            { 
                // we assume it is a page  
                SiteMapNode node = SiteMap.Provider.FindSiteMapNodeFromKey(id.ToString()); 
                if (node != null) 
                    return this.ResolveClientUrl(node.Url); 
            } 
            return String.Concat("Item not found: [", provider, "]", id); 
        }  

  6. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    15 Jan 2010
    Link to this post
    Hello Ryan Ternier,

    You can try to construct the urls to the image with the following query string:
    image.sflb.ashx?width=300&height=225&decreaseOnly=true&proportional=true

    This will force the handler to output an image with the width and height set, proportional or not. 

    I hope this helps.

    All the best,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Duncan Evans
    Duncan Evans avatar
    122 posts
    Registered:
    07 Jul 2009
    19 Apr 2010
    Link to this post
    If anyone is interested. I posted a control to the marketplace that allows you to pop up the lightbox of multiple image libraries without a image gallery and with custom content of your choice (link, linked image, etc..)

    http://www.sitefinity.com/marketplace/modules/controlled-lightbox.aspx

    Enjoy!

    Duncan
Register for webinar
7 posts, 0 answered