My slideshow always works fine when the page first loads. After a while however, the slideshow is likely to start showing blank slides instead of images. I've seen this happen in Firefox and Chrome.

The correct image does display briefly every time the slideshow advances, but it always gets replaced with a blank slide. The bug seems to occur at random times, and it usually does not fix itself, but there have been a few times where it has fixed itself after I let it sit for a while.

Of note: At one point I had slides 577px wide displayed in a 540px container, with overflow hidden. When the bug occurred, you would see a blank space for the current slide, plus 37px of the right side of the previous slide (horizontal scroll). I now have the container set to 577px, and the space appears totally blank when the bug happens, except for the brief moment when the slideshow advances. Also note that when the slideshow advances, the outgoing slide appears briefly, and the incoming slide is blank -- i.e. the incoming slide does not appear is it's advancing then disappear, it's blank the whole time.

My slideshow HTML looks like this:

    <div id="block-views-e33ac209984cadb9c3a3c8aa94d1eb1d" class="block block-views contextual-links-region">
    <h2>Front Page Carousel</h2>
  <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="views-ui-edit first"><a href="/admin/structure/views/view/front_page_feature_slideshow/edit/block?destination=node">Edit view</a></li>
<li class="block-configure last"><a href="/admin/structure/block/manage/views/e33ac209984cadb9c3a3c8aa94d1eb1d/configure?destination=node">Configure block</a></li>
</ul></div>
  <div class="content">
    <div class="view view-front-page-feature-slideshow view-id-front_page_feature_slideshow view-display-id-block view-dom-id-fae0888e31bd9fab248b9c287a272f33">
      <div class="view-content">
      <ul class="jcarousel jcarousel-view--front-page-feature-slideshow--block jcarousel-dom-1">
      <li class="jcarousel-item-1 odd">  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/content/front-page-slideshow-1"><img typeof="foaf:Image" src="http://ta.local/sites/default/files/field/image/1.jpg" width="577" height="300" alt="" /></a></div>  </div></li>
      <li class="jcarousel-item-2 even">  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/content/front-page-slideshow-2"><img typeof="foaf:Image" src="http://ta.local/sites/default/files/field/image/2.jpg" width="577" height="300" alt="" /></a></div>  </div></li>
      <li class="jcarousel-item-3 odd">  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/content/front-page-slideshow-3"><img typeof="foaf:Image" src="http://ta.local/sites/default/files/field/image/3.jpg" width="577" height="300" alt="" /></a></div>  </div></li>
  </ul>
    </div>
  </div>  </div>
</div>

Relevant CSS looks like this:

#block-views-e33ac209984cadb9c3a3c8aa94d1eb1d {
  float: left;
  width: 577px;
  height: 300px;
  overflow: hidden;
}

#block-views-e33ac209984cadb9c3a3c8aa94d1eb1d h2 {
  display: none;
}

#block-views-e33ac209984cadb9c3a3c8aa94d1eb1d .jcarousel-navigation {
  display: none;
}

Drupal.settings looks like this:

jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"ta","theme_token":"6ZDkatdscvaB5jQNyakTHCAkN3vpZX4xuvveBVd39UY","css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"sites\/all\/modules\/calendar\/css\/calendar_multiday.css":1,"sites\/all\/modules\/date\/date_api\/date.css":1,"sites\/all\/modules\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/domain\/domain_nav\/domain_nav.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/panels\/css\/panels.css":1,"sites\/all\/modules\/video\/css\/video.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"sites\/all\/modules\/taxonomy_access\/taxonomy_access.css":1,"sites\/all\/modules\/admin_menu\/admin_menu.css":1,"sites\/all\/modules\/admin_menu\/admin_menu.uid1.css":1,"sites\/all\/modules\/admin_menu\/admin_menu_toolbar\/admin_menu_toolbar.css":1,"sites\/all\/modules\/flag\/theme\/flag.css":1,"sites\/all\/modules\/jcarousel\/skins\/default\/jcarousel-default.css":1,"sites\/all\/modules\/date\/date_views\/css\/date_views.css":1,"sites\/all\/modules\/context\/plugins\/context_reaction_block.css":1,"sites\/all\/themes\/ta\/css\/reset.css":1,"sites\/all\/themes\/ta\/css\/base.css":1,"sites\/all\/themes\/ta\/css\/layout.css":1,"sites\/all\/themes\/ta\/css\/style.css":1,"sites\/all\/themes\/ta\/css\/views.css":1,"sites\/all\/themes\/ta\/css\/jquery.jscrollpane.css":1,"sites\/default\/files\/fontyourface\/fontsquirrel\/artifika-fontfacekit\/stylesheet.css":1,"sites\/default\/files\/fontyourface\/fontsquirrel\/duru-sans-fontfacekit\/stylesheet.css":1,"sites\/default\/files\/fontyourface\/fontsquirrel\/CuprumFFU-fontfacekit\/stylesheet.css":1,"modules\/contextual\/contextual.css":1,"sites\/all\/themes\/ta\/css\/ie.css":1},"js":{"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5.2\/jquery.min.js":1,"0":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.11\/jquery-ui.min.js":1,"1":1,"modules\/contextual\/contextual.js":1,"sites\/all\/modules\/admin_menu\/admin_devel\/admin_devel.js":1,"sites\/all\/modules\/panels\/js\/panels.js":1,"sites\/all\/modules\/video\/js\/video.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"sites\/all\/modules\/admin_menu\/admin_menu.js":1,"sites\/all\/modules\/admin_menu\/admin_menu_toolbar\/admin_menu_toolbar.js":1,"sites\/all\/modules\/flag\/theme\/flag.js":1,"sites\/all\/modules\/jcarousel\/js\/jquery.jcarousel.min.js":1,"sites\/all\/modules\/jcarousel\/js\/jcarousel.js":1,"sites\/all\/modules\/context\/plugins\/context_reaction_block.js":1,"sites\/all\/themes\/ta\/js\/jquery.jscrollpane.min.js":1,"sites\/all\/themes\/ta\/js\/jquery.mousewheel.js":1,"sites\/all\/themes\/ta\/js\/scripts.js":1}},"jcarousel":{"ajaxPath":"\/jcarousel\/ajax\/views","carousels":{"jcarousel-dom-1":{"view_options":{"view_args":"","view_path":"node","view_base_path":null,"view_display_id":"block","view_name":"front_page_feature_slideshow","jcarousel_dom_id":1},"wrap":"circular","visible":1,"auto":10,"autoPause":1,"animation":1000,"start":1,"easing":"swing","navigation":"after","scroll":1,"skin":"default","selector":".jcarousel-dom-1"}}},"admin_menu":{"destination":"destination=node","replacements":{".admin-menu-users a":"0 \/ 1"},"margin_top":1,"toolbar":{"activeTrail":"\/"}}});

Comments

dayofthedave’s picture

I should also point out that I'm not sure if this is an issue with Views Slideshow or jCarousel module. See #1549528: Slides disappear, seemingly at random.

An example of this issue is here. Just let the front page sit open for a while as you do other things. Come back to it in an hour or so, and you're likely to see the bug in effect.

dayofthedave’s picture

Priority: Normal » Major

I'm also bumping up the priority because I'm using the slideshow as a primary element of my website's front page, and I imagine many other people are too. I can't use Views Slideshow in production until this issue is fixed.

dayofthedave’s picture

After digging around a bit more, I'm thinking this may be a jCarousel library bug, relating to the use of circular wrapping. I am personally abandoning the use of jCarousel in favor of Views Slideshow's default jQuery Cycle option, which I probably should have been using all along anyway.

I suppose this ticket can probably be closed, but I will leave that up to the maintainers.

jcicolani’s picture

I am also experiencing this issue, however I am using the default jQuery Cycle option. The slideshow works, displaying all of the slides and then it doesn't. I also don't have to leave it on the frontpage (where the slideshow is) for this to occur. During development of the site I've bounced all over the place only returning home as a matter of convenience (no cancel button on content creation). While there for about 10 minutes (while I add new modules) I noticed empty slides appearing. I am now down to 2 of 8 slides displaying the image.

Oh, and when I preview the view the images are missing from there as well.

JoDa’s picture

Hi everybody,
have also a look here
The issue seems related to the folder permissions
See ya
J

emicoma’s picture

Hi,
I have the same problem : image slide does not load most of the most as soon as I save something in blocks,mor add a new slide.
If I delete the pic and upload it again, it loads, till the problem
I don't use jcarousel, and use original image, nos style.
Images Re on e right folder, but it seems they are "damaged", they can not load.
Really strange.
Any idea ?
Thanks ?

kristat’s picture

Having the same problem. No jcaousel and no image caching set up. I had image caching set up, but thought it was the problem. Even when using the original image, the behavior is the same. One slide(always the same node, but different images have been uploaded) that just randomly disappears. The slide show only has 2 slides they are both png created the same way. Any suggestions would be great. I am trying to move from D6 to D7 and really need this to work in order to sell D7 to my clients.

spessex’s picture

Same problem. Just have a simple Block with recent images being pulled through. Have tried JoDa advice (see his link) but this makes no difference. I can also see all the images in files/styles/[style name]/public but for some reason Slideshow is pulling in only 3 of 11.

spessex’s picture

Please also note this is not 'random' for me. It is always the same images showing/missing.

spessex’s picture

Have just realised - having speeded up the sequence - that all images do show but it appears like there are massive 'pauses' between the images and the pauses vary dramatically from 1 sec to 15 secs?? For example the first two images might be pulled through as normally and then there a blank for about 5 secs, the next image then pulls through and then there's a blank for 15 secs... and so on. The images then continue like this but please note it is not random, they always appear with the same delays in the sam order.

spessex’s picture

Right, it looks like I have solved my particular issue in relation to this and it's quite silly really. Hopefully this might apply to you guys.

Basically on my view I noticed that not only was I showing the content:logo in the 'fields' section of Views but I was filtering on 'content:published' in addition to also filtering by the content type, hence the view was always cycling through the content types regardless of whether it had a image/logo associated with it (in my content you do not necessarily need to have an image and can leave it blank). Consequently when the slideshow was enacted it just went through the various nodes connected with the content type and when it came to one with no image still showed it in the slide show and hence why it looked blank and why I thought there were long pauses. To fix this I simply removed the content type in the filter and instead filtered on content:logo so it only showed the images as opposed to the content type.

Hope this helps.

Anonymous’s picture

It is a bit buggy but try re-saving the view. Seemed to work for me. S

NickDickinsonWilde’s picture

Status: Active » Closed (cannot reproduce)