javascript - 将数据传递到 blueimp gallery

Question

我正在尝试将数据传递到我的 blueimp 画廊，这将允许我在照片右侧显示用户的照片及其用户名。我已经设置了所有样式，但无法让 url 个人资料图像通过。这就是我目前所拥有的:(是的，我已经查看了其他类似的问题，但也有这些错误。)

传入:

<a href="http://scontent-b.cdninstagram.com/hphotos-frc/t51.2885-15/10354419_326636454151829_1909985918_n.jpg" title="Snapped a good one while I was downtown today. #basilicaofsaintmary #minneapolis #blockparty #july11-12" data-gallery="" data-prof-pic="http://images.ak.instagram.com/profiles/profile_1327603941_75sq_1400444292.jpg" data-username="username">
    <img src="http://scontent-b.cdninstagram.com/hphotos-frc/t51.2885-15/10354419_326636454151829_1909985918_a.jpg" style="width:250px; height:250px; margin-bottom: 10px;">
    </a>

想要将其加载到:

<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>
    <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 id="modal-prof-pic" style="float:right; width:30%;">
                    <span id="insert-prof-pic"></span>
                    <h3>username</h3>
                </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>
                <h5>You may also use your arrow keys to navigate</h5>
            </div>
        </div>
    </div>

</div>

我希望 url 图像进入 <span id="insert-prof-pic"></span>所以我尝试使用:

<script type="text/javascript">

    var gallery = blueimp.Gallery(
        document.getElementById('photo_stream links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery',
            carousel: false,
            onslide: function (index, slide) {
                var prof_pic = this.list[index].getAttribute('data-prof-pic');
                document.getElementById('insert-prof-pic').innerHTML = '<img src="'+prof_pic+'">';
        }
        }
    );




</script>

当我加载页面时，它会自动打开并显示个人资料图片，但是当我尝试在图库中滑动以查看其他照片时，它全部损坏了。然后，如果我退出图库并选择另一张图像，个人资料图片不会显示。

简单:我只是希望能够将数据从 a href 传递到具有单个 id 的跨度中。有什么想法吗？

Answer 1

您应该使用 .class 选择元素，因为 span 元素不是唯一的，它将被复制，它位于每个图像的 for 循环中。制作并编码:

var prof_pic = this.list[index].getAttribute('data-prof-pic');
var node = this.container.find('.insert-prof-pic');
node[0].innerHTML = '<img src="'+prof_pic+'">';