The ultimate Responsive Embedded & Fullscreen jQuery Slider
Also visit the WunderSlider Demo and the WunderSlider WordPress Demo.
Download
Purchase to download WunderSlider and obtain a license for commercial purposes.
Download WunderSlider for free personal use.
-
Responsive & Flexible Layout
Adaptive display modes support responsive designs without the need for media queries.
WunderSlider’s flexible sizing system offers transition effects in all modes:
- Fullscreen mode – occupies the entire viewport while staying in the background so that content can be displayed on top.
- Proportional mode – adapts proportionally to the screen size.
- Fixed mode – displays at a set fixed size.
-
WordPress plugins included
WunderSlider comes with its own WordPress plugin that allows to embed it on WordPress sites through its own shortcodes.
Visit the WunderSlider WordPress demo site for examples based on standard WordPress galleries and NextGen Gallery.
The WunderSlider Gallery plugin provides an automated way to convert any standard WordPress gallery that is embedded on a page using the [gallery] shortcode into a WunderSlider.
WunderSlider Gallery also supports NextGEN Gallery to embed any gallery as a WunderSlider using the [wunderslider_nggallery] shortcode or by enabling it as the default renderer for the [nggallery] shortcode.
-
Automatic Image Adjustment
Images are adjusted to the slider size and display mode, maintaining the original image’s aspect ratio.
-
Effects
41 transition effects that can be applied randomly or specified per slide.
-
Themes
8 skins (themes) that support both embedded and fullscreen modes.
Easily themeable.
-
Overlays
12 overlay meshes in black or white with adjustable opacity for smoother image appearance on all display sizes.
-
Flexible Captions
Individual image captions with titles, HTML descriptions and links.
Caption position and size can be set independently for each image.
-
Links
Link images and captions optionally: Allows to link image captions only or also the image.
-
Controls
Show or hide UI controls independently: Next & previous navigation, image selectors, image captions.
-
Flick it!
Flicking / swiping on all devices.
-
Touch Enabled
All controls, including flicking / swiping, are supported in all display modes also on touch-enabled devices.
-
Viewing Comfort
The slideshow can be paused optionally when the cursor is placed over an image.
-
Random Order
Randomize image order: the order of the images displayed can be fixed or randomized.
-
Configurable Effects & Transitions
Configurable number of effect blocks with auto-adjust feature to maintain a square block geometry if desired.
A random number of blocks can be used as well.
Configurable transition and effect times.
-
Lazy Loading
Helps to save bandwidth by lazy loading images.
-
Valid Code
- Valid HTML5
- Valid CSS3
-
Cross-browser Compatible
WunderSlider works with: FireFox, Internet Explorer, Safari, Chrome, Opera and other browsers on PC, Mac, iPhone, iPad and many other devices running Windows, Linux, Mac OS, iOS, and Android.
Tested on:
- FireFox (FF)
- Internet Explorer 7, 8 and 9 (IE7, IE8, IE9)
- Safari on Mac OS and iOS (Mac, iPad)
- Chrome
- Opera
- Android
What version – Free for Personal Use or purchase a Commercial License?
The free version for personal use provides the same features as the commercial version. Its use is limited by the Free Personal Use Single Domain License (FPUSDL). This version adds a small logo to the bottom of pages where it is used and sends usage data (on 10% of page loads indicating the URL of the site it is used on). This is to spread word about the WunderSlider and make its use more wide-spread. It also helps to improve it – the more it is used, the more effort is put into its further development.
The commercial version is available for purchase under the Single Use Single Domain License (SUSDL) for commercial purposes. This version does not include the little icon and it does not send any usage data.
Documentation
WunderSlider includes extensive documentation in PDF form. For additional information please refer to the WunderSlider Documentation.
gracias
Glad to see another Wonderful plugin from you.
Good luck
Many thanks, hope you find it useful
can’t I use it in home.php to use it in my homepage? (is not a single page or post)
Sure, you can use it there as well, for example indicating the id attribute to identify it (the gallery).
I don’t know this, I mean what is the shortcode for it, the kind of “”
Thanks
Assuming that you are going to use the WunderSlider Gallery plugin:
For example, if you have attached some images to a post, use the post ID and pass it to the gallery:
[gallery id="123"]where 123 is the ID of the post with those images attached.If you want to use it in a template, you can do
<?php echo do_shortcode('[gallery id="123"]'); ?>.Hello.
The plugin is installed, but I get the error of The WunderSlider plugin is missing. Am I doing something wrong?
WunderSlider Gallery is complaining about the WunderSlider plugin missing. Simply download or purchase WunderSlider using one of the links on top of the page, unzip the downloaded file and you will find the WunderSlider plugin in the
wordpressfolder. Install and activate it (there are two plugins in that folder, as you have already installed WunderSlider Gallery, you only need to install one). The WunderSlider Gallery plugin handles the [gallery] shortcodes and uses the WunderSlider plugin to convert the standard WordPress galleries into slideshows.Hello Kento,
I’ve downloaded the WunderSlider gallery on WordPress and also downloaded the zipp Wunderslider plugin. maybe i’m really stupid but i don’t understand where I can install this plugin? I don’t have a WordPress folder on my mac because everything about it is on the internet… so where and how can I install this plugin to make the WunderSlider Gallery work?
Go to Appearance>plugin Add new then on the top bar is an UPLOAD link. Navigate to the zip file on your download folder and upload and activate.
thanks!
What are the 8 themes that support this plugging?
The themes that come with it are the ones you can test at WunderSlider. By the way, new themes will be added and suggestions are always welcome.
Hi,
Great plugin! Just one problem I’m having: when I choose the “Proportional” setting and use the exact same shortcode provided in your example, the images won’t load. The other two methods work fine, any reason why?
Thanks in advance!
Hi Justin, thanks for using it
Have you set a width in Proportional mode? Check out the example on this page, it uses
display="proportional"along withcontainer_width="91%" container_height="360px"– in proportional display mode, you must specify the container width as a percentage and give the container an appropriate height.Hm, seems there was something wrong with my shortcode.
It’s working now, thanks!
Perfect
Spoke too soon, I’m having another problem.
I’m trying to call the shortcode outside of the “post content”, but within a single blog page.
When I write this code, the gallery does not show up UNLESS I TYPE [gallery] inside of the post content (showing two galleries):
It does create the div, but no images can be found.
When I write this code, the gallery does show up with no problems:
Any tips?
Can you please post a link to the page where this happens and the exact code (pastebin) you are using?
http://pastebin.com/B3k1twPh
http://ax3battery.com/devsite/?p=34530
When used in the template like that, you will have to make sure that the WunderSlider Javascript is loaded as well. The page throws an error because it currently isn’t included, if you modify it and add the script as shown here, it should work. Note the script that is loaded just before the
galleryshortcode.http://ax3battery.com/devsite/?p=34530
1) Is it just me or is the box getting smaller every time I click on the arrow to the next image?
2) After I click on the arrow to the next image, when I click on the top logo or the accordion.. it’s making the slider go to the next image as well. Is it a script conflict?
1) is a bug, I just tried it on Safari and it keeps getting smaller, on FF it shrinks only once. Will fix that immediately.
2) might be a conflict, will have a look at that.
Fixed 1) in release 1.3.7 now available to download. Please update to that release.
Regarding 2) it looks like a conflict to me, not sure why it happens. Clicking anywhere on that page left or right after having advanced a slide will navigate through the slides.
(By the way, you have a fixed-size WunderSlider on that page as well (near/below the last image) which doesn’t display anything but you can click the navs.)
Hey,
First off, congratulations for the great gallery. I’ve tried thousands of them but this is definately the one I was looking for. Just one question, in the features it says: Allows to link image captions only or also the image.
How can I link the images in the slideshow to the img source in order to open a lightbox?
Thank you in advance.
Thanks Ricardo
Do you want to use any specific lightbox?
hey Kento, I’m using easybox http://code.google.com/p/easybox/ in other parts of the site, but I can choose another,
Works nicely, for example: save this as easybox.html in the demo folder, copy the easybox folder there as well. When you click on an image, the lightbox appears.
That works fine! The thing is that I’m working in wordpress and I don’t know how to add links to images on the gallery. I suppose that if the easybox script is loaded and the images are linked to the img source that should work, but I don’t know how to do that…
thank you!
Hi,
I had a very similary question as the person above. I would like each image to be clickable, a feature mentioned in the manual. I’m using the WordPress Gallery and defining the links in “Attachment Post URL” of the wordpress gallery. I’ve also ensured that the shortcut has the parameters clickable=”true”. However, when my gallery shows up it is not clickable. Is that not where WunderSlider fetching the image URL? Am I supposed to define the links for each image elsewhere?
Thank you
I tried inserting this line into my php template file (instead of using the shortcode in the text box), but it won’t produce the result, just blank space where the slider would be. What other code am I missing?
Can you show the code on pastebin please? It seems to have been stripped off the comment you posted.
http://pastebin.com/cBn4tTn5
Probably the WunderSlider Javascript file is missing … Do you have this on a page (link) to have a look?
Hello again, it is a wonderful slider, although I am wondering if you can help me to make the fullscreen slider on the main page (with no body) the only thing with the slider should be the menu. Is that possible? I really appreciate your help.
For plain HTML or PHP, in the demo folder of the distribution package you will find examples for that: wunderslider-fullscreen.html and wunderslider-fullschreen.php. If you are looking for a way on how to do it on WordPress, you can either use the Fullscreen example or with the WunderSlider Gallery plugin you can use the example on this page and set
display="fill". You might need to add some CSS rules depending on your theme as well.How do I get more than one slideshow on a page? The short block of code pointing to the gallery is: [gallery container_width="80%" container_height="300px" display="proportional" mode="proportional" clickable="false" link="file"] I see no way to point to a separate gallery. link-”file” seems to be vague. How can i do this?
Thanks
John
You would pass the post ID to embed the gallery from a different page or post: [gallery id="123"]
If you are using NextGEN, you would provide the gallery id: [nggallery id="5"] if you are using WunderSlider as the default renderer or also [wunderslider_nggallery id="5"] – please refer to the WunderSlider Gallery page as the documentation here needs to be updated.
Hiya, I’m trying to use Wunderslider, but after spending literally hoursS trying to pick the perfect thing (and deciding it was yours), when I downloaded the plugin for personal use, it says: The package could not be installed. No valid plugins were found.
Plugin install failed. What shall I do next? Thanks
Hi Valerie, just unzip the file first, you will find a wordpress directory in there that contains the plugins you can install
Any way to control when the caption/title appears? On some pages I want captions for my sliders, other pages I don’t want captions (like my home page). I tried entering caption=”false” in the shortcode, but this didn’t do anything. Is there anything I can use besides the either all Off/On switch as I want captions on by default.
There is the useCaption parameter which can be set to false but when trying it with the gallery shortcode it doesn’t seem to work. That would be a bug to fix. Workaround, with the editor in HTML mode, add a CSS rule before the shortcode where no caption should be displayed:
<style>.wunderslider .caption {
display: none;
}
</style>
Hi there,
I’m trying to use Wunderslider with NextGen Gallery and have tried all the combinations of settings and shortcodes that I can think of – but I can’t get the Wunderslider to appear on the page! I’ve used the [wunderslider_nggallery id="2"] in the page comments, but nothing appears other than the page heading. What am I doing wrong?
Shortcodes don’t work in comments, use it in the page content and it should show up correctly.
I’ve installed the WunderSlider plugin, and the gallery plugin, and everything seems to be working fine EXCEPT the navigation NEXT/PREVIOUS buttons. They show up, but are not functional. Any suggestions to fix this? Thanks for a great plugin.
Can you post a link to the page where this happens please?
http://goo.gl/efSsl
Thanks.
Pingback: Webdesign and Development Resources
I’ve installed the WunderSlider plugin, and the gallery plugin, and everything is ok. But I see thin lines on the photos. What can I do? Should I buy a license for commercial purposes?
Thanks and regards
Raed
Thin lines? Ah ok, I suppose you mean the overlay … that has nothing to do with the license, it’s a feature
You can turn that off by specifying None under Appearance > WunderSlider Gallery when using the WordPress plugin or by simply omitting that attribute when creating the WunderSlider.
Thank you very much Kento. It is ok now..
Thaks again
Raed
Can WunderSlider Gallery pull from various NextGen Galleries at the same time? I tried a shortcode like [nggallery id="1,2,5"] but that did not work.
Thanks.
Any response for this?
You can’t do that, from what I know the nggallery short code doesn’t support that itself either.
Thank You
I really like the pluggin and am hoping to use it extensively. However, there are a few things that seem to limit it versatility for extensive usage on a website.
(1) Can photos be resized to fit within the slider? As far as I can see, the slider simply crops everything to fit. Hence portrait shots don’t work. Right now my workaround is to take portraits into photoshop and expand the canvas, crop to the slider dimensions (with black then on either side of the photo) and resave. But this is time consuming. Any ideas?
(2) I’m using the slider with nextGen galleries. For different galleries displayed on different posts, I want to adjust the wunderslider’s properties. Specifically, I want to control the transition effects and the transition timing attributes for individual slideshows (e.g. Slow Checker transitions in one show, faster Fade-in transitions in another). Is this level of control possible?
(3) Ideally there would even be some level of adjustability within a show–say speeding up transitions in one section, showing down in another–but I recognize that if I’m using the nextGen gallery format, that may be asking too much.
(4) My transitions seem to generally have a little hick-up in them. For example, if the transition is “Slide down” the new slide gets about 10 or 15% of the way down and then freezes for a fraction of a second. Along the same lines, I’ve noticed that when I first view a post with a wundersilder on it, the transitions may be quite slow and erratic. Then if I click on the slider so as to trigger a transition, things suddenly work better (though the small hick-up effect still remains). Any thoughts?
Thanks! Craig
Hi Craig,
Many thanks for your detailed feedback, regarding #1 yes you are right, when it is in proportional mode, it will make the image fit regardless of its dimensions. This is to make it more convenient to handle images that are of similar proportions. If you have landscape and portrait images that should be displayed in the same slider, then it’s really the best to do what you are doing now, i.e. to choose a part of the image that will show the desired area. It would be great to have a cropping tool built in for that though, isn’t there an addition that allows to do that with NextGEN or the normal WordPress galleries?
On #2, have a look at the documentation that comes in the pack, there are a lot of configuration options that you can use and these can be passed on through the NextGEN shortcode. There are a few options that need review and also some enhancements are planned for the next release to make it more flexible to handle.
#3 wouldn’t depend on NextGEN, it would be an additional set of controls that would have to be added to WunderSlider’s core.
Please post a link for #4, I’d like to see and test this myself to find out what might be causing it.
Cheers
hey… there is an error in your documentation that drove me crazy:
container_width=”85%” height=”360px”
…should be:
container_width=”85%” container_height=”360px”
Please update these refs for the hair health of others.
Thanks for mentioning it, will correct the docs in order to avoid general baldness
Hi Kento! Thanks for sharing your creation to the world. Do you know if there’s a way to grab images randomly from a SQL database? Thanks in advance!
If you want to randomize the images there is an option for that, see randomize under Transitions in the PDF documentation included with WunderSlider.
Hey Kento, Thanks for this plugin.. it’s really useful.
Do you know of a way to link NextGen’s Imagelist thumbnails to their corresponding image in a wunderslider?
Right now I’ve got NextGen Options > Gallery > gallery open in imagebrowser ticked on, so that at least takes each thumb to the image in NextGen’s image browser (not lightbox).. but the wunderslider isn’t applied.
Thanks in advance.
Thanks Alex, nice to hear that
As you can’t link the images with the [nggallery] shortcode, I can’t think of an easy way to achieve exactly what you describe. You can link images with the [singlepic] shortcode though, so you could at least create a page with the WunderSlider on it showing the whole set of images and link the single image to that page.
If you want more details on the [singlepic] shortcode, there is a demo and documentation on Demos of all NextGEN Gallery Types.
Hi! Thanks for the cool plugin. I am trying to use Wunderslider with WordPress. 9 times out of 10, though, the first image in the slider does not properly load. It just appears in a small portion of the top-left corner, and a loading symbol appears in the middle of the container, but it doesn’t load until you press next or previous. Link: http://www.strategies4collegeapps.com/2012/sample-essay/
code: (removing the open tag symbols so the code will show)
[wunderslider]
wunderslider mode=”proportional” width=”608px” height=”886px” period=”99999″>
image url=”http://www.strategies4collegeapps.com/2012/wp-content/uploads/2012/10/sample_1.png” title=”Sample personal statement for law school admission” description=”by Michael Crouch” />
image url=”http://www.strategies4collegeapps.com/2012/wp-content/uploads/2012/10/sample_2.png” title=”Sample personal statement for law school admission” description=”by Michael Crouch” />
image url=”http://www.strategies4collegeapps.com/2012/wp-content/uploads/2012/10/sample_4.png” title=”Sample personal statement for law school admission” description=”by Michael Crouch” />
/wunderslider>
[/wunderslider]
thanks!
Hi Michael, I just tried the link but the site currently appears just blank. Anyhow, make sure that you use plain double quotes on all attribute values instead of the right double quotes that appear in your code as it is now.
Correct:
mode="proportional"Wrong:
mode=”proportional”Hi,
I have managed to install Wunderslider no problem and have it display NextGEN galleries. My only problem is that when I try to change some of the options e.g. “Show next/previous buttons” and “Show slide selector buttons” these changes aren’t showing on the slideshow. I’d love to know what I’m doing wrong.
I have taken it off my website for now in anticipation of a fix to this issue.
Thanks
Hi,
I have now created a test page for us to resolve this issue.
http://bcslearning.net/maths/gallerytest/
Hi Nick,
Can you please share the shortcode used on the page?
Hi,
This is the short code used:
[wunderslider_nggallery id="3"]
I have also put a screenshot on the page with the relevant settings showing “Show slide selector buttons” as being switched off but still appearing on the gallery.
Thanks
On the settings page Appearance > WunderSlider Gallery is the option Enable these settings by default? checked?
Hi,
It looks like that has fixed it so thank you.
One other thing – is there a bit of shortcode to align wunderslider centrally on a WordPress page?
Thanks
Yes, you can wrap it for example like this:
<div style="width:95%; margin-left:auto; margin-right:auto; left:0; right:0;">[wunderslider_nggallery id="4" width="540px"]
</div>
Probably needs some adjusting for your theme but that’s the general idea to center it.
One further question too, please. Is there a way to lose the drop shadow around the wunderslider?
You can add this after where you embed the WunderSlider on the page, or add the rule to a stylesheet in your theme if you don’t want the shadow in general:
<style type="text/css">.wunderslider-wrapper { box-shadow: none; }
</style>
Hi! Thank you for this fantastically designed plugin, well worth it.
I’m having a rather bizarre issue though; where the nggallery works fine with the slider; but the wordpress gallery does not work at all. I would prefer to use the wordpress gallery because I want my photos to be linked to other pages, which is not possible using nggallery.
I’ve tested this with multiple themes etc. and nothing is working. So I’m wondering if anyone has any idea as to why the slider works for one code but not the other.
[gallery id="89" wunderslider="true" useCaption="true" width="735" height="400" effects="slideRight" overlay="none" overlayopacity="0.8" preloadimages="0" mouseoverpause="true"]
[wunderslider_nggallery id="9" useCaption="true" width="735" height="400" effects="slideRight" overlay="none" overlayopacity="0.8" preloadimages="0" mouseoverpause="true"]
Thanks!
Hi Mari,
Thanks for your nice comment, it’s great to see that people like it
Regarding the shortcodes you are using, I’ve noticed that the first one indicates
id="89"while the second one hasid="9"– by any chance, is the first one pointing to a gallery that doesn’t exist?Note that some of the attributes should be corrected as these are case-sensitive:
overlayopacityshould beoverlayOpacitypreloadimages->preloadImagesmouseoverpause->mouseOverPauseAlso currently there is a bug that results in the effects parameter passed through not being applied. If you only want one effect to be applied, you can use the singular form which will work:
effect="slideRight".Please check if that does it or let me know if you still have problems. In the latter case, please post which other plugins are activated on your site as well.
Cheers
Hi Kento,
Thank you for your very prompt response, I don’t think the case-sensitivity was causing an issue because the plugin was working with nggallery’s shortcut, but you were right on with the plugin interference.
I de-activated all of my plugins (about a dozen or so) and re-activated them one-by-one. I found the problem was with ” Gallery Shortcode” (which allows user to set a comma seperated string of ID’s for the [GALLERY] Short tag from http://mfields.org/wordpress-plugins/mf_gallery_shortcode/) which I guess isn’t being supported anymore anyways. Now pretty excited to actually explore the features of the plugin!
Have a great weekend!
Hi Kento,
Thank you for this wonderful tool.However, I have a problem that I hope you could help. Somehow the images on the wunderslider are cropped and only a topcorner part of the image is shown. You can go to my website at: vietyouthdc.org/?page_id=40&preview=true&preview_id=40&preview_nonce=bbcae04b8a to take a look (I dont know why the second one works and the first one doesn’t. Maybe it’s because of difference in the size of the photo?)
PS: I’m using the full-screen display option
Thanks for your kind comment Tom. The images look fine on that page but the server seems to have problems, when loading the page I get this in Firebug’s console:
Image corrupt or truncated: http://vietyouthdc.org/wp-content/gallery/bowling-tournament-2012/281001_10151094899566398_1439599711_o.jpg
Image corrupt or truncated: http://vietyouthdc.org/wp-content/gallery/bowling-tournament-2012/178168_10151094899091398_1495567627_o.jpg
And the page takes forever to load, I also got an Internal Server Error when trying to visit the domain on another machine.
I’m using your plugin on http://sallyshorkend.com and in my gallery, I have pics of different dimensions, and I’d like these images to be shown in their full dimensions.
How do we manage putting all these pics up with different dimensions when you have a standard dimension setting.
When you say “I have pics of different dimensions, and I’d like these images to be shown in their full dimensions” do you mean you don’t want them auto-cropped to the WunderSlider container?
In general, if you have images of different proportions where the auto-cropping does not yield the results you want, create copies of those images and in each copy choose that part of the image which adjusts to the desired proportions and is yet adequate to convey what the image tries to express. Then use a fixed mode instead of proportional to display the images.
hi
i was wondering can it support thumbnails as well
thanks
That would be a great addition. Do you suggest any particular format? Feel free to mention other sliders or plugins that do what you would like to see. Feedback on that is welcome!
Pingback: Images finally added | Retro World
hi thanks for the replay
what i was thinking is a way to add thumbnails to the slider
the you can choose between dots or thumb
like wp-supersize gallery has
can it be done
it will be a great update for the plugin
thamks
hi
how are you
can it be done?
thanks
Yes it can be done, I think it would be a great addition and it actually is on the todo list. I can’t promise when exactly it will be available though.
I have wunderslider w/ nextgen. In the fullscreen mode the nav buttons show, but aren’t active. Click as you may, nothing. In other modes, the buttons work, but then I need the fullscreen mode. I tried to z-index the nav container to 9999, did not help.
The url: http://www.racketsandrunners.ca/wordpress/
the shortcode: [wunderslider_nggallery id="1"]
Neither works: [wunderslider_nggallery id="1" clickable="true"]
Please help!
PS I’ll buy for the client the commercial version once the problem is fixed.
kento, are you alive?
Sure
, noticed your comment as well, have it queued for review.
Hey this looks cool
Easy solution for you: assign a high z-index to #slider, I’ve tried 1000 with Firebug and it works.
Thanks, yeah, works, but had to z-index the consequent divs higher up so the slider does not take over the whole page! Hope IE won’t give me problems.
PS will buy the commercial one once client’s happy and ok’s it. You deserve the bucks.
LGJ
Thanks
Fingers crossed on IE, it’s always been a nightmare
The slider works down to IE7 but of course it all depends on the particular theme then as well.
Kento, IE’s fine.
Now, here is another one for you….
I have the settings “slide left”. And that works.
But when I use arrows or the selector, instead it just flips the content. How do I make it slide as well?
http://www.racketsandrunners.ca/wordpress/
Thx
LGJ
It’s meant to be that way, i.e. if you click a selector or next/previous button no effect is applied. But an option that would allow to enable effects for these will be added, it’s been requested already and is on the todo list for the next release.
Do you have an approx. timeline for that? What can I do to help?
LGJ
I’ll add this together with a few fixes, hope to get my hands on it before the end of the year.
I installed Wunderslider and Wunderslider Gallery. Main reason is to get responsive gallery based on Nextgen. BUT for some reason the gallery does not adjust to smartphone (Android ICS) display size. The demo-website behaves OK. I use Weaver II theme. Any idea?
Can you post a link to the demo site please?
Hey, Just a heads up- in WordPress, on the Wunderslider default settings page, under Proportional display mode it includes this example code:
[gallery container_width="80%" height="360px"]
but that breaks the slideshow for me. After reading through some of your conversations with others in this thread I figured out the problem- It needs to be:
[gallery container_width="80%" container_height="360px"]
Hope this helps!
Thanks for the great plugin!
Depending on the use of nextgen or not:
Nextgen gallery:
[wunderslider_nggallery id="1" container_width="100%" container_height="450px" display="proportional" mode="proportional" clickable="true"]
Not Nextgen gallery:
[galley container_width="100%" container_height="450px" display="proportional" mode="proportional" clickable="true"]
Adjust the id, container_width, container_height, clickable to your prefs, else leave it as is.
LGJ
Right, mine is working, but the provided example in WP says “height=” when it should say “container_height=”.
If you follow the example, then it breaks.
Yes that’s true, thanks for mentioning it – the documentation needs to be corrected
Documentation still not corrected – I had a headache with he same issue, and then spotted these comments which has saved the rest of my hair from being pulled out. Seriously, you need to update this info! I almost gave up on your plugin.
Where in the documentation have you seen this please? It’s supposed to be corrected now, but I might have missed a spot.
Hello –
Great plugin! Thanks for all the hard work.
A couple others have also commented above about the same issue that I have: displaying images of varying sizes.
In my case we want to be able to throw up an assortment of images into NextGen galleries and have them completely visible (not cropped to fit) within the slideshow. We do not want to resize them all to fit the proportions of the slideshow. What we’d like is for all of the images to be scaled to fit within the slideshow (and the rest of the slide should be filled with a solid background).
It doesn’t look like I can do this just in the CSS, and I don’t want to edit the plugin code and then not be able to get future updates. Any chance you folks will be convinced to implement this option? Would you be more likely to do so if I hack it into the code myself and share it with you?
Thanks again!
Hey ZAP,
You’re right, CSS rules won’t help you to achieve this. On the technical side of this – the images are sliced up for the effects – using images of different proportions that do not fill the container can create a bit of a problem. I wouldn’t mind adding an additional option to the
modeparameter – for example afitoption that doesn’t crop but resizes maintaining the aspect ratio and fitting the dimensions of the container, but I fear it’s going to be very hard to implement because it’s quite different to the approach and ideas behind WunderSlider. In other words, I need to check if it’s feasible to implement that option.You can however achieve the same effect, you just need to create versions of the images and use the fixed mode as I have suggested in this comment. It involves an intermediate step (which can be automated with ImageMagick) but will actually yield better results I would say (thinking about image quality).
Thanks for the suggestion and offer to help out with coding that. I’ll follow up on this after reviewing the possibility to add the option.
Cheers
Just bought a license last night. It did a very good job existing galleries.
I have run into a couple of problems trying to use the gallery plug-in in creating a new post.
The images are all 1280×720 pixels, and I want them in a gallery sized 640×360. The page (column) width itself is 660px.
1. When I try fixed width (set as default at 640×360 px) I get only the top left quarter of the image. Am I missing some setting?
2. I cannot seem to figure out how “proportional” must be set at all. Sometimes, I simply get XML error on line 0. Other times, it’s a tiny grey box with no image.
I have looked at the documentation with my extremely limited coding knowledge, but could find no situation,or not understanding it.
At the moment, I have turned off its default use. Would very much like to use it though.
Thanks in advance.
Can you please post the code you are using right now on pastebin? It might be a simple syntax error, I’ll try to help fix it
I’m using the slide right effect. Any way to have the first slide load in place rather than have it slide in?
Yes, you can use the effects parameter for that, e.g.
effects="none,slideRight".Dear Kento,
at first thanks for this great work! I already try out your Plugin for WordPress a few weeks ago and all works fine. Now we’ve purchased a licence and it seems that the shortcodes are not working. If I want to add a slider by shortcode (with NextGen) I’ll get this javascript error:
“Cannot set property ‘effectWorker’ of undefined [http://dev.zitrusblau.de/justbig/wp-content/plugins/wunderslider/js/wunderslider-min.js?ver=3.5:22]”
If I paste the shortcode include XML which is mentioned in the documentation for single pics the slider works fine but this is very difficult to handle galleries by this way also I need the working shortcode for Homepageslider.
Here are the specifications on dev.zitrusblau.de/justbig:
- WordPress 3.5
- Responsive Theme (I try it also on standard TwentyTwelve Theme, same result)
- Gravity Forms Plugin
- WP UI plugin
- NextGen Gallery plugin
- Wunderslider Plugin
- Wunderslider Gallery Plugin
I try also to deactivate all Plugins step by step but nothing change.
The first error you can see on Homepageslider, On the “Beispiel-Seite” I’ve added two slider, one with shortcode which is not working and one with XML wich works fine. I’ve also tried different settings for NextGen on the Wunderslider Gallery Options Page but nothing changes.
It would be glad If you can help to find the issue, cause this Plugin is really great and I want to get it work fine. Sorry for my bad english!
Dear Kento,
sorry for confusion, this is my mistake I’ve forgot to set width and height for proportional mode. All works fine!
Now I’ve another problem.
I want to use the Wunderslider for NextGen galleries which is generally no Problem, but the title of the single pics are not showing in the caption. The slider shows the title of the whole gallery instead, same on your NextGen demo.
Is there any way to get the title of the single pic? Otherwise the Wunderslider is not really usefull for NextGen galleries…
Kento, now I’m near to a nervous collapse. It seems Wunderslider is really unusable for NextGen galleries or/and your documentations relating to WordPress and NextGen especially the shortcodes are a nightmare!
I need to have the caption on the right side of the image and try the following attributes at the nggallery-shortcode: captionContentElement=”span” -> no effect, caption_top=”0px” caption_right=”0px” -> no effect, caption=”top right” -> no effect
The next problem in this relation is the width of the image and caption container because the widths are setting as inline style by your script. If there is any way to position the caption beside the right side of picture, would be the inline style adjusted? Cause the caption should not be an overlay.
I can set the container class by shortcode (this atrribute works fine) and set the widths with “! important” statement but this is very ugly…
You can target the caption and place it pretty much everywhere you need, it’s just a question of using the right CSS rules within the context. For example, this would be a start for what you want to achieve:
<style type="text/css">.wunderslider .pane div.caption {
right: -100%;
width: 200px;
}
</style>
[nggallery id="1" wunderslider="true" container_width="50%" container_height="300px" display="proportional"]
Thanks for pointing that out, if you update to 1.3.4 this has been changed so that the image alt/title text is used as the caption title.
Dear Kento,
many thanks for the changes, this is great!
About the CSS, I’ve already change the rules to get the needed layout, but with many “! important” – statements. It would be very usefull if it’ll be possible to create own slider-templates by copying the template-files into the used theme folder, similar to NextGen.
Maybe you can consider this for a future version?!
best regards
I totally agree, I was going to suggest to create one but the WunderSlider has to be improved so that it will take other themes than those provided with it. I’m putting this on top of the list of things to do.
hi, I bought the product: wunderslider
I’m so used fullscren mode, but the image in landscape mode screens is cut by the top.
How can I do to cut the image “only” for the bottom?
Regards
You would probably do best in adjusting the image itself, so that it better fits to what part you want to display. In any case, can you post a link to have a look?
hi,
Could you indicate an email to send you the link privately?
thanks
Sure, please use the Contact section.
I sent the link to your email account. Have you seen it?
Thanks
Luis
Not yet, will get back when I have.
How to remove powered by wunderslider from the frontend in wordpress site?
There is a setting for that if you are using WunderSlider Gallery under Appearance > WunderSlider Gallery. There is also the
hideLogooption that can be passed on to WunderSlider directly (JavaScript).I have tried to install the plugin via:
- Manually via FTP (upload to plugins folder)
- Via admin console, upload ZIP
- Via admin console, WordPress plugin libary.
The Wunderslider plugin shows up, but says:
The WunderSlider plugin has not been found. You need to install or activate it.
Please visit WunderSlider to obtain a copy, then install and activate the WunderSlider WordPress plugin.
How can I fix this?
After downloading the zip file, extract its contents, you will find the WunderSlider plugins in the wordpress folder.
Hi Kento, very nice plugin !
I have some trouble with WP 3.5.
I need URL links, I put the code (HTML preview)
[wunderslider]
[/wunderslider]
and it runs well, but when I select in backoffice “Visual” all between [wunderslider]
[/wunderslider]
is erase…
Do you have some advise ?
Best regards
Thanks
You would have to stick to the HTML editor there, it’s all being filtered out when you switch to Visual.
Thanks Kento for your answer
Hello there!
First i have to thank you for this great and powerfull plugin!
I´ve got a little problem in Chrome & Safari: Among the picture selectors are question marks shown whithin the slides.
In Opera, Firefox, IE9 and mobile Browsers everything is fine. Any solution?
Thanks in advance!
[you can look at the problem here: http://idmodus.com/cms_de/inspiration/ ]
Thanks, the site looks awesome by the way
What happens is that you have a CSS rule that tries to load
images/postbullets.jpgon thelitags and the resource is missing, thus the question marks. The solution would be to restrict that rule to where it should be applied only, so that it doesn’t get applied on the WunderSlider.I see – thanks for looking into the code. Unforunately i´m just a designer, not a coder. But i think after achieving your support i´ll figure out where to find the corrupted part.
And also thanks for the compliment!
Found it. Double-facepalmed myself for it.
I´m using custom css from another folder for some pages and forgot to replace the links in the css-files.
Thank you, thank you, thank you!
Great!
Really like the plugin, has pretty much everything one would want.
I was wondering if there is a way to add thumbnails of the images under the slider? or even as a pop up thing when u scroll to the bottom?
It’s not an option yet but I’ve added this on the @todo list
hi i would like to get an offer to include thumbnails in the slider
can it be done
thanks
I’ve put it on the @todo list already
but if you would like to support its development that would of course be welcome. You can get in touch here.
This plugin is superb.
Thank you
Is there a way to show and hide caption from shortcode?
As I am using three sliders on same page, so when I hide caption through css it hides for all the three sliders.
So what is the way to hide it for two sliders only?
You can target them by using their id, the first one would have
#wunderslider-0, second is#wunderslider-1etc.I purchased the commercial version of Wunderslider and also the premium Nextgen optimizer, and everything was working fine till all of a sudden my slideshow on the home page disappeared (and the gallery lost it’s lightbox effect on the gallery page at the same time). Not sure if this had to do with updating WP to 3.5. The home page, with non-working slideshow is http://www.ritasahai.com.
Can you tell me why it isn’t working, but was just fine before?
Hi Megan,
I’ve taken a look right now and it seems to work fine (I’m looking at it through Safari).
Anything changed there?
Kento, hello again, I have re-sent the e-mail with the url example.
I hope you can see it …
thanks
Hi Luis,
I’ve seen it now, in that mode it will adjust so that the image is centered. As that happens automatically I think it would be difficult to try to override with a CSS rule, probably adding as an option would be a good idea.
Hi,
testing your nice Wunderslider, because of the features “responsive” and “proportional” and integration with ng gallery.
however i have some remarks/wishes, which would actually make it generally useful for my purpose.
1. i find the “responsiveness” not proportional. the slider has flex width but always fixed height. when resizing this results in non proportional slider, just showing a cropped part of the image. To me, responsive and proportional would be resizing height and width proportionally.
2. i wish images would optionally not be cropped but fit inside the slider container filling empty space with solid bg color.
3. optional thumbnail carrousel strip would also be nice…
I am looking around already a long time to find a nice customizable slider/slideshow which fits these 3 points and is also smooth, has custom positioning of nav elements and is compatible with nextgen and mobile devices.
thanks
jan
Thanks for your thoughts Jan, I think #1 would be good to have as an additional option, same for #2 and #3. Similar requests have been made already by others and I hope to be able to add these soon.
Just wondering if Wunderslider has been tested on a Multisite environment. I installed it on a clean WP 3.5 multisite and when I go into the configuration I get this message “The WunderSlider plugin has not been found. You need to install or activate it.”
It seems to me that it isn’t Multisite compatible. Can you verify?
Thanks for pointing that out Jeff, I’ll check that and release a fix if needed.
Hello, Using the commercial wordpress version and it works great. But now I’d like to use the shortcode in a widget and it doesn’t do anything. I have the code in my functions file to execute shortcodes, and others work. Should I be able to get the Wunderslider to work in a widget?
Thanks.
Dave
Can you post an example of what widget and code you are using please?
Hello, Since my post I went back to having the wunderslider in the content area and rearranging other things to get the layout I needed. Thanks anyway for the response
Ok, thanks for getting back on that.
Warning: file_exists(): File name is longer than the maximum allowed path length on this platform (4096):
meh. whats wrong???
Within what context please? Doesn’t look like it has something to do with WunderSlider but rather where it’s being used.
this appears when I insert the code [wunderslider_nggallery id="12"] in my article.
without the wunderslider tag the normal NextGEN Gallery appears. meh.
I don’t understand this.
Can you post a link to where that happens please?
http://img145.imageshack.us/img145/782/unbenanntdk.png
Thanks but I was asking for a link to the page, where are your images located and on what server environment? What plugins are active on the site?
Great plug in, but how and where do I turn off the slide transitions?
Thanks Michael, you can use the effect parameter for that (please refer to the included documentation for details).
hi just installed it
im using it with nextgen gallery
it works great when i set it to full screen
but when i use proprotioanl
i see only arrow
heres a link
http://pitaro.funet.co.il/testroyal/
this is the code im using
[nggallery id="26"]
what wrong
thanks in advanced
Have you set a height? (The link shows Not Found so I couldn’t check there).
Hi there!
Really excited about finding this slider, and have a couple questions.
It is installed on a WordPress site with the appropriate plugins and is pulling images from an NGGallery.
The Title text is displaying properly, but the Desription text is fading into the background; it seems to be about the same gray tone. The text is there and can be selected though.
So my question is where are the colors for the display being set? I looked for color settings in the skin file but didn’t see anything that seemed appropriate.
Any thoughts?
Hey thanks for using it
This can normally be adjusted with the right CSS rules for the theme you’re using. Would you mind sharing a link to a page where you’re using the slider to have a look?
Hello,
i use the “Wallbase” Theme for my photo site. This theme has an own slider. For this slider there appears a new menu point in the backend, where i have to link the images that should be used for the slider. Looks similar to the editor for new sites. Is it possible, to use wunderslider whith such kind of theme specific slider?
Sorry, if my questions seems to be stupid, i am very new to wordpress.
Regards, and Thank You all
Smo
Hi,
You can use WunderSlider with any theme, depending on the theme you might need to adjust some CSS rules if they interfere, other than that it usually works quite nicely OOTB. What I’m not sure about is how you intend to combine the theme’s slider and WunderSlider. Do you mean you want to use WunderSlider to display the images that you upload through the theme’s slider? If that’s the case, then it will probably easier to just upload the images to the post and use WunderSlider to display the post’s gallery.
That’s a perfectly valid question
Cheers
hi
i have purchased he plugin
i have a prblem on ipad
fro some reason
i cant drag the picture
it wont response to touch
on i phone it ok
*you need to go to the link from ipad to see the slider
any clues why
thanks in advanced
eitan
Can you post a link to where you are using it please?
hi
anothe thing how can i stop autplay
right now ive set period to
500000
but is there a smarter way of doing it
thanks
That would be the option to use, there’s no option to turn it off … unless I forgot about it
Hi Kento,
great work! I tried to use wunderslider to show panorama, portrait and landscape photos, but the images are cropped to the dimensions of the container. Is there a chance that you create a “resize” option for a proportional container?
Thx!
Thanks Micha, yes I’ve got that option already on my @todo list
Great slider Kento!
2 questions:
1. How can we add the image number to the bottom right?
2. Can we stop the automatic sliding of images? Setting the duration to “0″ doesn’t seem to work as it defaults to “1″.
Thanks,
AM
Many thanks
#1 You could place the caption there and use the description to show the number.
#2 Using the
periodparameter with a large number would have the effect.Hello,
Thank you for this wonderful Slider. It is one of the best designed slider I have ever seen.
I tried to use the Wunderslider in normal text widget. I used the code like this:
[wunderslider]
[/wunderslider]
and adapted this to get the right pictures and size.
No pictures were shown, only the following text:
[wunderslider]
[/wunderslider]
Per Twitter I got the information that I have to load the .js-filde. Where I have to load the .js-file?
Thanks, Daniela
Hm, the code there is not the whole code I have posted. So I now posted it in pastebin: http://pastebin.de/33056
thanks in advanced,
Daniela
Thanks Daniela, do you have a link to the page where this is used?
Hi, Kento
it is used in a widget, see http://www.huevie.at, left sidebar, widget with title “Unsere Botschafter”. I use an enhanced text widget, which should handle shortcodes.
Which php-file I have to manipulate, to load the .js file?
Thanks, Daniela
I use WordPress 3.5 and the wunderslider plugin personal. I tried the slider on a page and on a article. There it worked.
Hi Daniela,
Thanks for the link, it seems that the widget you are using doesn’t interpret the short code. Have you tried the Custom Post Widget plugin? See Useful Plugins for a link; I think it should be working fine without having to load the .js file explicitly. At least if you place the short code in a content block and add that content block to a sidebar, it should recognize and interpret the shortcode. Please let me know when you’ve tried it out, and if you can place it on the page there to have a look in case you still have problems with it, I’ll be happy to have a look again.
Hi Kento,
it works now. I’m very happy!
Thank you very much for this brilliant tip with the Custom Post Widget!
Daniela
Hi, Kento
it works, if I put the same code of the content block to an article and save the arcticle. If I delete the arcticle, the wunderslide
will not be shown in the custom post widget.
Why?
thanks, Daniela
… but when I set the article to private, the wunderslide will also not be shown. Now I put the same code to a page, which isn’t shown in the menu bar. So the slide is now shown in the sidebar.
I tested now various situations. The wonderslide is shown, if the same code is embedded in a PUBLIC article. If the article is private, the wunderslide is only shown, if am logged in.
I found it out for myself. I loaded the .js file in the content block and now it works.
thanks, Daniela
Cool, great to hear that
Hi there, It’s working great except on iPhone (iPhone 4, running iOS 6): Right before the slide starts to transition to the next, the next slide flashes at full opacity for a quick second, and then the fade happens as normal. Based off my testing below, I suspect it is related to 320 Press’ Wp-Bootstrap theme. Have you had any similar reports and/or can you think of anything off the top of your head that I could try?
I have tried:
- deactivating all plugins except NextGen, Wunderslider Gallery, and Wunderslider.
- tried removing all links to any other javascripts or css.
- I am using HTML in the title and captions, so I tried removing all of those.
- Switched to an untouched new install of WP Bootstrap theme (which my theme is loosely based off of)
- Tried switching to Twenty Twelve theme, and it works fine!!!
I have the settings set to:
Default Skin
No Overlay
Overlay opacity 0.2
Fullscreen
Show caption
Show slide selector buttons
Enable Flicking
Fade in
8 Horizontal blocks
Auto vertical blocks
Period 4000
Duration 1000
FPS 16
Animate 500
Thank you, very nice plugin
Thanks Cindy, did you check if there are CSS rule being overridden? If it happens with that theme on iOS, that’s where I would look for.
Hi,
I purchsed the commercial version of wunderslider. How can I download an updated version of it?
Regards
Wolfram
Hi Wolfram, in the downloads section: Downloads
Hi Kento,
I would like to remove the ability to cycle through all images in the slider. Examples of this behaviour occurs when a user is clicking the PREVIOUS button when they are on the first image of the slider or when the NEXT button is clicked while you are on the last image. I would like to disable the ability to go back and forth in those situations where the gallery has hit its limit.
Thanks!
AM
Hi AM, thanks for the suggestion
Note has been taken, it can be added as an option at some point.
Hi Kento,
I purchased the commercial version and I’m using both WordPress plugins – Wunderslider and Wunderslider Gallery.
Trying to set up a fullscreen slideshow on the home page of the site. Works great in Twenty12 theme when inserting the gallery shortcode in the content area and with other plugins active.
But in my custom Genesis child theme I only get the shadow that’s at the bottom of the default Wunderslider theme. No images show up. I’m using do_shortcode(‘[gallery]‘); in my page template.
Do you have any suggestions where I should look for the issue? The wunderslider js is getting loaded on the page and the script with all of the images is there as well.
Thank you!
Kathy
Hi Kathy, can you post a link to a page where this happens please?
Hi Kento,
My theme was referencing the latest version of jquery (1.9.1) from Google instead of using version 1.8.3. The slideshow wouldn’t work with that version. Works beautifully now.
Thanks,
Kathy
Hi Kento,
Is there a way to allow the full screen slideshow to be absolutely positioned rather than fixed so instead of page content scrolling up over the slideshow, the slideshow scrolls up to allow the content to scroll up from below?
Thanks,
Kathy
hi Kento,
RE: my last comment. I am keeping the slideshow fixed in the background but want to always start my page content at the bottom of the screen. Before installing the slideshow I was able to calculate the marginTop of my content div as the window resizes using javascript. That calculation no longer works now that the slideshow is in place. Any idea why that might be?
Thanks!
Kathy
Hi Kento,
How do you provide a linkURL using the Wunderslider Gallery for WordPress? What are the parameters for the linkURL? Nothing about it in the documentation.
Thanks!
Kathy
P.S. – resolved all my other issues
Hi Kathy, I was just thinking about what to suggest but noticed this last comment before getting too far with that
Out of curiosity, how did you solve it?
Regarding the linkURL parameter, the WunderSlider Gallery plugin doesn’t support it, but let me have a look …
Hi Kento,
I changed my script to fire on the document ready and on the window resize. I was just doing it on window resize before. Not sure why it even worked before! The code is below. The #wrap div it the div that I want to begin below the slider. I’m looking in to how to add an arrow to indicate there is more content below, and that scrolls the content up when clicked.
//change margin top of #wrap
$(document).ready(function() {
$(‘#wrap’).css({‘margin-top’:$(window).height()+’px’});
$(window).resize(function() {
$(‘#wrap’).css({‘margin-top’:$(window).height()+’px’});
});
});
… had a look and it seems it will stay that way. WordPress doesn’t seem to store the link URL, you can choose for example a custom URL when you insert an image into a post, but that’s just used to generate the markup that is passed to the editor. It’s not stored anywhere and thus we can’t retrieve it to pass it as the linkUrl parameter of an image to WunderSlider. And to my surprise, NextGEN doesn’t seem to allow to indicate a link URL for an image either (at least not OOTB and what I’ve seen from browsing around looked too hacky).
Conclusion: It won’t be supported unless there is a sane way to have link URLs related to images.
Thank you for looking into it Kento. Yes, I noticed the image link weirdness in WordPress. I may just use the Wunderslider plugin and not the Wunderslider Gallery plugin and generate the shortcode in my page template, and pull the link from the description field for the image or something similar. That should work, right?
Yes that should work, it’s a bit more complicated to set up, but given that this way offers more flexibility I would give it a try
Hi Kento,
I added a field to image attachments and then modified the code at line 382 in class-wunderslider-gallery.php to use that if it is not empty>
Here’s the code in case you want to do something like that…
Changed this:
$description = $attachment->post_content;
$xml .= sprintf( ”, esc_attr( $url ), esc_attr( $title ), esc_attr( $description ) );
to this:
$description = $attachment->post_content;
$sourceurl = $attachment->source_url;
$xml .= sprintf( ” );
Here’s the code I added to my functions.php file:
add_filter(“attachment_fields_to_edit”, “add_image_source_url”, 10, 2);
function add_image_source_url($form_fields, $post) {
$form_fields["source_url"] = array(
“label” => __(“Link Image to this URL”),
“input” => “text”,
“value” => get_post_meta($post->ID, “source_url”, true),
“helps” => __(“Add a valid URL that the image should link to.”),
);
return $form_fields;
}
add_filter(“attachment_fields_to_save”, “save_image_source_url”, 10 , 2);
function save_image_source_url($post, $attachment) {
if (isset($attachment['source_url']))
update_post_meta($post['ID'], ‘source_url’, esc_url($attachment['source_url']));
return $post;
}
Thanks for sharing that Kathy, this looks good (some of the code you posted got stripped off by the comment filter, but I get the idea).
What is the most likely reason that the xml shortcode is not working?
e.g. I’ve tried my xml and your example xml here… http://wunderslider.com/wordpress/ All I get on the page is… [wunderslider] [/wunderslider] My site is on an internal network unfortunately.
No js errors, no php errors, no missing downloads from firebug Net panel. I also tried do_shortcode(”) and that didn’t work either.
This does work great.. [wunderslider_nggallery id="3" mode="proportional" display="proportional" clickable="true" container_width="95%" container_height="430px" ]
I assume the only way to create an external link on the image is to use the xml shortcode, correct? It would be nice if the nextgen gallery had that attribute for images.
Thanks a bunch – I love the responsive aspect, caption adjustments, links and skins!
Hi Doug, can you post the exact code you are using through pastebin please?
Thanks for the nice feedback
Have noticed a bug/design omission:
if the image description has a special character such as single quote, your display of the description shows the escape character prefixing it – just a bit messy!
so David’d hat would read David/’s hat
Thanks for reporting that Paul, it happens when using it with NextGen, when using the normal WordPress gallery it’s ok though. Of course that needs to be fixed, I’ll release an update as soon as possible.
I just noticed that the first image in the series stays displayed for almost twice the duration of all the remaining images. I have the following settings:
Transitions
Effect: Fade In
Horizontal blocks: 8
Vertical blocks: Auto
Period: 6000
Duration: 2000
FPS: 16
Animate: 500
I notice the first slide stay for about 9 seconds, and all the remaining ones, about 5 seconds. Even if I wait until a few have displayed and click back to the first image in the blobs (sorry I don’t know what they are called!), the first image stays displayed again for about 9 seconds.
Thanks Paul, looks like you noticed the effects of a bug here
I’ll need to review and fix it. Cheers
hi, love this, but as soon as I try and use it with Rails 3.2.12 I get a Javascript error:
‘Uncaught TypeError: Cannot read property ‘msie’ of undefined — wunderslider-min.js:23′
which seems to be a problem with the wunderslider js.
Could it be that Jquery 1.9.1 is not supported? (comes with Rails)
many thanks for any insights, I could find anything by Googling the error.
further to my previous post, have reproduced the error on the demo by replacing jQuery 1.7.2 with 1.9.1
Is there a fix as I can’t downgrade my jQuery as other bits of my app depend on it.
Thanks for reporting this. As it seems, in jQuery 1.9 jQuery.browser() has been removed, which I assume is why this happens. The WunderSlider code will need to be updated so it is compatible with jQuery 1.9+. Meanwhile, could you give jquery-migrate a try?
Just spotted a small typo error on the gallery setup page under the “Appearance” section: the “height=” is missing “container_”. Caused a few moments of puzzlement when trying to get it to work.
———————-
Proportional display mode
If you choose proportional you must provide the container width and height explicitly along with the [gallery] shortcode.
Example: [gallery container_width="80%" height="360px"] .
———————–
Anyway, fantastic plugin, thanks!
Nick
Many thanks Nick, that’s the one I missed
I’ve just corrected it and will issue the updated release today.
Hi Kento,
I ran into the same issue with the z-index and the slide selector buttons as LGJ above, and your suggestion solved the problem. However, I have a js sticky footer on my site, and the background image of the footer div disappears when I do this. (I can still see the contents of the footer div, just not the css bg image). I have set the footer’s z-index to higher than anything else, even tried placing it inline and !important.
SO, my question for you is, is there any way I can set Wunderslider css to make the full background image to stop 45px above the bottom of the window? I have it set to Fullscreen, and am using it in conjunction with NextGen Gallery if that makes any difference. (I am using JPGs; if I was using PNGs for some reason, I thought about making the bottom 45px transparent, but that won’t work in this case).
Is there any other info I can provide you with?
Thank you!
-Cindy
Hi Cindy,
Can you give a link to the site please? Instead of making it stop 45px above, a simpler solution might be to just let the footer cover it – I think that’s what you were trying to do, right?
Cheers
I emailed you at itthinx since I can’t post the staging URL here. Thanks!
Got it, having a look right now. Hey that looks awesome, great job on the skin! You should post a link here when the site is live
Have a look at http://pastebin.com/Unc7SEtG
div.foobarrenders nicely as your footer if you try it out. I hope it helps as a starting point to make your footer work.Kento, Thanks for the reply. It works with a background color, but not a background image. So strange! Any more ideas? I will keep messing with it…..
I haven’t tried it with a background image, but I can’t think of why it shouldn’t work.
I wrapped id=”footer” with your div and now the background image works
THANK YOU, you saved my life.
Cool! I’m happy that worked out well then, it’s really tricky sometimes
Hi Kento,
The full screen background slideshow is working great. There has only been one comment from a user on a Samsung phone that the images are squashed rather than fitted to the space. I have been unable to get additional info about what phone version, operating system, browser, etc. I have tried the site in a half-dozen emulators and everything looks OK. Have you heard of any other cases where the images were squashed and what the circumstances were and possible fix?
Thanks,
Kathy
Hi Kathy, it can be due to a conflicting CSS rule that is used only when targeting a specific platform, but we’d really need to know which OS it is, what browser, which theme is being used etc.
The fadein transition is not smooth. The current slide does not fade out, but instead stays at full opacity until the next slide reached full opacity. At that point, the current slide abruptly disappears.
Sit’s not live so here’s a screencast…
http://brinsterinc.com/wunderslider.mov
The current image should fade out as the next one fades in, correct?
The problem here is that the images you are using have a transparent background. When fading in, the previous image is maintained at full opacity while the next images is faded in, increasing its opacity until it is fully opaque; at that point, the previous image is removed.
What you’re looking for is a simultaneous fade-in & fade-out effect, which isn’t available although I think it would be a great additions so that in cases like yours, the desired transition can be achieved even with images that have a transparent background.
Until this is added, I would suggest to add a background to the images, in this case it can be tricky though because of the gradient page background.
I am having this same problem: http://www.itthinx.com/topic/wunderslider-resize-problems-in-ie9/ The site is in a test environment now. Can I email you the login info so you can take a look? Looks fantastic in Chrome and even IE8 but in IE9 and 10 only partial images are showing.
Hi there, a link would be preferred – can you post a link to the test site or a test page?
Did you get my link info? We are waiting to hear if there is a fix for this or I need to find something else before launching the site. Thanks
Yep got it, but haven’t had a chance to look. Let me have a quick look right now …
You have a very hungry rule forcing max-width to 100% for any
imgtag in your.../themes/putterhere/style.csswhich seems to throw the thing off:img {height: auto;
max-width: 100%;
}
When I disable that rule with Firebug, the images appear fine – if you’re trying it with Firebug, resize the browser window to make it adapt to see it’s working, it’s quite cool to see how this behaves well with the responsiveness of the theme.
Geez. That was it? I could have figured that out. Thanks for looking. Glad it was that simple and perhaps this will help someone else. Thanks again. This is the prefect Gallery for our needs…love that I can have several responsive galleries on the site with Wunderslider.
Hi,
Am using the following wunderslider shortcode in header.php:
echo do_shortcode(‘[wunderslider_nggallery id="1" display="proportional" mode="proportional" clickable="false" useFlick="true" effect="fadeIn" container_style="width:100%; height: 700px; margin_left:auto;margin_right:auto;left:0;right:0;"] ‘);
All appears good apart from the nav arrows that are forced to the right of the image gallery. Please can you advise on how to fix this problem/best approach?
Hi there, can you give a link to the page please? Sounds like adjusting CSS rules should do the trick …
Hi,
I’m wondering if it’s possible to use the full-screen mode, but not in the background. I want to have a series of images on a page that can be clicked and each launch a different slideshow. Kinda like the bottom of this page:
http://www.imaginitmusic.com/listen/roam.html
Thanks in advance
Hi Heather,
Would it be on a WordPress site or without any platform? On a WordPress site you can use an ‘empty’ template for the pages to get the effect. Or do you have a link you can share to what you have right now?
Hi Kento,
Are there any known issues with the custom settings using a WordPress multisite? I’m having some trouble getting the WunderSlider to show up using a do_shortcode function on my home template. It loads the default settings player fine, with the correct NexGen gallery id images, but when I check “Enable these settings by default?” neither the gallery or the player load into the page. I enabled it from the network page as well as the specific multisite and also tested it on a new page w/o do_shortcode, with the same results.
I sorted it out. I overlooked the fact I made some changes which needed dimensions in the short code. Thanks just the same!
Thanks for following up on it Jared, glad to hear you solved it
The slider is working well but I have a problem resizing the browser window. If the browser windows is reduced to a height smaller than the image I want it to clip the bottom rather than “push the image off the top”. I do not want to loose the top of the image. Can wunderSlider be configured to work this way? The above can be achieved following the solution on this link http://www.emanueleferonato.com/2010/11/13/full-screen-centered-background-image-with-css-and-jquery/ for a single image. Thanks Steve
Hi Steve,
Currently it won’t let you do that, it adjusts things to show it centered. But it might be a good idea to offer it as an option, will take it into account.
Cheers
Ah one thing I noticed Steve; correct me if I’m wrong but this does not have any kind of no js fallback? Is there a way I can at least display the first image in the specified NextGEN Gallery if js is turned off?
Have you tried placing a non-Javascript version of the gallery within noscript tags?
I’ll give that a shot. I was considering having a responsive CSS slider as a fallback, but I’m thinking it would need to output the gallery images in a list, and then collect the title and description as a link…which sounds like it would probably be more work than its worth for the time being.