Polaroid slider is a powerful image slideshow using dojoToolkit and CSS3 technology. The slider supports images and any other media with embed code.
Installing a plugin in WordPress is the easiest thing in the world!
In this steb-by-step instruction guide you will learn this procedure and you can use it with any other plugin out there!
After the succesful plugin setup you will be able to access the Polaroid Slider settings page. On this settings page you can set up new sliders, edit existing ones and add and edit slides for each slider.
Let's see a step by step guide for a new slider!
By clicking on the images icon on the slider settings page will lead you to the slides settings page.
Just like on the slider settings page you will see a box with "slide add" function.
Type in "Slide 1" and click on the blueish add button. Then you should see something similar:
Now, let's add some more slides.
As you must have spotted, these boxes are draggable, you can reorder the slides by dragging them higher/lower!
Click on the settings icon on one of the slides and you will see the slide options!
As you can see, the slide settings page is dividet to 3 parts: Slide content options, Slide Label Options, Subslide Options
If you want to insert vimeo or youtube video code, you must copy/paste it into this field. You must leave the Slide Image field empty in order to view the html code!
It is also possible to set the options for subslides related to this slide.
There is only possible to set only one level of subslides. It means, that one which has subslides cannot have a parent slide.
The layout and functioning of the subslides are determined by the settings of the parent slide. Changes in the subslides will not affect the subslide navigation bar layout and settings.
The navbar options are basically the same as on the slider settings page, therefore I don't see a point for more explanation.
As you can see, setting up a slider is a 5 minute work. All is left is to add the embed codes into the posts/pages.
I recommend naming your slides adequatly for avoiding confusions in the layout. Take a look at this slide structure.
As you can see this structure is well ordered, the titles are adequate, there is no possibility of confusion in slides.
The Slide 1 Sub 1 and Slide 1 Sub 2 slide has set the Slide 1 as parent. (see the picture below)
The Slide 2 Sub 1 and Slide 2 Sub 2 slides has the Slide 2 as paren and so on...I think you ge the general idea.
As previously was mentioned the navbar settings on subslides does not affect the navbar, only the parent slide navbar settings are important.
So, If you want to set up the navbar for the Slide 1 and its children then you need to edit sublside options on Slide 1. Also you can see, that the subslide options are disabled if the parent slide is not set to none.
All you need to do is to pick the right colors, set the alignment for the subslides and enjoy your work!
Polaroid Slider is offering a very simple and useful interface for creating labels. In this section I will walk you trough on a simple label creation process.
I think you can understand the coloring and font options, so I will just skip that part and take a deeper look at the label positioning and animation.
Exactly. Grab that black diamond-dot and drag it around the frame. It represents the center position of your label. This frame is not exactly the size of your slider but the ratio of the sides are exactly the same as on your live slider. (it' because of the too small and too large sliders, it would not fit into the admin page in some cases).
Slide label width (px) - The width of the label, if you leave it on 0 then its 100%.
I have a set up a slider with 400px image width and 300px image height and added some slides into it.
Let's try out the following setup: (drag the dot to the center of the frame)
Ok, save the slide and go to the frontend. You should see your slide with a full width label text on the center. I have created an overlapped image from frontend and backend for better demonstration:
As you can see, the label text center is exactly on the dot position. This is how the label system works.
It does not matter if the label width is 0 or some other value, the label center always will be on the defined position.
It is not possible to test all the html variations, but the most common html codes should work. This means: video, game embed codes, images, iframes, divs, paragraphs, links etc..
You must take care for html errors in the label html code field! Invalid html code can break the whole slider layout!
We have successfuly set up our first slider, all is left is to add it to a page or post!
Go back to the slider page (by clicking on the Polaroid Slider menu icon on the wordpress menu bar or on the back link on the top of the slides settings page).
Copy the slide shortcode to the clipboard! Create or open a post/page and simply paste the slider shortcode.
Save the post and go to the frontend and take a look at the slider. You should see your brand new slider in action!
If you like, you can insert the slider to one of your websites widgetizable areas. Click on Appearance->Widgets and you should see the polaroid slider widget on the right side. Drag and drop it on one of the areas on your template, slect the slider from the list and enjoy!