Javascript 将数据传递到blueimp gallery

我正在尝试将数据传递到我的blueimp gallery，这将允许我在照片右侧显示用户的照片及其用户名。我已经设置了所有的样式，但是我无法让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图像进入，因此我尝试使用：

<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传递到span。有什么想法吗？

您应该使用.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+'">';