我们正在为工作中的客户建立一个网站,可以在这里找到: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&locale=&layout=button_count&action=like&width=92&height=20&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>
<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搜索.至少是未来人们对这个问题的回答.
我几乎完成了一个工作客户的网站,它在主页上有一个大的全宽动态滑块.由于它们提供的规格很少,目前滑块非常基本; 它只需通过更改UL上的左侧CSS属性从左向右滚动.显然,由于这个原因,一旦它到达终点,它将突然回滚到开头,这是客户显然不想要的.
我不是jQuery的专家,我想知道如何轻松地更改此滑块,以便它将无限滚动.
它还使用了一个简单的导航,它有四个幻灯片,底部有一个小控件栏,每个控件栏上都有标题,可以快速跳转到特定的幻灯片.它还有一个箭头,跟随最新的幻灯片.
我找到了使其循环的解决方案,但我看不出任何与导航兼容的外观.我真的很想不必从头开始,这有可能吗?
这是我目前正在使用的所有代码,如果你想要我也可以发布的CSS,但我认为它不太需要.
非常感谢提前.
编辑:jsFiddle结果
http://jsfiddle.net/hCXhZ/5/embedded/result/
您可能需要将结果部分放大以补偿响应式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)