Question

我试图在我的blueimp图片幻灯片上显示描述。但它不起作用。请帮帮我。

<script>
        $(document).ready(function () {
            blueimp.Gallery(
                document.getElementById('mymedia').getElementsByTagName('a'),
                {
                    container: '#blueimp-gallery',
                    onslide: function (index, slide) {
                        var text = this.list[index].getAttribute('data-description'),
                            node = this.container.find('.description');
                        node.empty();
                        if (text) {
                            node[0].appendChild(document.createTextNode(text));
                        }
                    }
                }
            );
        });
    </script>
    <style>
        .blueimp-gallery > .description {
            position: absolute;
            top: 30px;
            left: 15px;
            color: #fff;
            display: none;
        }

        .blueimp-gallery-controls > .description {
            display: block;
        }
    </style>


<div id="blueimp-gallery" class="blueimp-gallery">
            <!-- The container for the modal slides -->
            <div class="slides"></div>
            <!-- Controls for the borderless lightbox -->
            <h3 class="title"></h3>
            <p class="description"></p>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
            <!-- The modal dialog, which will be used to wrap the lightbox content -->
            <div class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" aria-hidden="true">&times;</button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body next"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left prev">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                                Previous
                            </button>
                            <button type="button" class="btn btn-primary next">
                                Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

图片位于网格下方。

<asp:GridView....>
<Columns>
<ItemTemplate>
<div class="media" id="mymedia">
     <a href='<%# Eval("ImageUrl") %>' class="pull-left" data-gallery="#blueimp-gallery-all" data-description="ABCDEFGH" title='<%# Eval("ImageName") %>'>
        <img src='<%# Eval("ImageUrl") %>' class="media-object img-thumbnail" style="width: 150px" data-description="ABCDEFGH"></img>
     </a>
<div class="media-body">
         <asp:Label runat="server" Text='<%# Bind("ImageName") %>' ID="Label3" CssClass="media-heading"></asp:Label><br />
  <asp:Label runat="server" Text='<%# Bind("DateTaken","{0:d}") %>' ID="Label4"></asp:Label>
              </div>
  </div>
</ItemTemplate>
</Columns>
</asp:GridView>

幻灯片显示效果很好，但问题是它没有显示说明文字。在这里，我添加了一个用于测试的虚拟文本。

Answer 1

我可以找到一个带有jquery的解决方案

$('#blueimp-gallery').on('slide', function (event, index, slide) {
                $(this).children('.description')
                    .text($('#media a').eq(index).data('description'));
 });

但我有一个以上的网格。问题是由于索引，它在图像上显示不正确的描述。因此，我需要明确地在数据库上显示说明。请有人帮忙。

Showing description in lightbox using Jquery plugin blueimp gallery

显示blueimp Carousel的说明

1 个答案: