mobile tray/stationary window status configuration

This configuration creates a stationary window and a mobile tray. You can position the window element wherever you like, and the tray will follow suit. One caveat of this configuration is that it will ignore any status_color_outside parameter. Because of the nature of HTML's hierarchy, there's no way to position a child element under a parent element (if you know of a way, I'd love to hear it). The next best workaround was to make both elements the same color, and give the tray about 50% opacity. This way, you can see through that higher-positioned tray element to the window element that's holding it. In practice, it looks like the window element still has a higher position than the tray, but it's just an optical illusion.

static tray/mobile window status configuration

This configuration creates a static tray with a mobile window. As with the above configuration, you can move the tray anywhere you wish, and the window will follow suit. This configuration will utilize both color parameters if you use them.

parameters

Above, you'll see another version of the Javascript instantiation function for simpleSlide. This one includes set_speed, status_width, status_color_outside, status_color_inside and callback to pass through to the plugin to tell it what to do with your windows. Currently, simpleSlide only allows one configuration type for all of your slideshows. It was deemed the best balance of simplicity and customizeability. That said, here's exactly what those parameters do.

set_speed: This parameter is to be passed as an integer (notice the lack of quotation marks around it). It will tell simpleSlide, in milliseconds, how long you want each animation to take to complete. All animations are uniform. It does not matter how far through the slideshow you're jumping, it will always take exactly the same amount of time. If you press the left button on the very left frame (which jumps you to the very right frame), then it will take the same amount of time as it would if you were simple jumping to the next frame. integer, default value: 500

status_width: This parameter sets the default width, in pixels, of the window portion of your status display, should you decide to utilize it. The tray portion of your status display is based on this number as well, insofar as its width being a product of the number of slides and the width you set in this parameter. As a matter of fact, your status display's height is also based on this number, as the height is derived from an equation that figures out the proportional size of the status bar, for a more accurate status.integer, default value: 20

status_color_outside: This string parameter tells simpleSlide what color you want the status tray to be when it is created. If you opt to create a moving tray with stationary window, this input will be ignored. Please read more information about this in the status_color_inside explanation.string, default value: '#ccc'

status_color_inside: This string parameter tells simpleSlide what color you want the status window element to be when it is created. Since you have the option of creating either an animated tray or an animated window element depending on how you set them in the markup, and since in any situation where the tray was nested in the window element would mean the window element would be blocked by the tray (if it was a solid color), if you choose to have a dynamic tray with stationary window, the tray element will instead adopt the inside_color and be about half as opaque. It's a visual trick that allows you to see through the so-called "top" element through to the bottom one.string, default value: '#ccc'

fullscreen: When set to 'true', this parameter will automatically resize your images (through HTML code) to fill the screen. It will also recenter either horizontally or vertically depending on which edge it aligns itself to. For obvious reasons, this implementation will fail if there is more than one slide window on the page. Click here to see an example of this functionality. string, default value: 'false'

swipe: When set to 'true', this parameter gives all windows the ability to be controlled by swiping with a touch internet device, like the iPhone, iPod or iPad (untested with Android, looking for feedback). Click here to see an example of this functionality, or try it out on any of the website's slide windows.string, default value: 'false'

callback: This parameter can house a function that will be called at the end of the plugin's instantiation. This is found to be important in cases where, say, another plugin (like a lightbox) that utilizes elements that are being processed by this plugin should wait until it is complete.function, default value: none

'right-/left-button' element

A primary navigation element is the next (right) and previous (left) buttons. In order to give your users next/prev navigation through the slideshow, you'll have to establish elements with the right-button and the left-button classes. Also give these buttons matching rel grouping to the slideshow for which you would like to allow them control. The simpleSlide script will automatically establish any buttons with this class as clickable, so try to reserve the namespace for simpleSlide elements only.

'jump-to' element

We've also integrated a paging system. This element can be placed anywhere you like. Consider the code above: If you have a slideshow that you've given the name group and you want to make that slideshow jump to page 2, you're going to create that HTML line. Giving it the jump-to class automatically makes it clickable in simpleSlide's eyes, the rel tells it what window to command, and the the alt attribute sets the page to which you want to jump.