DZS Scroller WordPress Plugin

Intro - top

Tired of the default scrollbar ? DZS Scroller WordPress pluginis the ultimate scrollbar for your site which you can customize very easily via CSS if the 3 skins included are not enough. It also comes with enhanced functionality like scroll by hover or fade on mouse leave. And it works on iPhone/iPad! So what are you waiting for ? Get it today for your site, integrate in less then 5 minutes!

What do you get?

• scroller WordPress plugin - get creative!
• documentation - extensive documentation on how to install & configure the plugin
• free updates - even if the value of this gallery increases with upcoming updates, you will get them for free
• free support - for installation via my forum -> http://digitalzoomstudio.net/support/ this is the fastest form of support

Installation - top

1. Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
2. Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:

3. Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
4. You should now see the scroller button on each post / page:
   
5. Start cusomizing to your needs. Have fun!
   

Adding to the Post / Page - top

1. access / create your post / page
2. select a heap of text you want to include in a scrollbar area
3. wrap in a [scroller] shortcode OR click the button in the editor ( appears in the image above ) and select your custom parameters directly from the screen
   
4. all done!

Special Features- top

Customize

This WordPress plugin is formed from a jQuery plugin - scrollbar, a shortcode that makes the applieng of the plugin easy and a shortcode button which simpliefies it all to a click of a button. The basic form of the shortcode is like this:

You can have any html element inside the scroller not just text. Images, videos and even a iframe of another site works too. So you can have any content there but we are going to stick to text for this example. Next we are going to present the options of the shortcodes / scroller. We add parameters like in simple html. So for example if we want to set a width ( w ) of 200, we are going to do it like this:

Make sure the appostrofees are standard. Like so - " . If for some reason, the option does not seem to work use no appostrofees. So here are the options:

w: the width of the visible area ( default: 300)

h: the height of the visible area ( default: 200)

iw /or ih: the total size of the content ( this is set automatically normally but you can set this manually if you know the exact size of the content ) ( default: '')

type: full-horizontal, marks a full horizontal scroller like in the first example of the preview - full marks a image you like to load before the scroller gets applied so the dimensions can be properly calculated ( default: '')

settings_multiplier : the multiplier of the distance the scorll wheel generates
settings_skin : choose from 'skin_default' or 'skin_alternate' or 'skin_blackwhite' or 'skin_progress' or 'skin_slider'
settings_scrollbar : 'on', - choose off to hide the scrollbar
settings_scrollbyhover : 'off', - choose on to require only the mouse hover for scrolling the content
settings_fadeoutonleave : 'off', - choose to fade out the scrollbar on mouse out
settings_replacewheelxwithy : 'off', - replace veritcal wheel scrolling with horizontal wheel scrolling on horizontal scrollbar setups
settings_refresh : 0, - recalculate the scorllbar content sizes every x ms
settings_autoheight : 'off', - choose to calculate the scroller content size from the first element of the inner / real-inner container
settings_forcesameheight : 'off', - choose to allow only horizontal scrolling
settings_fullwidth : 'off', - choose to on this if to reinit the scrollbar if you have the content at 100% of the window width and you want the scroller to reinit on resize
settings_dragmethod : 'drag', - normal / drag - choose scrollbar dragging method - drag is classic scorlling and normal is depending on the mouse position
settings_autoresizescrollbar : 'off', - autoresize the scrollbar size depending on the content / scroller area proportion
force_onlyy : 'off', - same as forcesameheight only for vertical scrolling

The Scroller Gallery

You should see the Scroller Gallery sidemenu on every post or page. It's very easy to add photos and reorder from the WP 3.5 Media Manager that will launch on the Add Media button preess.

then use this shortcode to display the gallery:

[scroller_gallery]

You can use custom parameters on it too to configure the scroller ( same options ) - there are some defaults one so you can start from here:

[scroller_gallery h="300" type="full-horizontal" settings_autoheight="on" settings_easing="on" settings_forcesameheight="on" settings_skin="skin_alternate"]

FAQ - top

You can check this link for a list of popular questions. Other questions you might have:

What's the difference between jQuery(document).ready and jQuery(window).load?

When you want to manipulate pictures - ie: you depend on their size - like a ken burns slider or scroller does, it's best to use jQuery(window).load because that executes the code in it AFTER all the images and content has loaded. For everything else, there is jQuery(document).read -which only waits for the html to be parsed corectly & all elements formed.

Is it iOS compatible ?

Yes, it has been built from the ground up and tested to work on the iPhone / iPad.

Developer Tips - top

The scroller provides source files too so if you are developer you can start cusmizing it. No support is offered for customizations.

Recommended Programs

You can generally use any text editing software to edit most content/code, but this is what I recommend:

• .zip – Normally you could just right click and extract to a folder of choice [ on both Mac and Windows ]
• .html - Notepad++
• .js - Notepad++
• .as - Notepad++
• .fla - Flash CS5
• .xml – Notepad++

Make your own skin

1. duplicate the skin_default css rules
2. rename it to your skin name
3. assing the skin to the scroller via the settings_skin parameter
4. be crazy, with a little css knowladge ,the possibilities are endless

Digital Zoom Studio

Go To Table of Contents