标签: nivo-slider

我正在使用优秀的Nivoslider插件在我的主页上展示一组照片,目前是5.所有工作都很好,但每张照片都增加了大约150K的页面重量.我实际上想要展示大约10个"幻灯片",但由于所有这些图像都是在页面开头预先加载的,因此页面权重很快会变得太大,特别是因为许多用户可能不会等待"显示"完成.

我想知道是否有可能不预先载入图像,或者尤为明显,只有X领先的图像.我在文档中找不到任何关于它的内容,所以我认为它不是本机支持的.有任何想法吗？

我的主页上有一个图片横幅.我使用nivo滑块来显示图像幻灯片,它工作正常.

但是,我偶尔会注意到,firebug会为图像中的任何一个显示错误"Image corrupt or truncated",例如:banner1.png

但图像幻灯片仍然显示并且工作正常.知道为什么出现错误？

谢谢...

我正在尝试在我的magento安装上实现nivoslider.我只是将下载的演示包中的内容(我已经在我的Firefox上测试并运行得非常流畅)复制到magento.我做了所有的功课

• 将所有必需的js和css文件复制到我主题的皮肤文件夹中

• 在page.xml上添加这些文件

  <reference name="head">
    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    ...
    <action method="addCss"><stylesheet>css/nivo-slider.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/themes/default/default.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/themes/default/pascal.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/themes/default/orman.css</stylesheet></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery-1.6.2-no-conflict.js</name><params/></action>
    ...
    <action method="addItem"><type>skin_js</type><name>js/jquery.nivo.slider.pack.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/my_own_custom_script.js</name><params/></action>
    ...
  </reference>
  

  Run Code Online (Sandbox Code Playgroud)

• 复制magento cms页面上的滑块html部分

• 最后添加jQuery(document).ready(function($) { $('#slider').nivoSlider(); });到my_own-custom_script.js

它运行但不顺利.有时幻灯片暂停了一段时间.其他时候,其中一张图片幻灯片不会显示出来.动画也有点闪烁.滑块导航(上一个下一个按钮和滑块底部的圆圈)有时会在我的点击事件中无响应.令我困惑的是,所有这些症状有时会发生,有些时候它运行良好.

哦,还有一件事,这个nivoslider每当我用firebug检查它的一个元素时,也会让我的firefox崩溃.

任何人都可以给我一些线索,为什么会发生这种情况？我怀疑这与magento的Prototype脚本的冲突有关(尽管它已经在noconflict模式下运行)

我有这个网站,我使用nivoslider和我自己的下拉菜单,但恰好一旦滑块显示图片菜单落后于幻灯片.如果你徘徊"Bilservice",我可以在网站上看到我的工作

http://tantobil.se/

我已经尝试过z-index但什么不是,但我不能让它工作？这是我在这里失踪的东西吗？所有的帮助非常感谢

所以我正在使用fullpage.js为我正在研究的网站.我有一个部分包含使用Nivo灯箱在灯箱中打开的团队领导者的生物.当您点击此人时,他们的灯箱会打开,但如果您滚动浏览他们的信息(在移动设备中发生),该部分会滑动.

我从fullpage.js找到了这个功能

$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);

当Nivo Lightbox打开/关闭以调用此功能时,是否有可以测试的事件？

示例:http: //jeffreyroche.us/solarTestBed/#team/2 单击某人然后向上滚动.

我的网页上有nivo滑块.我需要显示各种宽度和高度的图像.较大的图像显示在较小的图像后面.请参考以下屏幕截图.

我必须删除在小图像后面显示更大的图像.是否有可能使用nivo滑块？

建立一个新的网站,但在IE中发生了一些事情.我已经购买了Nivo Slider for wordpress插件,它工作正常但是它没有在IE中的横幅下显示缩略图.

这就是firefox中的样子

这就是它在IE中的样子

因为这是一个插件(并且该网站在2天后没有给我任何支持)我真的没有源CSS但我希望你可以看看它与开发工具来看看为什么它可能没有显示在IE？

这是我发现的

.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    height: auto;
    width: auto;
}

任何帮助或建议表示赞赏.

UPDATE

在输入新代码后,.banner-bottom显示在所有其他页面上的横幅顶部.

我在一个div中使用Nivo Slider jQuery插件,其尺寸小于我正在显示的图像.当滑块滑动到第二个图像时,图像会正确缩小.

但是当第一次显示第一个图像时(直接在加载页面之后),它仅在宽度上缩放,而在高度上不缩放.我怎么能改变呢？

示例:假设我的所有图像都具有1024*768像素的大小.div的宽度为400px.我在滑块中有3个图像.

• 加载图像1后直接显示400*768像素 (错误)
• 然后它以400*300像素滑动到图像2
• 然后以400*300像素成像3
• 然后到400*300像素的 图像1 (右)
• ...

编辑:我刚注意到,这只发生在IE中,在Firefox中没有这样的错误.

我正在使用网站上的nivo滑块,在加载之前,所有图像在页面上都是静态的,大约一秒钟.一旦nivo滑块加载,它们都会位于滑块中.

有办法解决这个问题吗？在加载任何页面之前先使滑块触发？网站www.pegasusproperty.co.uk我用于滑块的代码是

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade',
        animSpeed: 700,
        pauseTime: 4000,
    });
});
</script>    this code is in the head of the document 

它在Firefox中发挥得最好

问候

有用!!! http://jsfiddle.net/jupago/W6CkP/

基于这个主题:暂停Nivo滑块

我能够让它停在第一张图像上.

这是我的代码.我要停止动画两次,因为我希望它在幻灯片放映结束后也停止:

$(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 500, // Slide transition speed
    pauseTime: 5000,
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true,  // Next & Prev navigation
    controlNav: false, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: false, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: 'previous', // Prev directionNav text
    nextText: 'next', // Next directionNav text
    randomStart: false, // …