ImageGalleryItem NavigateUrl

Hi Amir,

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

JavaScript:

Thanks,
Shinu.

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

Hi Amir,

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

ASPX:

JavaScript:

Thanks,
Shinu.

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>

 

 

 

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:

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

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

Hi Milind,

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

JavaScript:

Hope this will helps you.
Thanks,
Shinu.

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

Hello Milind,

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

JavaScript:
will attach two separate click events and will allow you to define links according to the requirements.


Regards,
Angel Petrov
Telerik

Hello Angel,

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

- Milind