Add custom class to ImageGalleryItemBase

[Alex Tushinsky]

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

[Antonio Stoilkov]

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