Nivoslider：后来改变滑块的宽度和高度

我正在开发一个TYPO3站点的移动版本。在那里我使用插件nivoslider，它使用官方已知的Nivo滑块。现在我必须减小滑块的大小。我怎么能达到这个？Nivoslider：后来改变滑块的宽度和高度

在TYPO3中有一个宽度和高度的插件页面上的设置，但这也会影响全尺寸的网站。因为没有手册，我不认为我可以使用Typoscript来设置宽度和高度。

我试图设置宽度与CSS

.nivoSlider { 
    width: 300px !important; 
    height: auto !important; 
} 

.nivoSlider img { 
    width: 300px !important; 
    height: auto !important; 
}

但是当滑块被装载它使用图像的正常大小。只有滑块容器本身裁剪图像，但高度错误（只能看到点和图像的一小部分）。

我也试着查看文档，看看我是否可以设置宽度和高度。但我没有找到任何设置。是否有任何JavaScript/jQuery解决方案我可以使用？这不起作用：

$(document).ready(function() { 

    $('.nivoslider img').each(function(index, element){ 
    alert('test'); 
    $(this).width(300); 
    var src = $(this).attr("src"); 
    src = 'fileadmin/templates/timthumb/timthumb.php?src=' + src + '&w=300'; 
    $(this).attr("src", src); 
    }); 
});

似乎.nivoslider是继建，但我的代码之前执行。这是确认：

if ($('.nivoslider').length != 0) { 
    alert('element found'); 
    }else{ 
    alert('element NOT found'); 
    }

上面的代码给我element NOT found，因为扩展的初始化是在header的结束，我的代码之前。我如何在TYPO3的头部末尾添加Javascript代码？

现在，我想我会用这个CSS，因为我没有看到任何解决方案：

.nivoslider { display: none; }

来源

2012-11-20 testing

您将需要至少摆脱脚本放在图像上的尺寸属性。 –

问题是我的功能从来没有被调用过。所以我不能删除任何东西... – testing

你想看看这个...

http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/

########################## UPDATE ##################### ########

上述链接已被移除，请参见例如下列：通过在HTML文件和变化宽度img标签改变高度通过在.slider-包装改变宽度

http://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/index.html

来源

2012-11-20 17:24:12

感谢您的链接。我试图交换'nivo-slider.css'和'jquery.nivo.slider.pack.js'，但我不认为这很简单。现在我没有看到任何按钮（next，prev，1，2，3，4，..），并且滑块没有响应。我还尝试删除宽度和高度属性（手动在Firebug中），但滑块仍不响应。对于主题我需要在滑块周围有一个'div'容器，但是使用这个扩展名很难获得。我将不得不自己更新扩展...有没有其他的可能性？ – testing

如果滑块仅用于本网站，您可能不会通过直接在插件中进行更改而出错。 –

现在我试着说你的话。除了几件事外，它似乎工作。在使用iPhone作为用户代理的FF中裁剪图像（如果调整窗口的大小比确定的大，但仅限于此图片 - 不是下一张）。在IE7中，底部的圆点缺失。在我的iPhone上它似乎工作，但过渡不如桌面版本。 – testing

变化高度在style.css中。

来源

2013-12-20 18:57:51 user3117737

Nivoslider：后来改变滑块的宽度和高度

回答

相关问题