ImageGalleryItem NavigateUrl

11 posts, 0 answers
  1. Amir
    Amir avatar
    15 posts
    Member since:
    Sep 2006

    Posted 25 Apr 2014 Link to this post

    Hi,
    I want to use image gallery as a content slider and I want to redirect to other pages by clicking on images in the image gallery.
    But ImageGalleryItem class does not have a NavigateUrl to use.
    Is there any workaround for this.

    best regards
    Amir
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Apr 2014 in reply to Amir Link to this post

    Hi Amir,

    As a work around please try the following JavaScript code snippet which works fine at my end.

    JavaScript:
    <script type="text/javascript">
        $('#RadImageGallery1_ImageWrapper').click(function () {
            window.open('http://www.google.com', '_blank');
        });
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amir
    Amir avatar
    15 posts
    Member since:
    Sep 2006

    Posted 29 Apr 2014 in reply to Shinu Link to this post

    Hi Shinu,
    Thank you for your reply.
    In the workaround you've provided, clicking on all images will open the same URL,
    but in a content slider scenario, each image should redirect(open) its own URL.
    can I do anything to solve this?
    thanks
    Amir
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Apr 2014 in reply to Amir Link to this post

    Hi Amir,

    Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadImageGallery ID="RadImageGallery1" runat="server" Style="z-index: 7001;">
        <Items>
            <telerik:ImageGalleryItem ImageUrl="plus.gif" Title="Plus" />
            <telerik:ImageGalleryItem ImageUrl="index.jpeg" Title="Index" />
        </Items>
        <ImageAreaSettings ShowDescriptionBox="true" NavigationMode="Zone" />
    </telerik:RadImageGallery>

    JavaScript:
    <script type="text/javascript">
        $('#RadImageGallery1_ImageWrapper').click(function () {
            var text = $('#RadImageGallery1_ImageWrapper')[0].innerText;
            var selectedImage = text.split("Item");
            if (selectedImage[0].trim() == "Plus") {
                window.open('http://www.google.com', '_blank');
            }
            else if (selectedImage[0].trim() == "Index") {
                window.open('http://www.telerik.com', '_blank');
            }
        });
    </script>

    Thanks,
    Shinu.
  6. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 30 Apr 2014 in reply to Shinu Link to this post

    Hi Shinu,

     Following is my page script. The link is not getting open after clicking (Refer radimagegallery2). I will be thankful if you guide
    me where am i going wrong. I tried after putting the radscriptblock on top instead of bottom, but still the link will not open.

    <%@ Page
    Title="Umed"
    Language="C#"
    MasterPageFile="~/English/MSRLM.master"
    AutoEventWireup="true"
    CodeFile="DefaultEnglish.aspx.cs"
    Inherits="English_DefaultEnglish"
    %>

     

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">

        <div id="divDefaultEng"
    class="container-fluid">

            <div class="row">

                <div class="col-md-12
    text-align-center top-padding-5">

                   
    <telerik:RadImageGallery ID="RadImageGallery1"
    runat="server"
    RenderMode="Auto"
    BackColor="Transparent"


                                             ImagesFolderPath="~/Images/ForHomePage"
    LoopItems="True">

                       
    <ThumbnailsAreaSettings
    Height="0px"
    Mode="ImageSlider"
    ThumbnailHeight="0px"


                                                ThumbnailWidth="0px"
    Width="0px"
    />

                       
    <ImageAreaSettings
    Width="100%"
    ShowDescriptionBox="False"
    Height="390px"
    />

     

                       
    <ClientSettings>

                            <KeyboardNavigationSettings>

                                <Shortcuts>

                                    <telerik:ImageGalleryShortcut
    Command="Focus"
    Key="Y"
    Modifiers="Ctrl"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="Prev"
    Key="LeftArrow"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="Next"
    Key="RightArrow"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="Up"
    Key="UpArrow"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="Down"
    Key="DownArrow"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="MoveToFirst"
    Key="Home"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                       
                <telerik:ImageGalleryShortcut
    Command="MoveToLast"
    Key="End"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="PrevView"
    Key="LeftArrow"
    Modifiers="Alt"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="NextView"
    Key="RightArrow"
    Modifiers="Alt"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="PrevView"
    Key="UpArrow"
    Modifiers="Alt"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="NextView"
    Key="DownArrow"
    Modifiers="Alt"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="Select"
    Key="Enter"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="Close"
    Key="Escape"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="ToggleSlideshow"
    Key="Space"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="ToggleFullScreen"
    Key="F"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="ToggleThumbnails"
    Key="T"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut
    Command="PrevPage"
    Key="PageDown"
    Modifiers="None"
    Enabled="True"></telerik:ImageGalleryShortcut>

                                    <telerik:ImageGalleryShortcut Command="NextPage" Key="PageUp" Modifiers="None" Enabled="True"></telerik:ImageGalleryShortcut>

                                </Shortcuts>

                            </KeyboardNavigationSettings>

                            <AnimationSettings SlideshowSlideDuration="8000">

                                <NextImagesAnimation
    Type="Random"
    Easing="Random"
    Speed="1500"
    />

                                <PrevImagesAnimation
    Type="Random"
    Easing="Random"
    Speed="1500"
    />

                    
           </AnimationSettings>

                            <ClientEvents OnImageGalleryCreated="ImageGallery1Created"
    />

                       
    </ClientSettings>

                   
    </telerik:RadImageGallery>

                </div>

                <div class="col-md-4
    text-align-center top-padding-5">

                   
    <telerik:RadPanelBar ID="RadPanelBar1"
    runat="server"
    Width="99%"

                                         ExpandMode="SingleExpandedItem"
    Skin="Simple"
    RenderMode="Auto"
    >

                       
    <Items>

                            <telerik:RadPanelItem Text="Social Mobilisation" runat="server"
    Expanded="True"


                                                  BackColor="#F00000"
    Font-Size="Medium"
    ForeColor="White">

                                <Items>

                                    <telerik:RadPanelItem>

                                        <ItemTemplate>

                                            <asp:label ID = "lbl1" runat="server" Text="NRLM will ensure that states adopts saturation
    approach, where at least one member from each identified rural poor household,
    preferably a woman, is brought under the Self Help Group (SHG) network in a
    time bound manner."></asp:label>

                                            <br />

                                            <asp:HyperLink ID="lnkSpcialMobilization" runat="server"
    Text="Read
    More" CssClass="text-align-right right-padding-10" Width="100%"></asp:HyperLink>

                                        </ItemTemplate>

                                    </telerik:RadPanelItem>

                                </Items>

                            </telerik:RadPanelItem>

                            <telerik:RadPanelItem Text="Institutional
    Building" runat="server"

                                                  BackColor="#F00000"
    Font-Size="Medium"
    ForeColor="White">

                                <Items>

                                    <telerik:RadPanelItem>

                                        <ItemTemplate>

                                            <asp:label ID = "lbl2" runat="server" Text="NRLM will ensure that states adopts saturation
    approach, where at least one member from each identified rural poor household,
    preferably a woman, is brought under the Self Help Group (SHG) network in a
    time bound manner."></asp:label>

                                        </ItemTemplate>

                                    </telerik:RadPanelItem>

                                </Items>

                            </telerik:RadPanelItem>

                            <telerik:RadPanelItem Text="Financial
    Inclusion" runat="server"

                                                  BackColor="#F00000"
    Font-Size="Medium"
    ForeColor="White">

                                <Items>

                                    <telerik:RadPanelItem>

                                        <ItemTemplate>

                                            <asp:label ID = "lbl3" runat="server" Text="NRLM will ensure that states adopts saturation
    approach, where at least one member from each identified rural poor household,
    preferably a woman, is brought under the Self Help Group (SHG) network in a
    time bound manner."></asp:label>

                                        </ItemTemplate>

                                    </telerik:RadPanelItem>

                                </Items>

                            </telerik:RadPanelItem>

                            <telerik:RadPanelItem Text="Livelihoods
    Promotion" runat="server"

                                                  BackColor="#F00000"
    Font-Size="Medium"
    ForeColor="White">

                                <Items>

                                    <telerik:RadPanelItem>

                                        <ItemTemplate>

                                            <asp:label ID = "lbl4" runat="server" Text="NRLM will ensure that states adopts saturation
    approach, where at least one member from each identified rural poor household,
    preferably a woman, is brought under the Self Help Group (SHG) network in a
    time bound manner."></asp:label>

                                        </ItemTemplate>

                                    </telerik:RadPanelItem>

                                </Items>

                            </telerik:RadPanelItem>

                       
    </Items>

                       
    <CollapseAnimation
    Duration="0"
    Type="None"
    />

                       
    <ExpandAnimation
    Duration="0"
    Type="None"
    />

                   
    </telerik:RadPanelBar>

                </div>

                <div class="clearfix"></div>

            </div>

        </div>

        <br />

        <div id="div1" class="container-fluid">

            <div class="row">

                <div id="homeContect"
    class="col-md-16
    top-padding-10 bottom-padding-10 left-padding-5 right-padding-5
    text-align-left">

                </div>

            </div>

        </div>

        <br />

        <div id="divDefaultMid"
    class="container-fluid">

            <div class="row">

                <div class="col-md-4  text-align-center ">

                   
    <asp:Label ID="Label2" Text=" Bulletins"
    runat="server"
    CssClass="caption-for-div"
    Width="100%"></asp:Label>

                   
    <div
    id= "divBulletinContent" runat="server">

                   
    </div>

                </div>

                <div class="col-md-4  text-align-center ">

                   
    <asp:Label ID="Label3" Text="Our
    Performers" runat="server"

                               CssClass="caption-for-div"
    Width="100%"></asp:Label>

                   
    <div
    id= "divOurPerformers" runat="server">

                   
    </div>

                </div>

                <div class="col-md-5  text-align-center ">

                   
    <asp:Label ID="Label4" Text=" Reports"
    runat="server"
    CssClass="caption-for-div"
    Width="100%"></asp:Label>

                   
    <div
    id= "divReports" runat="server">

                   
    </div>

                </div>

                <div class="col-md-3  text-align-center ">

                   
    <asp:Label Text=" Our
    Associates" runat="server" CssClass="caption-for-div" Width="100%"></asp:Label>

                   
    <telerik:RadImageGallery ID="RadImageGallery2"
    runat="server"
    CssClass="border-for-div"
    AllowPaging="false"
    NavigationMode="Zone"
    BackColor="White"

                                              width="100%"
    LoopItems="True"
    >

                       
    <ThumbnailsAreaSettings
    Height="0px"
    Mode="ImageSlider"
    ThumbnailHeight="0px"

                                                ThumbnailWidth="0px"
    Width="0px"
    />

                       
    <ImageAreaSettings
    Width="100%"
    ShowDescriptionBox="False"
    Height="175px"
    NavigationMode="Zone"  />

                       
    <ToolbarSettings
    ShowThumbnailsToggleButton="false" 
    />

                       
    <Items>

                            <telerik:ImageGalleryItem ImageUrl="~/Images/Partners/Aajeevika.jpg"
    Title="Aajeevika"
    />

                            <telerik:ImageGalleryItem ImageUrl="~/Images/Partners/kudumbashree.jpg"
    Title="kudumbashree"
    />

                            <telerik:ImageGalleryItem ImageUrl="~/Images/Partners/Mavim.jpg"
    Title="Mavim"
    />

                            <telerik:ImageGalleryItem ImageUrl="~/Images/Partners/SERP-logo.jpg"
    Title="SERP"
    />

                            <telerik:ImageGalleryItem ImageUrl="~/Images/Partners/TISS.jpg"
    Title="TISS"
    />

                            <telerik:ImageGalleryItem ImageUrl="~/Images/Partners/WorldBank.jpg"
    Title="WorldBank"
    />

                       
    </Items>

                       
    <ClientSettings>

                            <AnimationSettings SlideshowSlideDuration="8000">

                                <NextImagesAnimation
    Type="Random"
    Easing="Random"
    Speed="1500"
    />

                                <PrevImagesAnimation
    Type="Random"
    Easing="Random"
    Speed="1500"
    />

                            </AnimationSettings>

                           

                       
    </ClientSettings>

                   
    </telerik:RadImageGallery>

                </div>

            </div>

        </div>

     

        <telerik:RadScriptBlock ID="RadScriptBlock1"
    runat="server">

            <script type="text/javascript">

     

               
    $('#RadImageGallery2_ImageWrapper').click(function () {

                   
    var text = $('#RadImageGallery2_ImageWrapper')[0].innerText;

                   
    var selectedImage = text.split("Item");

                   
    alert(selectedImage);

                   
    if (selectedImage[0].trim() == "Aajeevika") {

                       
    window.open('http://www.aajeevika.gov.in/',
    '_blank');

                   
    }

                   
    else if
    (selectedImage[0].trim() == "kudumbashree")
    {

                       
    window.open('http://www.kudumbashree.org/',
    '_blank');

                   
    }

                   
    else if
    (selectedImage[0].trim() == "Mavim")
    {

                       
    window.open('http://www.mavimindia.org/',
    '_blank');

                   
    }

                   
    else if
    (selectedImage[0].trim() == "SERP")
    {

                       
    window.open('https://www.serp.ap.gov.in/',
    '_blank');

                   
    }

                   
    else if
    (selectedImage[0].trim() == "TISS")
    {

                       
    window.open('http://www.tiss.edu/', '_blank');

                   
    }

                   
    else if
    (selectedImage[0].trim() == "WorldBank")
    {

                       
    window.open('http://www.worldbank.org/',
    '_blank');

                   
    }

     

               
    });

            </script>

     

            <script language="javascript"
    type="text/javascript">

                function ImageGallery1Created(sender) {

                   
    var imageGallery = $find('<%=RadImageGallery1.ClientID%>');

                   
    imageGallery.playSlideshow();

                }

     

                function ImageGallery2Created(sender) {

                   
    var imageGallery = $find('<%=RadImageGallery2.ClientID%>');

                    imageGallery.playSlideshow();

                }

     

            </script>

        </telerik:RadScriptBlock>

    </asp:Content>

     

     

     

  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 30 Apr 2014 Link to this post

    Hi Milind,

    Probably a reference to the desired text is not obtained correctly and this is preventing the opening of the window. Please try modifying the client-side logic like demonstrated below.

    JavaScript:
    $telerik.$('#RadImageGallery2_ImageWrapper').click(function () {
                        var text = $find('RadImageGallery2').get_selectedItem().get_title()
                           
                        if (text == "Aajeevika") {
                                window.open('http://www.aajeevika.gov.in/',
                                '_blank');
                            } else if
    (text == "kudumbashree") {
                                window.open('http://www.kudumbashree.org/',
                                '_blank');
                            } else if
    (text == "Mavim") {
                                window.open('http://www.mavimindia.org/',
                                '_blank');
                            } else if
    (text == "SERP") {
                                window.open('https://www.serp.ap.gov.in/',
                                '_blank');
                            } else if
    (text == "TISS") {
                                window.open('http://www.tiss.edu/', '_blank');
                            } else if
    (text == "WorldBank") {
                                window.open('http://www.worldbank.org/',
                                '_blank');
                            }
                        });

    Additionally in attachments you can find a sample website which I have used for testing. It seems to behave as expected on my end. Please test it on yours and let us know of the results.

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 01 May 2014 in reply to Angel Petrov Link to this post

    Hi Angel,

    Thanks a lot for reply.

    The solution given and example attached work perfect on web page with no master page attached to it.

    I am using master page and my script manager is on master page. In this case when I click on any image on the gallery instead of opening a new window with specified url, simply next image is displayed.

    Any solution on this ?

    Thanks

    Milind
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 May 2014 in reply to Milind Link to this post

    Hi Milind,

    Please try to modify the JavaScript as follows which works fine at my end.

    JavaScript:
    <script type="text/javascript">
        $telerik.$('.rigActiveImage').click(function () {
            var text = $find('<%=RadImageGallery2.ClientID %>').get_selectedItem().get_title();
            if (text == "Aajeevika") {
                window.open('http://www.aajeevika.gov.in/','_blank');
            } else if(text == "kudumbashree") {
                window.open('http://www.kudumbashree.org/','_blank');
            } else if(text == "Mavim") {
                window.open('http://www.mavimindia.org/','_blank');
            } else if(text == "SERP") {
                window.open('https://www.serp.ap.gov.in/','_blank');
            } else if(text == "TISS") {
                window.open('http://www.tiss.edu/', '_blank');
            } else if(text == "WorldBank") {
                window.open('http://www.worldbank.org/','_blank');
            }
        });  
    </script>

    Hope this will helps you.
    Thanks,
    Shinu.
  10. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 14 Jul 2014 in reply to Shinu Link to this post

    Hi shinu,

    Sorry to trouble you again,

    The solution suggested by you was redirecting to a different page on click of a image.

    I have two image galleries on the page RadImageGallery1 and RadImageGallery2. The code suggested by you was required for RadImageGallery2. Today while testing I realized that the code is executed even if the user clicks on the image in RadImageGallery1. I want to redirect to say google.com if the user clicks on image in RadImageGallery1 and bing.com if the user clicks on image in RadImageGallery2.

    Pls suggest a solution

    Thanks,

    Milind
  11. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 17 Jul 2014 Link to this post

    Hello Milind,

    For creating different links you can attach the click events to the separate ImageAreas. For example:

    JavaScript:
    $telerik.$('#RadImageGallery2_ImageWrapper').click(function () {
                        var text = $find('RadImageGallery2').get_selectedItem().get_title()
                           
                        //declare links
                    });
                
                    $telerik.$('#RadImageGallery1_ImageWrapper').click(function () {
                        var text = $find('RadImageGallery1').get_selectedItem().get_title()
     
                        //declare links
                    });
    will attach two separate click events and will allow you to define links according to the requirements.


    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 17 Jul 2014 in reply to Angel Petrov Link to this post

    Hello Angel,

    Thanks for reply. I will check and get back to you if required.

    - Milind
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017