Need to create a gallery/slider for a client? Do they have multiple gallery’s/slider’s? Well you don’t have to always put them on separate pages. You can us a jQuery-Ui Tabs and the Royal Slider! The following will show you how to finish making a WordPress tabbed Photo Gallery / Slider for your website.
Quick run down on this:
- Compatible in IE7+ (have not tested IE6, but if you have to I wish you all the best, and may god have mercy on your soul)
- Responsive!
- Easy to implament
To start I would recommend getting Style’s With Shortcodes as it has a ton of great features you’ll use for numerous occasions, and of course Tabs (jQuery-UI).
Finally you’ll want to pick up the Royal Slider. Not just is it, in my opinion of the best sliders available, it comes packed with ready to go options that you can completely customize, and don’t have to be a programmer to take advantage of.
You’ll be adding the sliders you create as the tabbed content (when you add a tab it will give you a content area, you’ll add your slider short code to it.) All of this is standard up until the following:
When you add your tabs you asked to choose a width, just go with its default as that wont matter because you’ll be adding this:
.ui-tabs {min-width: 100%; max-width: 100%;}
These now make the tabs go from left to right of your container and will respond accordingly.
For the sliders inside those tabs you’ll want to add the following to your js file:
jQuery('.royalSlider').royalSlider('updateSliderSize', true);
jQuery( ".sws-tabs" ).data('uiUitabs').options.activate = function(e,ui) {
ui.newPanel.find('.royalSlider').data('royalSlider').updateSliderSize(true);
};
This will cause the slider (assuming you set it up to be responsive initially) to no appear as it is supposed to within each tab (see what I did here: Bacara Resort)!
A big thanks to Dmitry Semenov and all his help in moving that forward.