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

Add custom class to ImageGalleryItemBase

1 Answer 30 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
Alex Tushinsky
Top achievements
Rank 2
Alex Tushinsky asked on 12 Nov 2014, 03:06 AM
I'm working on a project where I'm using the ImageGallery to display some photos which can then be zoomed in on using a jQuery plugin.  Typically this involves in having the medium sized image (the one displayed in the ImageGallery) linked to the larger version, and a custom class needs to be assigned to the medium image.  Is this possible to do?

I've attempted something like this:

foreach (ImageGalleryItemBase oItem in rdPics.Items)
{
     oItem.Attributes.add(
"class", "MagicZoomPlus");
}

but that does not work, as the "Attributes" property is not recognized.  Any suggestions?

Alternatively, has anyone attempted to add zoom capabilities to the ImageGallery, and if so, which component did you use (jQuery plugin or otherwise) and how did you integrate the two components together?

Thank you,
Alex





1 Answer, 1 is accepted

Sort by
0
Antonio Stoilkov
Telerik team
answered on 14 Nov 2014, 09:38 AM
Hi Alex,

In order to implement the desired functionality you could use the code provided below and implement your custom logic in the setupImage handler and set the bigger image location on the imageElement variable which is the img element.
<ClientSettings>
    <ClientEvents OnImageLoaded="ImageLoaded" />
</ClientSettings>
function pageLoad() {
    var imageElement = $telerik.getElementByClassName(document.body, "rigActiveImage").getElementsByTagName("img")[0];
    setupImage(imageElement);
}
 
function ImageLoaded(sender, args) {
    setupImage(args.get_image());
}
 
function setupImage(imageElement) {
    // your code
    console.log(imageElement);
}

Regards,
Antonio Stoilkov
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.

 
Tags
ImageGallery
Asked by
Alex Tushinsky
Top achievements
Rank 2
Answers by
Antonio Stoilkov
Telerik team
Share this question
or