0

このjQueryhttp ://jsfiddle.net/awaises/9tFLK/をギャラリーに適用したいと思います。私の友人はASP.NETでWebサイトを開発し、DataListを使用しました。コードをhtmlで実装できますが、ASP.Netではコードをどこに適用すればよいか理解できません。jqueryを実装するために何ができるか教えてください。データリストのコードは以下のとおりです…（何らかの理由で、より大きな記号とより小さな記号が表示されないため、次のコードで丸括弧を使用しました）

<asp:DataList ID="dalphoto" runat="server" BorderStyle="Solid" BorderWidth="0px" RepeatColumns="6" RepeatDirection="Horizontal" DataKeyField="HotelPhoto">
    <AlternatingItemStyle BorderStyle="Solid" BorderWidth="0px" />
    <SeparatorStyle BorderStyle="Solid" BorderWidth="0px" />
    <ItemTemplate>
    <asp:Image ID="Image" width="80px" height="80px" runat="server" ImageUrl='<%# "~/Photos/HotelPhotos/" + Eval("Photourl") %>' />
    </ItemTemplate>
</asp:DataList>
4

1 に答える 1

1

DataListのマークアップを次のように変更します

<asp:DataList ID="dalphoto" runat="server" BorderStyle="Solid" BorderWidth="0px" RepeatColumns="6" RepeatDirection="Horizontal"  DataKeyField="HotelPhoto">
        <ItemTemplate>
            <div class="thumbnail-item">
                <asp:Image ID="Image" width="80px" height="80px" runat="server" CssClass="thumbnail" ImageUrl='<%# "~/Photos/HotelPhotos/" + Eval("Photourl") %>'/>
                <div class="tooltip"><img src="<%# "Photos/HotelPhotos/" + Eval("Photourl") %>" alt="" width="330" height="185" /><span class="overlay"></span>
            </div>
            </div>   
        </ItemTemplate>
    </asp:DataList>

フィドルからcssとjavascriptを取得し、変更せずに使用します。

CSS

.thumbnail-item { 
    /* position relative so that we can use position absolute for the tooltip */
    position: relative; 
    float: left;  
    margin: 0px 5px; 
}

.thumbnail-item a { 
    display: block; 
}

.thumbnail-item img.thumbnail {

}

.tooltip { 
    /* by default, hide it */
    display: none; 
    /* allow us to move the tooltip */
    position: absolute; 
    /* align the image properly */
}

.tooltip span.overlay { 
    /* the png image, need ie6 hack though */
    /* put this overlay on the top of the tooltip image */
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: block; 
}

JavaScript

// Load this script once the document is ready
    $(document).ready(function () {

        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // Set the z-index of the current item, 
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','15')
            .children("div.tooltip")
            .css({'top': y + 10,'left': x + 20,'display':'block'});

        }).mousemove(function(e) {

            // Calculate the position of the image tooltip            
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // This line causes the tooltip will follow the mouse pointer
            $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

        }).mouseleave(function() {

            // Reset the z-index and hide the image tooltip 
            $(this).css('z-index','1')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });

    });​

</ p>

于 2012-10-30T23:48:42.447 に答える