javascript - Nivoslider: change width and height of slider afterwards - Stack Overflow

admin管理员组

文章数量:1022612

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; }

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; }

• javascript
• jquery
• css
• typo3
• nivo-slider

Share Improve this question Follow edited Nov 21, 2012 at 8:55 testing asked Nov 20, 2012 at 16:48 testingtesting 20.3k5454 gold badges243243 silver badges432432 bronze badges 2

• Your going to need to at least get rid of the dimenion attributes the script puts on the images. – Alex Gill Commented Nov 20, 2012 at 17:20
• The problem is that my function is never called. So I can't remove anything ... – testing Commented Nov 21, 2012 at 8:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You want to take a look at this...

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

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

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

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

change height by changing the height in the img tag in the html file and change width by changing the width in .slider-wrapper in style.css.

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; }

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; }

• javascript
• jquery
• css
• typo3
• nivo-slider

Share Improve this question Follow edited Nov 21, 2012 at 8:55 testing asked Nov 20, 2012 at 16:48 testingtesting 20.3k5454 gold badges243243 silver badges432432 bronze badges 2

• Your going to need to at least get rid of the dimenion attributes the script puts on the images. – Alex Gill Commented Nov 20, 2012 at 17:20
• The problem is that my function is never called. So I can't remove anything ... – testing Commented Nov 21, 2012 at 8:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You want to take a look at this...

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

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

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

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

change height by changing the height in the img tag in the html file and change width by changing the width in .slider-wrapper in style.css.

本文标签：