I'm having an issue with the slideshows on my site. The first slide always displays correctly, but the image on all subsequent slides is not visible. After digging into the html, it looks like the height and width attributes of the <img> tags are getting set to 0.

Other elements within the slide display correctly. The css for opacity and display function correctly during transitions. However, the height and width attributes never get changed, so the image isn't visible on the slide. I hunted through the js for the module and couldn't find where the height and width of the images are manipulated. I checked it in Chrome, Firefox and Safari, and the problem presented consistently. I also checked theme's style.css to make sure that there was nothing like .views_slideshow_slide img {display:none;}, which would possibly account for why the javascript would calculate the img's height and width as 0.

Any help would be greatly appreciated. Thanks.

Example:
Slide 2 on http://www.spertus.edu/node/561

The markup before js executes:
<img typeof="foaf:Image" src="http://localhost/sites/default/files/styles/gallery_photo/public/photos/Tom-Friedman.jpg?itok=qZ2w5XAz" width="344" height="230" alt="" />

After $(document).ready():
<img typeof="foaf:Image" src="http://localhost/sites/default/files/styles/gallery_photo/public/photos/Tom-Friedman.jpg?itok=qZ2w5XAz" width="0" height="0" alt="">

The Drupal.settings on the page:
{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"spertus_th","theme_token":"gJEGNBk1Pjno_5Fd02gPBw08PUIPJ8ZCuVIYyZR-XrU","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"sites\/all\/libraries\/shadowbox\/shadowbox.js":1,"sites\/default\/modules\/shadowbox\/shadowbox_auto.js":1,"sites\/default\/modules\/nice_menus\/js\/jquery.bgiframe.js":1,"sites\/default\/modules\/nice_menus\/js\/jquery.hoverIntent.js":1,"sites\/default\/modules\/nice_menus\/js\/superfish.js":1,"sites\/default\/modules\/nice_menus\/js\/nice_menus.js":1,"modules\/contextual\/contextual.js":1,"sites\/default\/modules\/views_slideshow\/js\/views_slideshow.js":1,"misc\/jquery.cookie.js":1,"sites\/default\/modules\/devel\/devel_krumo_path.js":1,"sites\/all\/modules\/google_analytics\/googleanalytics.js":1,"0":1,"sites\/all\/libraries\/jquery.cycle\/jquery.cycle.all.min.js":1,"sites\/default\/modules\/views_slideshow\/contrib\/views_slideshow_cycle\/js\/views_slideshow_cycle.js":1,"modules\/toolbar\/toolbar.js":1,"sites\/default\/themes\/spertus_th\/js\/spertus.js":1,"sites\/default\/themes\/spertus_th\/js\/twitterfeed.js":1,"sites\/default\/themes\/spertus_th\/js\/retina-1.1.0.min.js":1,"1":1},"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,"modules\/overlay\/overlay-parent.css":1,"sites\/all\/libraries\/shadowbox\/shadowbox.css":1,"0":1,"modules\/contextual\/contextual.css":1,"sites\/default\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/comment\/comment.css":1,"sites\/default\/modules\/date\/date_api\/date.css":1,"sites\/default\/modules\/date\/date_popup\/themes\/datepicker.1.7.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\/views\/css\/views.css":1,"\/css\/tabs.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/default\/modules\/nice_menus\/css\/nice_menus.css":1,"sites\/default\/themes\/spertus_th\/css\/nice_menus_custom.css":1,"sites\/default\/modules\/views_slideshow\/views_slideshow_controls_text.css":1,"sites\/default\/modules\/views_slideshow\/contrib\/views_slideshow_cycle\/views_slideshow_cycle.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/default\/themes\/spertus_th\/css\/default.css":1,"sites\/default\/themes\/spertus_th\/css\/twitter-styles.css":1,"sites\/default\/themes\/spertus_th\/css\/layout.css":1,"sites\/default\/themes\/spertus_th\/css\/typography.css":1,"sites\/default\/themes\/spertus_th\/css\/style.css":1,"sites\/default\/themes\/spertus_th\/css\/print.css":1}},"overlay":{"paths":{"admin":"node\/*\/webform\nnode\/*\/webform\/*\nnode\/*\/webform-results\nnode\/*\/webform-results\/*\nnode\/*\/submission\/*\nnode\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*\ndevel\/*\nnode\/*\/devel\nnode\/*\/devel\/*\ncomment\/*\/devel\ncomment\/*\/devel\/*\nuser\/*\/devel\nuser\/*\/devel\/*\ntaxonomy\/term\/*\/devel\ntaxonomy\/term\/*\/devel\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"pathPrefixes":[],"ajaxCallback":"overlay-ajax"},"shadowbox":{"animate":1,"animateFade":1,"animSequence":"sync","auto_enable_all_images":1,"auto_gallery":1,"autoplayMovies":true,"continuous":0,"counterLimit":"10","counterType":"skip","displayCounter":1,"displayNav":1,"enableKeys":1,"fadeDuration":"0.1","handleOversize":"resize","handleUnsupported":"link","initialHeight":160,"initialWidth":320,"language":"en","modal":false,"overlayColor":"#fff","overlayOpacity":"0.85","resizeDuration":"0.1","showMovieControls":1,"slideshowDelay":"0","viewportPadding":20,"useSizzle":0},"nice_menus_options":{"delay":"800","speed":"fast"},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip"},"viewsSlideshow":{"gallery_slideshow-default":{"methods":{"goToSlide":["viewsSlideshowPager","viewsSlideshowSlideCounter","viewsSlideshowCycle"],"nextSlide":["viewsSlideshowPager","viewsSlideshowSlideCounter","viewsSlideshowCycle"],"pause":["viewsSlideshowControls","viewsSlideshowCycle"],"play":["viewsSlideshowControls","viewsSlideshowCycle"],"previousSlide":["viewsSlideshowPager","viewsSlideshowSlideCounter","viewsSlideshowCycle"],"transitionBegin":["viewsSlideshowPager","viewsSlideshowSlideCounter"],"transitionEnd":[]},"paused":0}},"viewsSlideshowControls":{"gallery_slideshow-default":{"top":{"type":"viewsSlideshowControlsText"}}},"viewsSlideshowCycle":{"#views_slideshow_cycle_main_gallery_slideshow-default":{"num_divs":10,"id_prefix":"#views_slideshow_cycle_main_","div_prefix":"#views_slideshow_cycle_div_","vss_id":"gallery_slideshow-default","effect":"fade","transition_advanced":0,"timeout":5000,"speed":700,"delay":0,"sync":1,"random":0,"pause":1,"pause_on_click":0,"action_advanced":0,"start_paused":0,"remember_slide":0,"remember_slide_days":1,"pause_in_middle":0,"pause_when_hidden":0,"pause_when_hidden_type":"full","amount_allowed_visible":"","nowrap":0,"fixed_height":1,"items_per_slide":1,"wait_for_image_load":1,"wait_for_image_load_timeout":3000,"cleartype":0,"cleartypenobg":0,"advanced_options":"{}"}},"tableHeaderOffset":"Drupal.toolbar.height"}

Comments

dbhynds’s picture

Issue summary: View changes
Venn’s picture

This is exactly the problem that I'm having, except I only have it on my MBP Retina and iPad Air. So I'm guessing the JS has different behaviour for retina displays.
The HTML has the correct width and height attributes. But from the second image on, they are set to zero (through JS I suppose).

The view works fine in the back-end.

Unfortunately my JS knowledge is too poor to solve this problem.

Site: http://p-magazine.be

regards,

Venn

babbubba’s picture

I see that u solved ur issue in http://www.spertus.edu/node/561 ...
I have the same issue ... can u share ur solution pls?

lamp5’s picture

Your images are not loaded before the cycle() function has been triggered and it could not set height and width of the slides??
Try to manualy change this parameters or in css to debug this problem.

NickDickinsonWilde’s picture

Status: Active » Closed (cannot reproduce)

re-open if still a problem.