Add custom class to ImageGalleryItemBase

2 posts, 0 answers
  1. Alex Tushinsky
    Alex Tushinsky avatar
    52 posts
    Member since:
    Feb 2006

    Posted 11 Nov 2014 Link to this post

    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)
    "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,

  2. Antonio Stoilkov
    Antonio Stoilkov avatar
    530 posts

    Posted 14 Nov 2014 Link to this post

    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.
        <ClientEvents OnImageLoaded="ImageLoaded" />
    function pageLoad() {
        var imageElement = $telerik.getElementByClassName(document.body, "rigActiveImage").getElementsByTagName("img")[0];
    function ImageLoaded(sender, args) {
    function setupImage(imageElement) {
        // your code

    Antonio Stoilkov

    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.

  3. DevCraft R3 2016 release webinar banner
Back to Top