Edit this page

HTML Output of RadImageGallery

The typical HTML output of RadImageGallery control is the following (some HTML attributes have been removed for simplicity):

<div class="RadImageGallery RadImageGallery_Default" id="RadImageGallery1">
    <div class="rigItemBox" id="RadImageGallery1_ImageArea">
        <input class="rigActionButton rigPrevButton" title="Previous Image" />
        <input class="rigActionButton rigNextButton" title="Next Image" />
        <div id="RadImageGallery1_ImageArea_ImageWrapper" class="rigActiveImage">
            <img src="Image1.png" alt="" />
            <div class="rigToolsWrapper">
                <div style="display: none;" class="rigDescriptionBox">
                    <h4 class="rigTitle"></h4>
                    <p class="rigDescription"></p>
                </div>
                <div class="rigToolbar rigToolbarBottomInside" id="RadImageGallery1_ImageArea_Toolbar">
                    <div class="rigProgressBar">
                        <div />
                    </div>
                    <span class="rigItemsCount">Item 9 of 10</span>
                    <div class="rigControlsSet">
                        <button class="rigActionButton rigPlayButton" title="Play Slideshow"><span class="rigIcon rigPlayIcon"></span><span class="rigButtonText">Play Slideshow</span></button>
                        <button class="rigActionButton rigFullScrButton" title="Enter FullScreen"><span class="rigIcon rigFullScrIcon"></span><span class="rigButtonText">Enter FullScreen</span></button>
                        <button class="rigActionButton rigHideThumbnButton" title="Hide Thumbnails"><span class="rigIcon rigHideThumbnIcon"></span><span class="rigButtonText">Hide Thumbnails</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="RadImageGallery1_ThumbnailsArea" class="rigThumbnailsBoxHorizontal rigPositionBottom">
        <button class="rigActionButton rigScrollPrevButton" title="Scroll Prev"><span class="rigIcon rigScrollPrevIcon"></span><span class="rigButtonText">Scroll Prev</span></button>
        <button class="rigActionButton rigScrollNextButton" title="Scroll Next"><span class="rigIcon rigScrollNextIcon"></span><span class="rigButtonText">Scroll Next</span></button>
        <div class="rigThumbnailsBox">
            <div>
                <ul class="rigThumbnailsList">
                    <li class="rigThumbnailActive">
                        <a href="#">
                            <img alt="0" src="Image1Thumb.png" /></a>
                    </li>
                    <li>
                        <a href="#">
                            <img alt="0" src="Image2Thumb.png" /></a>
                    </li>
                    ...
                </ul>
            </div>
        </div>
    </div>
    <div class="rigPager">
        <div class="rigWrap rigNumPart">
            <a href="#" class="rigCurrentPage"><span>1</span></a>
            <a href="#"><span>2</span></a>
            ...
        </div>
        <div class="rigInfoPart">Page 1 of 8</div>
    </div>
</div>

CSS classes and their usage

  • div.RadImageGallery.RadImageGallery_SkinName - this is the main control element, which holds the skin name. It has a couple of div elements - image area, thumbnails area with thumbnails list and the pager div.

  • div.rigItemBox - contains the image which is currently displayed in the browser.

  • img.rigActiveImage - the currently active image.

  • div.rigToolsWrapper - this is the wrapper element which holds the ToolBar and the Description.

  • div.rigDescriptionBox - contains all elements of the description area.

  • div.rigToolbar - contains the toolbar.

  • h4.rigTitle - element which holds the title of the description if there is any.

  • div.rigProgressBar - visualization of the sideshow progress

  • span.rigItemsCount - span element that shows the items count

  • div.rigControlsSet - contains play, full screen and hide thumbnail buttons

  • div.rigThumbnailsBox[Horizontal] rigPosition[Bottom] - element which contains prev and next scroll buttons and thumbnails box div element (the suffix may vary depending on the position and orientation, which is set by the property ThumbnailsAreaSettings-Position )

  • div.rigThumbnailsBox - contains the image which is currently displayed in the browser.

  • div.rigPager - element which contains the information about the current image index and the total number of images.

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy