Fire a pop up from displayed image

11 posts, 1 answers
  1. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 09 Jun 2015 Link to this post

    Hi

    I'm using the image gallery as per this example http://demos.telerik.com/aspnet-ajax/image-gallery/examples/overview/defaultcs.aspx

    i.e. no thumbnails just shows an image with the Prev / Next buttons.

    What I want to do is on click the image is open the image in a pop up window - I want to use this lightbox control http://lokeshdhakar.com/projects/lightbox2/

    How would I attach the mark-up to the displayed image in image gallery.

    This is the mark-up required by the control:

    <a href="images/ImageTN.jpg" data-lightbox="image-1" alt="Title for  image"><img src="images/Image.jpg" alt="Title for image" /></a>

    OR can you do what I need to do with your controls.

    Andy

  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 12 Jun 2015 Link to this post

    Hello Andy,

    You can attach handler for the client-side onmousedown event of the RadImageGallery wrapping DIV element and if the event target is IMG tag, manually add new item to the RadLightBox control and open it. Here is an example with RadLightBox control and RadImageGallery:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function handleClick(sender, ev) {
                if (ev.target.tagName == "IMG") {
                    var lightBox = $find('<%= RadLightBox1.ClientID %>');
                    var lightBoxItem = new Telerik.Web.UI.LightBoxItem;
                    lightBoxItem.set_imageUrl(ev.target.src);
                    var lightBoxItemCollection = lightBox.get_items();
                    lightBoxItemCollection.clear();
                    lightBoxItemCollection.add(lightBoxItem);
                    lightBox.show();
                }
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadImageGallery runat="server" ID="RadImageGallery1" Width="500px" ImagesFolderPath="Images" DisplayAreaMode="Image" onmousedown="handleClick(this, event);">
        <ThumbnailsAreaSettings Mode="ImageSliderPreview" />
    </telerik:RadImageGallery>
     
    <telerik:RadLightBox runat="server" ID="RadLightBox1"></telerik:RadLightBox>

    If you need to use another listbox control you will have to modify the JavaScript accordingly, but the same approach could be used for retrieving the URL of the image. As for changing the generated structure you may have to use templates as documented in the following help article:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 17 Jun 2015 in reply to Konstantin Dikov Link to this post

    Thank You.

     

    ANdy

  5. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 19 Jun 2015 in reply to Konstantin Dikov Link to this post

    Thank you for the quick response.

    I'm looking for examples of the ItemDataBound for the Image Gallery control.

    I'm thinking of adding that relavent JS in this event.

    Andy

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 24 Jun 2015 Link to this post

    Hello Andy,

    For this particular scenario and requirement, it will not be possible to achieve the desired behavior by handling the OnItemDataBound event and you should use the suggested approach from my previous post, where the onmousedown event is handled.

    However, if you need to attach the same event handler from the code-behind, I would suggest the OnPreRender event, because you need to attach the handler only once and the OnItemDataBound event will fire for each item in the control.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 24 Jun 2015 in reply to Konstantin Dikov Link to this post

    Hi

    Not sure I can use your first approach, I don't want to add another image to the gallery control, I only wish to attached the code to open the Lightbox.

    I will try again with the OnPreRender event.

    Andy

     

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 29 Jun 2015 Link to this post

    Hi Andy,

    Please let me know if everything is working correctly with the OnPreRender approach and if you need any further assistance on this matter.


    Best Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 29 Jun 2015 Link to this post

    Thank you for the timely response, I'm in the middle fothis now. I still can't find any examples on using the OnPreRender event. And I'm no further forward.

    I have tried adding a template, but these don't seem to work as std templates as used in other controls in that they are added as individual items not a pattern for all.

    Are there any examples of adding JavaScript to each rendered item with different parameters.

    Maybe my problem comes from binding to a folder, should this limit me in anyway?

    One last thing the templates link in your answer doesn't work, and I'm looking at this link, is this the correct url?:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/imagegallery/functionality/templates

    Andy

     

     

  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 01 Jul 2015 Link to this post

    Hello Andy,

    Regarding the templates of the RadImageGallery, you are correct that they behavior differently than the other controls and each template will define one item only. With that in mind, if you need to create multiple items with the same template, you need to create a template for every item.

    As for the link in my initial post, it is indeed broker and the correct one is the one you have posted: 
    Finally, for attaching the handler for the onmousedown event on server-side you can use the following:
    protected void RadImageGallery1_PreRender(object sender, EventArgs e)
    {
        RadImageGallery1.Attributes.Add("onmousedown", "handleClick(this, event);");
    }


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 15 Jan in reply to Konstantin Dikov Link to this post

    Hello

    In your sample , it's simple but don't represent the reality , you insert the data in hard.

     

    protected void Gallery_ItemDataBound(object sender, ImageGalleryItemEventArgs e)
        {
            ImageGalleryItem item = e.Item as ImageGalleryItem;
             
            switch (item.Title)
            {
                case "name 1":
                    item.NavigateUrl="http://google.com";
                    break;
                    case "name 2":
                    item.NavigateUrl="http://yahoo.com";
                    break;
                case "name 3":
                    item.NavigateUrl="http://bing.com";
                    break;
                default:
                    break;
            }  
        }

     

    If we want to use OnItemDataBound

     

    And get the dataitem, to have a dynamic value from datasource object.

     So you don't have think for the reality to use dataitem object like other object like RadGrid , listview or Repeater.

     

    So have you an idea ?

     

    protected void Gallery_ItemDataBound(object sender, ImageGalleryItemEventArgs e)
        {
            ImageGalleryItem item = e.Item as ImageGalleryItem;
            EntityTda oBo = (EntityTda)item.DataItem;       
     
            item.NavigateUrl=oBo.url_link.toString(); //"http://google.com";
             
        }

     

     

    thanks

    Olivier

  12. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 18 Jan Link to this post

    Hi Olivier,

    Indeed, with the current implementation of the RadImageGallery it is not possible to retrieve the data item bound to the ImageGalleryItem and the only possible option would be to use the RadImageGallery DataSource object.

    If you think that such functionality will be a good addition to the control you could create a public item in our Ideas & Feedback Portal:


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017