The slider remains the size it is even if page width is changes, so if you are using something like the WP-twentyeleven theme it will become oversized and foce horizontal scrollbars when you shrink the window. Currently thats the only detraction from an otherwise great plugin.
Header Image Slider
Dynamic and floating page widths not supported. (19 posts)
-
Phillip.Gooch
Posted 8 months ago # -
Posted 8 months ago #found a (poor) temporary fix. Add the following bit of code to the end of the boom_nivo_slider_options function in general-template.php
afterLoad: function(){ $('div.slider-wrapper.theme-default').css('width','100%'); $('div.slider-wrapper.theme-default').css('text-align','center'); $('div.slider-wrapper.theme-default').css('overflow','hidden'); $('div.nivoSlider.headerSlider').css('width','100%'); }It's not a pretty fix but it keeps the scrollbars from coming up. Could be improved upon although even then it's not the proper way to do this (it should really be changed in the nivo slider theme).
-
I'm not sure how to handle this. The position, size and everything about the slider should be handled by the theme. I'm guessing on small screens an slider would be of no use, so for example you could hide the slider for mobile users:
if( ! is_mobile() ) // display header image
* the is_mobile function requires this plugin: http://wordpress.org/extend/plugins/txtu-is-mobile/The next version is coming up soon with cool new features, I'm open to all suggestions!
-
Posted 8 months ago #True the header image size is controlled by the theme, unless you remove it from the theme. I created a script that does some dynamic resizing like on the Wp-twentlyeleven script, as the window gets smaller so does the space between elements and eventually the entire thing shrink into one flex column so it still works well on mobiles (all of this controlled by some css styles to prevent a huge headache in debugging of course).
I avoided the header image width problem in the vanilla wordpress by simply not attaching the width and weight attributes to the image (or to the div in the case of using a background image for the header) This allows me to place the header at 100% width inside a more flexible frame (in the case of the one I'm working on now it's 100% width of the sites master container making it fill up as much as possible.
I'm not sure how Wp-twentyeleven does it be the end effect is very similar. I actually initially noticed your slider didn't resize when testing it on a blog running wp-twenty eleven (my go-to plugin test blog).
Perhaps the solution is simler than it lets on. If you place an option in the settings for this then you could simply not output all the sizes (or, probably display the width as 100% and the height as a value generated to keep the aspect ratio correct, thats some simple jquery to do). This would allow people who have flex themes the freedom to use it full width all the time, and those with traditional static width theme still use it as they are now. One additional thing this might require is tweaks to the nivo slider as well, but they should be pretty basic.
Overal this flex theme, while support as low as the original iphones 320px width, is really designed for older computer or smaller monitors, you can have that extra spacing with a modern 1080p monitor, but most of out clients are running rather outdated hardware. This solves two problems at once, you get a mobile compatible version - which they like, and we make it look good and easily readable on their 1024 monitor.
-
Thank you for your insights.
Not setting a width and height is troublesome. That fixed width and height is set because Nivo needs a fixed width and height, otherwise you'd get a weird effect on your page.
We could add option to include CSS3 media queries for smaller windows, though. Is that a clean and bullet-proof solution? and if so, how to handle it? I think it requires some math to implement, which is just beyond my grasp! :( -
Posted 8 months ago #I'm admittedly not very familiar with the nivo slider, but it seems to have support for flexible themes. There mentioned here: http://nivo.dev7studios.com/support/advanced-tutorials/creating-custom-themes-for-the-nivo-slider/ but searching only brings up that page and the features page. Fixed height can be faked simply by placing the whole slider in a box, having that boxes height adjust correctly and giving the width and giving it an overflow:none; property, although if nivo really does support a flexible width I would hope the height is adjusted with it.
CSS3 media queries may work, as most mobile devices are running modern enough browsers to support them. It is a bit slow on resize though but no worse than the wp-twentyeleven resize - come to think of it's I'm sure it's doing it that way, and so should I have if I was thinking. One potential setback could be the need to reinitialize the nivo slider at those resolutions, as well and not being able to achieve a fluid motion (because those would limit you to a "pick a width" setting, that is unless you want a width every other pixes, I surely wouldn't want to program that).
Setting those CSS media queries via javascript may be possible. That would preserve the fluid resize without a comically bloated stylesheet. I'm not sure if there are official javascript ways to do that yet, and even if you did it though something like jQuery the browser may not bother checking the screen property after initial load. It's something thats worth a test for sure but currently I'm stuck at work on other projects. The mathematics to determine the height based on width are deceptively simple, I'm sure I saved a code snippit from a previous project somewhere on my home machine I can post if you want it.
I still think that the best solution would be to learn more about this nivo flexible width style thing, I'm not seeing any documentation, but I"m also not logged in and don't have an account, if you do I'd suggest taking a peek, it could be by far the easiest way to go about this.
-
That requires a lot of testing and testing, to make sure it works.
Maybe we could think up something for the next version. -
Posted 8 months ago #I sat down at lunch today and hacked out a much better fix, it's a great interim until a more permanent solution can be thought up (probably in the slider script department). Since this is kinda a hacked in solution it really should be an option in the setup page, was I'm hoping you'll be able to add before the next release (so I can take the update across all blogs without worrying about it).
First I added some additional callbacks to the options, before, after, and after load, here is my new boom_nivo_slider_options function:
[Code moderated as per the Forum Rules. Please use the pastebin]Then I added a single style to nivo-slider.css, I tried to just add the style via jQuery but it wouldn't go, I have no clue why it wouldn't work but I guess it's because .nivo-slider width is being changed by the script. This is a direction to look in as it could be a simple mod to the nivo slider core to get it to work (basically change those pixels values to percent values). Unfortunately I don't have time to look into that right now. The additional style is this:
.fullwidth-fix{ width: 100%!important; }I've tested it pretty extensively in the ep-twentlyeleven theme without problems, if one of mine acts up I'll blame the theme and not the fix. Like I said it be great if this could get added for the next version as a checkbox item (call if preliminary fluid width support or something IDK).
-
Sorry I didn't have access to the internet in last days.
I didn't get the code, but in next version I've added a few action hooks and filters, so you can safely edit the plugin behavior. -
nathanwells
Posted 8 months ago #@Phillip.Gooch
Could you post the code to pastebin or e-mail it to me (sungkhum [at] gmail dot com). I am also looking for a way to allow for dynamic resizing for smaller resolutions, and your fix looks like the only one out there for sliders!Thanks,
Nathan -
Posted 8 months ago #The moderated code can be found here
http://pastebin.com/S3xs0PaA -
Thanks. What is .fullwidth-fix class?
***
I also saw Flux Slider and Diapo sliders, have you tested those? It says that they work perfectly on mobile devices. If they're any good, I could add to the plugin. -
Posted 8 months ago #they dident remove that from the post its
.fullwidth-fix{ width: 100%!important; }I havent tested those yet, but of course they work nivo does, it's the resizing thats the problem. I'll take a look sometime this week, but I'm cleaning up from a server issue so it probably won't be till later.
-
jvandelaar
Posted 7 months ago #Hey guys, any update on resolving this issue?
I've spent half a day working on this but haven't got anywhere . Will keep going and will post anything I find! Cheers
-
Posted 7 months ago #What exactly is the problem your having, if you modify the script and css using the code in the above post, and the js from what in the pastbin link, you should have dynamically resizable sliders (I'll probably have to work on this some more later this week, but I don't think it'll need to be changed).
-
Posted 7 months ago #Thanks for the quick update Philip. The slider works great as intended and the window for the slider resizes also as intended thanks to your scripting.. How ever the images I'm using don't resize (shrink) with the slider window. I'm using the twentyeleven theme and the controls for the resizing are untouched.
-
Posted 7 months ago #Yeah my fix never solved that, it'll be properly sized on load, and resized when the images change, but the height won't change until the page is reloaded.
-
Posted 7 months ago #Damn. Simply copy and pasting code relevant to dynamically resizing the image from the functions.php file isn't getting any closer. Thanks heaps for the fixes though Philip!
-
tacomamama
Posted 2 months ago #Bumping this up, because I very much wish this plugin were responsive. Will this ever be a feature?
Reply
You must log in to post.
