enhanced-basemap-gallery-widget/src/widgets/eBasemapGallery/Widget.html

This widget is enhanced to include the ability to fade between basemaps.

<div>
  <div data-dojo-attach-point="selectedBasemapGalleryDiv" style="width:100%;height:100px;">
    <div style="width: 100%;height: 100px;margin: auto;">
      <div data-dojo-attach-point="selectedBasemap1" class="esriBasemapGalleryNode2 esriBasemapGallerySelectedNode basemap1"
           style="width: 87px;" data-dojo-attach-event="mouseover:_showRemoveBtn,mouseout:_hideRemoveBtn">
        <a href="javascript:void(0);">
          <img class="esriBasemapGalleryThumbnail" src="widgets/eBasemapGallery/images/BlankThumbnail.png" title="" alt=""/>
        </a>
        <div class="esriBasemapGalleryLabelContainer">
          <span alt="" title=""></span>
        </div>
        <div class="bm-removebtn" data-dojo-attach-event="click:_removeBtnClick" id="removeBM1" title="${nls.remove}"></div>
      </div>
      <div data-dojo-attach-point="spacer1" style="height:100px;float:left;"></div>
      <div data-dojo-attach-point="selectedBasemapGalleryNode" class="esriBasemapGalleryNode2 esriBasemapGallerySelectedNode currentSelected" style="width: 87px;">
        <a href="javascript:void(0);">
          <img class="esriBasemapGalleryThumbnail" src="widgets/eBasemapGallery/images/default.jpg" title="" alt=""/>
        </a>
        <div class="esriBasemapGalleryLabelContainer">
          <span alt="" title=""></span>
        </div>
      </div>
      <div data-dojo-attach-point="spacer2" style="height:100px;float:left;"></div>
      <div data-dojo-attach-point="selectedBasemap2" class="esriBasemapGalleryNode2 esriBasemapGallerySelectedNode basemap2"
           style="width: 87px;" data-dojo-attach-event="mouseover:_showRemoveBtn,mouseout:_hideRemoveBtn">
        <a href="javascript:void(0);">
          <img class="esriBasemapGalleryThumbnail" src="widgets/eBasemapGallery/images/BlankThumbnail.png" title="" alt=""/>
        </a>
        <div class="esriBasemapGalleryLabelContainer">
          <span alt="" title=""></span>
        </div>
        <div class="bm-removebtn" data-dojo-attach-event="click:_removeBtnClick" id="removeBM2" title="${nls.remove}"></div>
      </div>
    </div>
  </div>
  <div style="margin: 0 auto; width:100%; display: none;" data-dojo-attach-point="faderDiv">
    <div data-dojo-attach-point="fader" data-dojo-type="dijit/form/HorizontalSlider" showbuttons="true" value="50" minimum="0" maximum="100" intermediatechanges="false" style="width:80%; margin: 0 auto;" data-dojo-attach-event="change: _onFaderChanged">
      <div data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-attach-point="faderLabels" container="topDecoration" style="height: 1.5em; font-size: 0.8em; color: #666" labels="Basemap1,50/50,Basemap2">
      </div>
    </div>
  </div>
  <hr style="clear:both;">
  <div data-dojo-attach-point="basemapGalleryDiv"></div>
</div>