小编Rob*_*eal的帖子

社交图标不使用Wordpress上的无限滚动

我们正在为工作中的客户建立一个网站,可以在这里找到:http://ethercreative.net/studio_social/ 这是一个非常简单的wordpress主题,但是无限滚动插件和社交之间的冲突引发了复杂性图标.

每篇文章都是为了在最后显示一个块,里面有G +,FB和Twitter社交图标.这意味着在开始时显示约4个帖子,然后当你滚动时它意味着加载下一组.

这些事情中的每一个都有效,但不是在一起.

当无限滚动加载下一个帖子时,它只显示一个像facebook的按钮,而不是其他两个社交图标.

奇怪的是,它留下了代码块:

<span class="icons">
                    <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></g:plusone>                <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp;
                    <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span>
</div>
Run Code Online (Sandbox Code Playgroud)

我知道问题是什么以及为什么会发生这种情况,但我对javascript并不是很了解,也不知道用什么来修复它.

我正在使用Wordpress 3.3.1,带有无限滚动插件(http://wordpress.org/extend/plugins/infinite-scroll/)和digg digg用于社交图标(http://wordpress.org/extend/plugins/Digg的-Digg的/)

无限滚动插件确实能够在抓取新的帖子集后添加onLoad事件.那么我应该在这里添加什么?

感谢您提前提供的所有帮助!祝你今天愉快.


更新:经过一些研究,我也修了推特.现在只需要Google Plus即可解决问题.twitter所需的代码是:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Run Code Online (Sandbox Code Playgroud)

再次更新:找到Google Plus代码:

(function(){var po = document.createElement('script'); po.type ='text/javascript'; po.async = true; po.src ='https://apis.google.com/js/ plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po,s);})();

我学到了什么?在Stack Overflow上询问之前,请进行更多Google搜索.至少是未来人们对这个问题的回答.

javascript php wordpress facebook google-plus

14
推荐指数
1
解决办法
3325
查看次数

如何制作无休止的滚动img滑块?

我几乎完成了一个工作客户的网站,它在主页上有一个大的全宽动态滑块.由于它们提供的规格很少,目前滑块非常基本; 它只需通过更改UL上的左侧CSS属性从左向右滚动.显然,由于这个原因,一旦它到达终点,它将突然回滚到开头,这是客户显然不想要的.

我不是jQuery的专家,我想知道如何轻松地更改此滑块,以便它将无限滚动.

它还使用了一个简单的导航,它有四个幻灯片,底部有一个小控件栏,每个控件栏上都有标题,可以快速跳转到特定的幻灯片.它还有一个箭头,跟随最新的幻灯片.

我找到了使其循环的解决方案,但我看不出任何与导航兼容的外观.我真的很想不必从头开始,这有可能吗?

这是我目前正在使用的所有代码,如果你想要我也可以发布的CSS,但我认为它不太需要.

非常感谢提前.

编辑:jsFiddle结果

http://jsfiddle.net/hCXhZ/5/embedded/result/

http://jsfiddle.net/hCXhZ/5/

您可能需要将结果部分放大以补偿响应式CSS.我只是将样式表链接起来,因为我感觉很懒,而且找不到文件中的所有部分也无法被诅咒......

jQuery的

$(function(){ 
    var screenWidth = $(window).width();
    $("ul.slides li").css("width",screenWidth);

    $(window).resize(function() {
        var SlideWidth = $("ul.slides li").width();
        var screenWidth = $(window).width();
        $("ul.slides li").css("width",screenWidth);
    });



    $('.slider-controls li').click(function(){
        var slideToID = $(this).children().attr('rel');
        var SlideWidth = $("ul.slides li").width();
        var slideTo = (slideToID * SlideWidth) - SlideWidth;
        var arrowTo = 85+(240*(slideToID-1));


        $('.slider-controls li').removeClass('active');
        $(this).addClass('active');
        $('ul.slides').animate({"left": -slideTo});
        $('div.slider-arrow').animate({"left": arrowTo});
    });

});

function slider() {

    var SlideWidth = $("ul.slides li").width();
    var SlideCount = $("ul.slides li").size();
    var TotalWidth …
Run Code Online (Sandbox Code Playgroud)

jquery html5 slider infinite-loop

7
推荐指数
1
解决办法
7026
查看次数