将数据传递到 blueimp 库答案

【问题标题】：Passing data to blueimp gallery将数据传递到 blueimp 库
【发布时间】：2014-05-29 01:09:09
【问题描述】：

我正在尝试将数据传递到我的 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 的span 中。有什么想法吗？

【问题讨论】：

标签： javascript gallery parameter-passing blueimp

【解决方案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+'">';

【讨论】：