New Features & Style

[shshaw]

I've needed this script for a few different projects and figured I should share my modifications. If I may be so bold, I've dubbed it v0.3.1.

Here are the features I've added:
- Added new Carousel style! Shows 5 items at a time in a looping carousel
- Added itemContainer, itemSelector, style, and start options for basic configuration
- Added enableKeyboard, enableMousewheel, and enableTouch options to enable/disable features
- Added enableNav and enableNavButtons options to insert controls into the container
- Added onItemSwitch callback
- Better Demos to showcase the new features

You can see the live demos here: http://brokensquare.com/Code/jquery-flipster/demo/

The script is still lightweight, but could probably be optimized a bit more. I've needed the Carousel style the most in my implementations, but you could easily cut the filesize down by taking it out if you don't think it's essential.

Feel free to modify how you see fit!

[shshaw]

I should note that IE8/9 have not been fully tested. IE10 works like a champ, though.

[drien]

Awesome, this is fantastic! Thanks for taking the time to put it all together, the demos look really great. I'm going to merge in your changes as soon as I get a moment to take a peek at the new code.

[shshaw]

Glad you like it! I have a few more features that I'm experimenting with and may be ready to commit soon.

• Option for number of items to show on the left & right (gives more code unity for carousel & coverflow views and better flexibility for implementing different themes)
• Option for item width for the side items to help compensate for different 3D rotations and scaling.
• Option for spacing between items
• Option for looping navigation

It may also be worthwhile to have a lite and full version. Lite being just coverflow with less options and no nav, keeping the script and styles lightweight for those only wanting the basic effect.

[drien]

Cool, I went ahead and merged these changes, thanks again! Drop me another pull request whenever you're ready with the changes you mentioned. I'm going to explore and think about the best way to maintain lite and full versions... I think that's a great idea, I just want to do it in a way that doesn't become a maintenance liability in the future.

[socialblogsite]

There's a typo on the visibility property, where sais "visiblity" (missing "i").

Also, if you made the default container ".gallery" and made that element the container by default (like ul.gallery) this gallery could be used for the default wordpress gallery.

Without those changes nobody could use it without messing with the current gallery html code.

That would this gallery used by millions!

but currently you are forcing there to be an un-named ul inside the container, while it could be created by jquery ( because I guess it's required)

Thanks.

[socialblogsite]

Should any of the variables inside this class (excuse my amateur lingo) conflict with other jquery functions?
I haven't had the time to debug it, but the minimized version works, and as soon as I swap the file by the commented version it just does nothing.
I placed an alert inside the function and it works so the file IS loaded, although not inside the main foreach that finds the targeted elements.

[shshaw]

Thanks for catching the typo, @socialblogsite! That's been corrected in my latest commit ( #6 ).

Re: Protected Variables/Functions
I'm not aware of any issues with protected variables or functions in Flipster. My demos all running the non-minified version of Flipster and aren't having any issues with jQuery 1.9.1. What version of jQuery are you testing with?

Re: Wordpress/Item Containers:
Having an itemContainer inside of the element flipster is called on makes the most sense semantically because we insert other content like the navigation in that main Container. The default Wordpress gallery is a div.gallery containing individual dl.gallery-item's for each image, which would require the default itemSelector to change as well.

We could make it so itemContainer and itemSelector are not set by default, and Flipster uses the element's children as the items. As long as everything is indexed and given classes before navigation elements are built, it would work. What do you think @drien?

In the mean time, to get it implemented in Wordpress, simply add a container around the gallery in the Text view of the WYSIWYG:

<div id='my-gallery' class='flipster'>[gallery ids="729,732,731,720"]</div>

And use these options when calling flipster:

$("#my-gallery").flipster({
    itemContainer: '.gallery',
    itemSelector: '.gallery-item'
});

Keep in mind that you may have issues with Wordpress Gallery's default column insertion ( <br style="clear: both" /> inserted every 3 items ), so you'll probably need to mess with the gallery html anyway :-)