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
Comment #1
dbhynds CreditAttribution: dbhynds commentedComment #2
Venn CreditAttribution: Venn commentedThis 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
Comment #3
babbubba CreditAttribution: babbubba commentedI see that u solved ur issue in http://www.spertus.edu/node/561 ...
I have the same issue ... can u share ur solution pls?
Comment #4
lamp5Your 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.
Comment #5
NickDickinsonWildere-open if still a problem.