Not all effects work

This is a list of what does/doesn't work, I wanted to use slideX but sadly, that's one of the ones that doesn't work for me.

none - yes
blindX - no
blindY - no
blindZ - no
curtainX - yes
curtainY - yes
fade - yes
fadeZoom - yes
growX - yes
growY - yes
scrollUp - no
scrollDown - no
scrollLeft - no
scrollRight - no
scrollHorz - no
scrollVert - no
shuffle - yes
slideX - yes (but no slide)
slideY - yes
toss - yes
turnUp - yes
turnDown - yes
turnLeft - yes
turnRight - yes
uncover - no
wipe - no
zoom - yes

Maybe the above will help?

Sam.

After a bit of digging I found turning OFF the advanced effects generated from json2 makes all effects work as normal.

This is a problem as I need the inline height/width stripped out to make my slider responsive, so json2 is required.

...unless I override the inline styles. Which can be done in css, but would have to test.

Sam.

Well, I managed to get all the effects working (as I said) by disabling the json2 library.

So now all the effects work, but on browser resize (narrower) it takes a page refresh in order to get the smaller slideshow.

containerResize in json2 worked well without needing the page refresh on resize, but catch 22 situation of when containerResize is on, not all the effects work for me. I know it wouldn't matter if someone was on your site, as they probably wouldn't site there resizing their browser window, but on a mobile it would matter as if a user went to landscape orientation, then the slideshow would remain as small as it was on portrait.

Bit of a mystery.

Sam.

Ok, so json2 is not needed in my case at all as no div heights or widths are in my source code. Not sure why, maybe the views update had something to do with it.

So my resulting (a trimmed version - I have 3 slides total and a pager which are not below) html is:

<div class="skin-default">

<div id="views_slideshow_cycle_main_featured_slider-block" class="views_slideshow_cycle_main views_slideshow_main">

<div id="views_slideshow_cycle_teaser_section_featured_slider-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section">

<div id="views_slideshow_cycle_div_featured_slider-block_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-odd">

<div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
<a href="LINK-HERE"><img typeof="foaf:Image" src="IMAGE-HERE" width="940" height="353" alt="ALT-TEXT-HERE" title="TITLE-HERE" /></a>    
<span class="banner"><h2>MY BANNER TEXT FROM CCK FIELD ON CONTENT TYPE</h2></span>
</div>

</div>

</div>

</div>

</div>

and the accompanying css in my 3 different stylesheets:

Media query 1 - normal

/* ==========SLIDESHOW CSS STYLES========== */

.skin-default {
display: block;
max-width: 940px;
height: 375px;
position: relative;
}

.views-slideshow-cycle-main-frame-row-item {
background: url(../images/feature-bg.jpg) repeat-x;
background-position: left top;
positon: relative !important;
max-width: 940px;
height: auto !important;
}

.views-slideshow-cycle-main-frame .views-slideshow-cycle-main-frame-row .views-slideshow-cycle-main-frame-row-item img {
max-width: 940px;
}

Media query 2 - narrow

/* ==========SLIDESHOW CSS STYLES========== */

.skin-default {
display: block;
max-width: 700px;
height: 283px;
position: relative;
}

.views-slideshow-cycle-main-frame-row-item {
background: url(../images/feature-bg.jpg) repeat-x;
background-position: left top;
positon: relative !important;
max-width: 700px;
height: auto !important;
}

.views-slideshow-cycle-main-frame .views-slideshow-cycle-main-frame-row .views-slideshow-cycle-main-frame-row-item img {
max-width: 700px;
}

Media query 3 - all (including mobile)

/* ==========SLIDESHOW CSS STYLES========== */

.skin-default {
display: none;
}

#views_slideshow_cycle_main_featured_slider-block {
position: relative;
}

.views-slideshow-controls-top {
padding-bottom: 10px;
}

.views-content-counter a {
display: block;
float: left;
margin-right: 8px;
height: 12px;
width: 12px;
background: url(../images/pager-bg.png);
background-position: 0px 0px;
}

.views-content-counter a:hover {
background-position: -12px 0px;
}

.active .views-content-counter a {
background-position: -12px 0px;
}

.views-slideshow-cycle-main-frame-row .banner {
position: absolute;
top: 0px;
left: 0px;
}

.views-slideshow-cycle-main-frame-row .banner h2 {
  font-size: 1.6em;
  padding: 10px;
}

I hide the slideshow for mobile as (a) it looks rubbish that small and (b) if my visitors are anything like me, they wont sit there watching a slideshow, when on mobile I just want info quickly.

It resizes to my set height/width as I would like in firefox, chrome, opera, safari and IE9. Also works fine in IE7 and IE8 (no resize).

I don't really think a fully responsive slideshow is particularly feasable right now i.e. it gets smaller pixel by pixel as you change the browser size, like on max-width:100% for inline images. I find personally it works just fine having a set size for different media queries and invisibe on mobile.

I hope this will help someone else.

Sam.

You can check out my slider here (not a shameless promote btw):

www.swcarrey.co.uk

Look for:

/* ==========SLIDESHOW CSS STYLES========== */

in

(1) global.css,
(2) custom-theme-alpha-default-narrow.css
(3) custom-theme-alpha-default-normal.css

Use web developer or firebug to check out the css, I haven't aggregated it so it's easy to see what's going on. Works perfectly with all the effects (it's responsive for wider, narrow and small screens - resize window). I use no json2 as it is not required.

I never found the css to cause the slider to not work, that was json2 doing that for me. I mean, if it works with one effect, it should work with all of them. The images should actually display without any css, just wont look as nice, the effects will still work though.

Sam.

Hi, I can't remember exactly but I think originally, views slideshow would put inline height and width measurements in the source code. This fixed size caused problems and needed to be removed via json in order to then style the slideshow via css.

I believe this is not a problem anymore. Also, there are modules such as flexslider that I have heard many people saying takes all the leg work out of manually resizing with css and media queries.

I do not have the json library installed on my slideshow and it works as expected.

Sam.