telerik - 灯箱控件使用div与背景图像而不是图像标签

时间:2018-06-15 14:38:46

标签: .net vb.net telerik telerik-mvc

我正在尝试从一些图像创建一个灯箱控件,但我没有使用图像标签,而是使用了div作为背景图像(因为我在悬停时做了一些时髦的东西)

有没有办法在点击时使用带有背景图像的div来打开telerik灯箱

这是我的代码:

//i want to use this div 
       <div style="background-image: url(../images/TeamImages/Asset5.png); width: 200px; height: 200px; background-repeat: no-repeat;" id="Image1">
    </div>

//instead of these images
    <asp:Image ID="Image2" runat="server" ImageUrl="~/images/JobImages/t1.jpg" />
    <asp:Image ID="Image3" runat="server" ImageUrl="~/images/JobImages/t3.jpg" />

    <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" Modal="true" LoopItems="true" ZIndex="100000">
        <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
            <AnimationSettings HideAnimation="Fade" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Fade" />
        </ClientSettings>
        <Items>
            <telerik:RadLightBoxItem ImageUrl="~/images/JobImages/testlightbox.jpg" Title="Job Name" TargetControlID="Image1"
                Description="Job Number <br/> job description 3 lines <br/> 1<br/>2<br/>3 <br/>">
            </telerik:RadLightBoxItem>
            <telerik:RadLightBoxItem ImageUrl="~/images/JobImages/testlightbox.jpg" Title="Mountain Pine Cones" TargetControlID="Image2"
                Description="1">
            </telerik:RadLightBoxItem>
            <telerik:RadLightBoxItem ImageUrl="~/images/JobImages/testlightbox.jpg" Title="Mountain Pine Cones" TargetControlID="Image2"
                Description="2">
            </telerik:RadLightBoxItem>
            <telerik:RadLightBoxItem ImageUrl="~/images/JobImages/testlightbox.jpg" Title="Mountain Pine Cones" TargetControlID="Image2"
                Description="3">
            </telerik:RadLightBoxItem>
            <telerik:RadLightBoxItem ImageUrl="~/images/JobImages/testlightbox.jpg" Title="Mountain Pine Cones" TargetControlID="Image2"
                Description="4">
            </telerik:RadLightBoxItem>
        </Items>
    </telerik:RadLightBox>

0 个答案:

没有答案