Not working under Webkit (Chrome/Safari) on first load

Hello. My problem was: Default Nivo Slider settings, IE8 and FF works fine, but when you go with Chrome, there is nothing in sliders place, its just plain empty area. Anyway the slider is enabled, because with Firebug you can see the code.

Interesting: Lets say my slider is in a home page. When I visit my page, no slider. Then lets say I click some link like Contact, go to Contact page and then click back button in your Chrome browser and slider will appear working. If you refresh, its all gone again.

So, my solution is: You need to set correct width and height in your .css (I use my custom themes styles.css in themes folder). An example:

#views-jqfx-nivo-slider-images-1 {
	height: 228px !important; /* height of your images shown in a slider */
	width: 678px !important; /* width of your images shown in a slider */
}

That fixed my problem.

Tools used: views_nivo_slider-7.x-2.x-dev.zip, views_jqfx.tar.gz, nivo-slider2.5.2.zip (plugin from official Nivo Slider website, this must be unpacked into the sites/all/libraries folder)

Hello I've been trying to get this working on 7.2x can you give me a slightly detailed steps for creating the views and content types for this? I've been running into problem after problem. Thanks

Its been 3 months since the last dev update. Hope this get stable soon.

-Mel.

my solution but it will cause some trouble with ajax after that

I found going into modules > views_nivo_slider > styles > default, opening custom-nivo-slider.css, and putting in the height and width of my pictures under .nivoSlider img did the trick. I haven't seen any cross-browser compatibility issues, and it pleases chrome.

I'm not sure if I'm breaking some sort of rule by directly editing the css within the module files, but it worked.

This should be related to image dimension not generated, see http://drupal.org/node/908282#comment-3482664
Also keep an eye out for #1129642: Populate HTML image tags with dimension attributes (like D6 imagefield) without re-introducing I/O

Please try out this patch to see if there are any problem.

I applied the patch in #9 and so far i haven't experienced this issue anymore in chrome.

@#9

I'm glad to confirm that this issue is solved. Works in FF3.6, Chromium and Opera.

Applied patch #9 and all it did was extend the width to 100% of container, did not expand height.

Patch #9 only added 1 line of code to ensure the page is loaded before getting the image size, which is how webkit works.
If you are getting 100% likely indicates you've set it in your CSS or style somewhere.

#2 worked, as I expected, as did #9; but #9 seems to be the "correct" solution? Using #9; thanks! (Update: I continue to need both, as elements below the slider don't push down as they need to to display correctly.)

subscribe

to patch today

(function ($) {

  Drupal.behaviors.views_nivo_sliderBehavior = {
    attach: function (context) {
      $('.views-nivo-slider:not(.nivo-slider-processed)', context).each(function() {
        var vns = $(this),
            id = vns.attr('id'),
            cfg = Drupal.settings.views_nivo_slider[id],
            imgs = $('img', vns),
            imgLoadsCount = 0;

        function processImage(img) {
          var hmax = (vns.data('hmax') > img.height()) ? vns.data('hmax') : img.height(),
              wmax = (vns.data('wmax') > img.width()) ? vns.data('wmax') : img.width();

          vns.width(wmax).height(hmax).data('hmax', hmax).data('wmax', wmax);
          if (++imgLoadsCount == imgs.length) vns.nivoSlider(cfg); //when all images done 
        }

        // Fix sizes
        vns.data('hmax', 0).data('wmax', 0);

        imgs.each(function() {
          var img = $(this);
          if (img.height() == 0) img.load(function() {processImage($(this));}); //if image is not ready yet (Crome's js even faster then image loading)
          if (img.height() > 0) processImage(img); //if js slooower then image loading (IE is a booger)
        });

      })
          .addClass('nivo-slider-processed');
    }
  };

})(jQuery);

Boss! Push beta release!

sub

#18 works for me.

#18 works for me too

sub

Committed patch in #9: 463e12f

Committed to 6.x-2.x-dev branch