This is a migrated thread and some comments may be shown as answers.

ImageGalleryItem NavigateUrl

10 Answers 80 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
Amir
Top achievements
Rank 1
Amir asked on 25 Apr 2014, 12:24 PM
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

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 29 Apr 2014, 09:49 AM
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.
0
Amir
Top achievements
Rank 1
answered on 29 Apr 2014, 12:41 PM
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
0
Shinu
Top achievements
Rank 1
answered on 30 Apr 2014, 03:21 AM
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.
0
Milind
Top achievements
Rank 1
answered on 30 Apr 2014, 05:36 AM
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>

 

 

 

0
Angel Petrov
Telerik team
answered on 30 Apr 2014, 11:32 AM
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.

 
0
Milind
Top achievements
Rank 1
answered on 01 May 2014, 11:17 AM
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
0
Shinu
Top achievements
Rank 1
answered on 02 May 2014, 03:42 AM
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.
0
Milind
Top achievements
Rank 1
answered on 14 Jul 2014, 11:59 AM
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
0
Angel Petrov
Telerik team
answered on 17 Jul 2014, 07:22 AM
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.

 
0
Milind
Top achievements
Rank 1
answered on 17 Jul 2014, 07:45 AM
Hello Angel,

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

- Milind
Tags
ImageGallery
Asked by
Amir
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Amir
Top achievements
Rank 1
Milind
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or