用皇家滑块和砌体初始化javascript

时间:2013-01-19 15:54:43

标签: jquery jquery-plugins slider initialization jquery-masonry

抱歉,这是一个noob类型的问题。我的JS下面有一个问题。以下这些元素与RoyalSlider相关:http://dimsemenov.com/plugins/royal-slider/documentation/和Masonry。

当我将砌体调用放在JS的底部时,它不会加载。如果我将它放在顶部,它会加载,但会敲出所有滑块调用。

即使我将脚本分开并将它们放在单独的调用中:

jQuery(document).ready(function($) {

......问题仍然存在(将一个呼叫置于另一个呼叫之上,取消另一个呼叫)。

这是我的初始化脚本:

jQuery(document).ready(function($) { 

var rsi = $('#slideshow').royalSlider({
    startSlideId: 1,
    transitionSpeed: 300,
    slidesSpacing: 0,
    loop: true,
    autoHeight: false,
    arrowsNav: false,
    fadeinLoadedSlide: true,
    controlNavigationSpacing: 0,
    controlNavigation: 'tabs',
    imageAlignCenter:true,
    loopRewind: false,
    numImagesToPreload: 3,
    usePreloader: true,
    keyboardNavEnabled: false,
    sliderDrag: false,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 980,     
    autoScaleSliderHeight: 653,
    allowCSS3: true,
    autoPlay: {
      enabled: true,
      pauseOnHover: true,
      delay: 4500,
      stopAtAction: false
    },
    thumbs: {
      firstMargin: false,
      spacing: 0,
      fitInViewport: true
    }

    }).data('royalSlider');
        $('#next').click(function() {
        rsi.next();
    });
        $('#prev').click(function() {
        rsi.prev();
    });

var slider = $('#wrp_hero');
    slider.after(slider.find('.rsNav'));


var rsi2 = $('#slider').royalSlider({
    transitionType: 'slide',
    arrowsNav: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    loop: false,
    loopRewind: false,
    keyboardNavEnabled: true,
    autoScaleSlider: false,
    sliderDrag: false,
    autoHeight: true
});

var $container = $('#portfolio');
    $container.imagesLoaded( function(){
    $container.masonry({
    itemSelector : '.box'
    });
});

//end doc ready function    
});

这是在我的HTML文档底部的body标签上方。 s.js是我的初始化脚本(如上所述):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/j/l/jquery-1.8.3.min.js"><\/script>')</script>
<script src="/assets/j/l/masonry.2.1.07.min.js"></script>
<script src="/assets/j/l/royalslider.min.js"></script>
<script src="/assets/j/p.js"></script>
<script src="/assets/j/s.js"></script>
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

有人能指出我正确的方向吗?

0 个答案:

没有答案