Image Gallery hyperlink

[Scott]

Good afternoon,

I was wondering if it is possible to add a hyperlink (server side, not JS please) to individual images contained in a RadImageGallery?

I have tried adding hyperlinks in the Title & Description fields of the ImageGalleryItems, but the html doesn't get processed and is displayed as text.

e.g. <telerik:ImageGalleryItem Title="<a href='http://www.google.com'>Item1</a>" ImageUrl="images/image1.jpg" description="<a href='http://www.google.com'>Description text will go here</a>"/>

The above is purely an example, but ultimately we will be binding the RadImageGallery server side to a dataset containing the Title, Description & ImageURL, hence why Javascript is not an ideal option.

Many thanks

[Radoslav]

Hi Scott,

Unfortunately the desired functionality currently is not supported into the ImageGallery control. The only way to have links for each image is to add them on the client with JavaScript. However I will forward your requirement to our developers for further consideration. Also you can log a feature request into our public portal in order other people to vote for it:

http://feedback.telerik.com/Project/108

Regards,
Radoslav
Telerik

 

 

[Scott]

I have added my vote to this suggestion and advise others to do the same:

Telerik Feedback Portal

[Lawrence]

Hello,

I know you would like to make the title linkable without using JavaScript, but here is a work around in the meantime. I didn't need to use the description, so I used that to pass my information. What I did was hide the description and pass in the value that is needed to link to another page. From there, you can just add an anchor tag for the title to link. Make sure to add a ClientEvents OnNavigated with your JavaScript function. Here is an example of what I’m talking about:

<telerik:RadImageGallery>
 <ClientSettings>
    <ClientEvents OnNavigated="updateTitleLink"/>
  </ClientSettings>
</telerik:RadImageGallery>

$(function () {
    updateTitleLink();
});

function updateTitleLink() {
    $(".rigDescriptionBox").each(function(item, obj){
        var storyId = $(this).find('p').text();
        var element = $(this).find('h4');
        $(element).html("<a href='story.aspx?StoryId=" + storyId +"'>" + $(element).text() + "</a>");
    });
}

[Rumen]

Thank you for sharing your solution with the community, Lawrence!

As a small token of gratitude for that I've updated your Telerik points.

Best regards,
Rumen
Progress Telerik