Search code examples
javascriptjquerycsstypo3nivo-slider

Nivoslider: change width and height of slider afterwards

I'm developing a mobile version of a TYPO3 site. There I use the plugin nivoslider which uses the official known Nivo Slider. Now I have to reduce the size of the slider. How can I reach this?

In TYPO3 there is a setting on the plugin page with width and height but this would affect also the full size website. Because there is no manual I don't think I can use Typoscript to set the width and the height afterwards.

I tried to set the width with CSS

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

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

but when the slider is loaded it uses the normal size of the pictures. Only the slider container itself is cropping the images but it has a wrong height (only dots and a small part of the image can be seen).

I also tried to look into the documentation to see if I could set the width and the height somehow. But I didn't found any settings. Are there any javascript/jquery solutions I could use? This doesn't work:

$(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);
  });
});

It seems that .nivoslider is built afterwards, but my code is executed before. This is the confirmation:

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

The code above gives me element NOT found, because the initialisation of extension is at the end of the header and my code is before. How can I include Javascript code at the end of the header in TYPO3?

Now I think I will use this CSS, because I don't see any solution:

.nivoslider { display: none; }

Solution

  • You want to take a look at this...

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

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

    The above link has been removed, please see the following for example:

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