在每个轮播图片上添加Disqus评论

时间:2015-10-19 09:23:47

标签: javascript jquery twitter-bootstrap disqus

我正在使用轮播来循环浏览服务器中的图像。

我想在每个轮播中添加一个用于评论的disqus帖子

我的代码将图像添加到我的Carousel并显示如下:

$('#imgModal').on('show.bs.modal', function(event) {

var indicators = $(this).find('.carousel-indicators');
var items = $(this).find('.carousel-inner');

var targPath = $(event.relatedTarget).attr('src').split('/');
var imgsPath = targPath.splice(0, targPath.length - 3).join('/') + '/';
var target = {
    date: targPath[0],
    category: targPath[1],
    name: targPath[2]
};
 // Lister les répertoires (dates)
$.ajax({
    url: imgsPath,
    success: function(data) {

        var dates = [];
        var date;
        $(data).find('a').each(function() {
            date = $(this).attr('href').replace(/\/$/, '');
            if (date.match(/[0-9]{6}$/)) dates.push(date);
            dates.sort();
        });

        var i = 0;
        var path;
        dates.forEach(function(date) {
            // Vérifer que le fichier existe
            path = imgsPath + date + '/' + target['category'] + '/' + target['name'];
            $.ajax({
                url: path,
                async: false,
                success: function() {

                    // L'ajouter au carousel
                    item = $(
                        '<div class="item">'+
                            '<img src="'+path+'" alt="'+target['name']+'">'+
                            '<div class="carousel-caption">'+
                                '<h3>'+date+'</h3>'+
                                '<p>'+target['name']+'</p>'+
                            '</div>'+
                        '</div>'

                    ).appendTo(items);
                    indicator = $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo(indicators);

                    // Afficher l'image cliquée
                    if (date == target['date']) {
                        item.addClass('active');
                        indicator.addClass('active');
                    }

                    i++;

                }
            });
        });

    }
});
});

我想在旋转木马中为我的每个图像集成我的disqus脚本:

disqus脚本:

    <div id="disqus_thread"></div>
<script type="text/javascript">

        var disqus_shortname = 'nedox149';

      (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

1 个答案:

答案 0 :(得分:0)

我已经解决了我的问题,我将此示例用于我的解决方案:https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html