Skip to content

Latest commit

 

History

History
112 lines (92 loc) · 7.52 KB

README.markdown

File metadata and controls

112 lines (92 loc) · 7.52 KB
Raw

AnythingSlider FX Builder Bookmarklet

Features (Demo)

  • Bookmarklet that can be run on any page containing an AnythingSlider
  • This builder allows you to add and test any of the available built-in effects (Fx) from the AnythingSlider Fx extension.
  • No coding knowledge is needed, although some knowledge of jQuery selectors would be extremely helpful.
  • Play a single fx or all of them with one button.
  • When done building the list of fx, click the fx code button that you can copy then paste directly into the slider fx initialization code.

Using the Builder

Bookmarklet

  • Start by dragging the AnythingSlider FX Builder link (on this page) into your browser bookmark bar.
  • Click on the bookmarklet when on a page containing one AnythingSlider - at this time, the builder will only work on the first AnythingSlider on the page.

Elements and Selectors

  • Choose an element from the drop down list, if you can't find the element you want, then choose "{none}" and add your custom selector in the next cell.
  • Add a custom jQuery selector in the "Custom Selector" cell. This can be used to target any element inside the slider or to limit or specify the element(s) from the first cell.
  • A selector must be included in either or both the first and second cells.
  • The custom selector cell is added to the element selector without any spaces, so if you want to target the first list item, choose "LI" from the element drop down, then enter ":first" or ":eq(0)" in the custom selector. But if you choose "UL" from the element list and enter "LI" in the custom selector, the result is "ULLI" so be sure to add a space in front of the LI, like this " LI".

FX

  • A selection in the FX cell is also required.

  • Choose from one or more of the FX listed in the dropdown (click inside the input to see it).

  • Choosing both left and right or top and bottom would result in the second fx in the list overriding the first. So combine fx that don't oppose each other, like top and left.

  • The listLR fx is intended to be used on multiple elements, like a list. The "LR" means that odd numbered elements will come in from the left and even numbered elements will come in from the right.

  • The listRL fx is the opposite of the listLR effect.

  • The expand fx is meant to be used on a panel that contains only one image. Try using it on an image that has text surrounding it and the image will expand to fill the panel.

  • To use any of the four caption fx, the following CSS needs to be included before they will work properly. The css is included with the bookmarklet, but the appropriate css will also need to be included in the final slider - modify the css in any way you wish:

    

    • 



/* captions /
/ set to position: relative here in case javascript is disabled, script sets captions to position: absolute /
.caption-top,
.caption-right,
.caption-bottom,
.caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: relative; z-index: 10; opacity: .8; filter: alpha(opacity=80); }
/ Top caption - padding is included in the width (480px here, 500px in the script), same for height /
.caption-top { left: 0; top: 0; width: 480px; height: 30px; }
/ Right caption - padding is included in the width (130px here, 150px in the script), same for height /
.caption-right { right: 0; bottom: 0; width: 130px; height: 180px;  }
/ Bottom caption  - padding is included in the width (480px here, 500px in the script), same for height /
.caption-bottom { left: 0; bottom: 0; width: 480px; height: 30px; }
/ Left caption - padding is included in the width (130px here, 150px in the script), same for height */
.caption-left { left: 0; bottom: 0; width: 130px; height: 180px;  }



* Please look at the required HTML needed to set up the captions as well on [this page](http://proloser.github.com/AnythingSlider/demos.html) at the bottom.

### Distance/Size
* Enter a distance you want the element to move.
* Or enter a change in size (like the expand fx) which is "10%" in the demo.
* This information is options, but by default the distance is set to the width and/or height of the first slide. The animation is usually fast enough that most of the time it doesn't matter how far it travels, but if you want the effect to be more specific then enter a value in number of pixels (px).
* When using the expand fx, the range is set to from whatever number you enter to "100%", so to work properly you must enter a number with a percent sign (%) after.
* To better understand how the FX extension works, the distance is how far from the starting point the animation effect moves. So the out effect (outFx) is this distance and the in effect (inFx) is the final position of the element (where the element is located when no Fx are applied).

### Time
* Enter the time in milliseconds (1000 milliseconds = 1 second) that the animation fx takes to complete
* This value is optional. If not set, the in Fx animation is 400 milliseconds (ms) and the out Fx is about 200 ms (half of the in Fx).

### Easing
* Choose from any of the easing functions from the drop down list.
* If you don't know what easing means, think of it as how the animation gets from point A to point B.
* Going straight from point A to point B is the "linear" setting.
* The easings are named by the math formula used: Expo uses exponential functions, Cubic uses cubed functions, Quad uses a quadratic formula, Circ uses a circular function. The rest are combinations of these.
* To see how they behave, check out [this demo](http://jquery-ui.googlecode.com/svn/trunk/demos/effect/easing.html) provided by the jQuery UI team.
* To include the easing formulas on your page, include either the easing plugin provided with AnythingSlider, or include jQuery UI which has them built in.

### Add, Test, Test All and Delete
* The "+ Add" button adds the current selections into the table below the input area along with a test and delete button.
* When the FX is added to the list, it can then me tested by pressing the test button in that row - it looks like a play button. If nothing happens or the slider goes to the first panel, then there might be a problem with the selector.
* If you need to delete that FX row, click the "X" button.
* To test all of the FX in the list, press the "> All" button, above the add button. This adds all of the Fx from the list of Fx you set up, then starts the slideshow.
* If you have multiple entries that effect the same element, the lowest one in the list is the one that is applied to the slider.

### List
* When you are done building your FX list, press the "<fx>" button and a window will popup containing the javascript code needed to add the fx to your slider.
* The output fx code will look something like this:

   ```javascript
.anythingSliderFx({
 ".panel3 img.expand" : [ "expand", "10%", "", "easeOutBounce" ]
});



    

  • 

    So if your AnythingSlider code looks something like this:
    

    

    • 



// AnythingSlider code
$('#slider').anythingSlider({
// add slider options here
});



* Remove the semi-colon ";" from the end and paste in the FX code:

    ```javascript
$('#slider').anythingSlider({
  // add slider options here
}).anythingSliderFx({
  ".panel3 img.expand" : [ "expand", "10%", "", "easeOutBounce" ]
});



Change Log


Version 1.0.1beta


    

  • Fixed an element selector bug.
    • 

  • Added a random element to the list on startup, as an example.
    • 



Version 1.0beta


    

  • Initial build
    •