Polaroid Slider

Polaroid Slider for Wordpress by WPDreams

• Created: 09/15/2012
• latest Update: 10/9/2012
• By: Ernest Marcinko
• Email: ernest.marcinko@wp-dreams.com

Polaroid slider is a powerful image slideshow using dojoToolkit and CSS3 technology. The slider supports images and any other media with embed code.

Installation

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!

1. Login to administrator area
   To login to your wordpress administrator area you must go to http://yoursitename.com/wp-admin page.
   
2. Opening the plugins tab
   Open up the plugins tab from the right menu bar. After the plugins page loads click on add new!
   
    
3. Upload and Install!
   Select the Upload option from the list and upload the polaroid-slider.zip file and hit install! After the successful installation click on activate plugin!
   
   
   
    
4. That's it!
   This is the way of installing plugins in WordPress from the envato marketplaces.
   You should now be able to see the plugin in the activated plugins list.

Slider Settings Page

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!

1. Click on the Polaroid Slider menu item on the WordPress menu bar.
   
   
   
   You should see this after clicking on the Polaroid Slider menu item. Let's create our first slider!
    
2. Creating the first slider
   Fill out the slider name form and hit the Add button. You should see a new item just below the previous form.
   
   
   As you can see there are 3 navigation icons and a slider shortcode textfield available for each slider icon.
   Slides page icon - This icon will redirect you to the slide editor page, where you can add slides to the selected slider.
   Delete icon - Obviously, it deletes the selected slider after a confirmation dialog.
   Settings page - By clicking on this icon you will see all the slider settings on a slide-down style menu.
   Shortcode textfield - You can insert this shortcode to any post/page/html widget on your website.
    
3. The slider settings
   
   
   
   After clicking on the little settings icon you should see something similar as on the image above. Let's take a quick peek at each of these settings:
   • Slider width - The overall width of the slider in pixels
   • Slider height - The overall height of the slider pixels
   • Slider image width - The width of the image content of the slider in pixels
   • Slider image height - The height of the image content of the slider in pixels
   • Slider margin - You can add a standard CSS rule for the margin of the slider.
     For example: 10px (10px for all sides)
                              5% auto; (top and bottom 5% and auto on left and right)
                              11px 10px 9px auto; (11px on top, 10 px on right, 9px on bottom and auto on left)
     For more information about the CSS margin property please visit: http://www.w3schools.com/css/css_margin.asp
   • Animation direction - The general direction of the animation. By clicking on the next slide this is path that the previous slide will follow as it goes to the background.
   • Slide-in animation direction - The general direction of the slider initiation.
   • Animation Transition - Transitions are functions applied to the animation process. I recommend you to experiment with this, since it is more of a visual option.
   • Animation Duration - The duration of the slide-change animation.
   •  
   • Show Arrows - You can show/hide the navigation arrows of the slider with this option.
      
4. Slider settings 2
   
   
   • Autoplay - You can enable autoplay with this option
   • Rotation easing - The easing applied to the slide rotations
   • Rotation duration - The duration of each slide rotation after initiation or slide change
   • Autoplay - Enables autoplay of the slides
   • Restart autoplay after mouse interruption - If switched off then after hovering the slider with the mouse will permanently disable the slider autoplay
   • Autoplay interval - The time between the slide changes in milliseconds (1000 milliseconds = 1 second)
   • Ken Burns Effect - You can switch on/off the Ken Burns effect on image slides.
   • Enable fullscreen Switch - If turned on, then it is possible to switch the slider into fullscreen mode on the frontend
   • Bounce on mouse hover - Turns on the bunce effect on the mouse hover
   • Relative angle of photographs - The rotation angle of each slide in the slider in degrees. 5 is usually looking good, but feel free to experiment.
   • Left Arrow, Right Arrow - You can upload your own navigation arrow images if you want
   • Label font, Label font Hover - You can choose the font properties for slide labels.
      
5. Slider settings 3
   
   
   • Arrow left-right margins - It is possible to set the margins of each arrow, sometimes a correction is needed for the right output.
   • Fullscreen Icon - The fullscreen icon is changeable
   • Navigation bar active color - The active navigations square/dot color
   • Navigation bar inactive color - The color of the inactive slide navigation squares
   • Navigation bar border radius - If set to 8 then the navigations squares become dots
   • Navigation bar active border color - The color of the active navigation bar square
   • Navigation bar inactive border color - The color of the inactive navigation bar border
      

Slide settings page

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

Slide Content Options

• Slide Image - You can upload or select existing images with the WordPress default image uploader. You can also insert a custom image url as well.
• HTML code - any html code, video embed codes, flash embed codes etc..

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!

• Slide Background - The empty slide background color
• 100% image width - If the image width is higher then it is set in the slider settings page, then it can be forced to fit it's width.
• 100% image height - Same as above, but with height.

Slide Label Options

• Slide label Font - The font of the slide label
• Slide Label HTML - It is possible to add any kind of html code to the slide label field
• Slide Label Position - You can position the slide label by dragging the black-red dot on the picture.
  The size of the draggable area is not the same as the slides, but it's ratio is!
  You can also set the slide label animation direction and animation duration.
• Slide Label width - You can set the width of the slide label, if it is set to 0 then the width is 100%!
• Label Background Color - The background color of the label
• Label Background Opacity - The opacity of the label background
• Slide Label Border width and Slide label border color - It's also possible to set the label border width and color with these options

Subslide Options

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.

• Parent Slide - Specifies the parent slide for the current slide. Each slide can have only one parent. Any slide, that already has subslides cannot have a parent. We call the the subslides of each slide its children or child slides.

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.

Slider with Subslides

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.

Setting up the navigation for the subslides

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!

Labels

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.

Drag the point for label position

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.

What HTML code does the label work with?

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!

Slider on the frontend

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!

Slider Widget

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!