Boutique

Purchase
At CodeCanyon Live preview

Boutique is a unique jQuery carousel to present your images with perspective and smooth interactions.

Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose.

Note that full documentation, instructions, examples and documented, commented source code are included in the download package.

Features:

  • Unlimited scrolling
  • Unlimited number of images
  • Customizable
  • 14 Example styles/usages out of the box
  • Fluid width (suitable for responsive layouts)
  • Optional headers
  • Optional description text
  • Optional hyperlink
  • Optional autoplay (paused on mouse-over)
  • Keyboard support
  • Lightbox support
  • Right-to-left language support
  • Multiple instances per page
  • Uninterrupted navigation (try quickly tapping the arrow keys on your keyboard)
  • Advanced: External functions
  • Advanced: Callback functions
  • Contains fully commented source code
  • Contains documentation/help file
  • Contains example cases to get you started

Plugin options:

  • Carousel width
  • Image dimensions
  • 3 or 5 visible frames
  • Styling of the frames, text area, headers and descriptions
  • Movement speeds
  • Easing types
  • Starting item
  • Vertical alignments
  • Enable/disable navigation while animating
  • Enable/disable autoplay
  • Enable/disable keyboard functionality
  • Autoplay interval
  • Title/description only visible in front
  • Navigate by clicking or mouse-over
  • Opacity / size of background frames
    And more

Changelog

v1.5.4 (august 2015):

  • Added support for Velocity.js. If you have velocity included in your project, Boutique will now automatically make use of it.

v1.5.3 (august 2014):

  • Fixed keyboard navigation errors after removing Boutique from the page
  • Updated the Fancybox example file showcasing gallery support
  • Removed "lightbox_support" option. See the example files for the recommended way to trigger a lightbox
  • Fixed several occasions where image dimensions could get distorted
  • Added a Touch/Swipe event example

v1.5.2 (july 2013):

  • Fixed a bug where Boutique was not responsive with "frames" set to 3
  • Cleaned up CSS and style customization
  • Updated Fancybox example to match newer versions of that plugin
  • You can now supply your own tags instead of just the image's alt-attribute for header text. Example:
    <h2 class="boutique-frame-title">Frame title</h2>
  • Similarly, you can now supply your own tags for the description text (previously had to be a span), as long as you give it the boutique-frame-text class. Example:
    <p class="boutique-frame-text">Frame description</p>
  • The link_callback function now prevents default link behavior unless it returns true
  • Slight performance improvements

v1.5.1 (2012/10/08):

  • Optimized for jQuery 1.8+ (deprecated 'hover' event, deprecated $.browser method)
  • Fixed minor hover positioning bug introduced in v1.5
  • Added right-to-left language support (new plugin option "right_to_left")
  • Included right-to-left language example page
  • Included arrow buttons example page
  • Included navigation bullets example page
  • .boutique() now returns the jquery object, so you can continue chaining
  • Improved the text_front_only option in IE
  • Fixed several other IE issues (mostly related to using variable image heights)
  • Changed option "front_img_height" default to 'auto'
  • Changed option "container_width" default to 'auto' (fluid width)
  • The frame top-margins moved from CSS to plugin options "front_topmargin", "behind_topmargin", "back_topmargin"
  • Slight performance improvements
    Note: The required jQuery version has been bumped to 1.6.1+
    Note 2: When upgrading, you should check if the vertical aligning is still ok, or (re)set it with the new options "front_topmargin", "behind_topmargin", "back_topmargin"

v1.5 (2012/05/28):

  • New plugin option: frames (number of visible frames (3 or 5)).
  • New plugin option: variable_container_height (If your images have different heights, this will make the container height adapt to the visible frames).
  • Plugin option "front_img_height" can now have the value 'auto', to deal with images of different dimension ratios. The width will still be a shared value.
  • New included example: Mixed image ratios.
  • Removed the redundant plugin option "hoverspeed". The hover animation speed is now always "speed" devided by 4 (it will still work if you have already set a manual hoverspeed).
  • Changed some plugin option names to be more logical/readable, such as "back_opac" to "back_opacity" (old names will still work).
  • Removed the (previously hidden) span and h6 tags on frames with no titles/descriptions.
  • Slight performance improvements.

v1.4 (2012/01/08):

  • New plugin option: lightbox_support
  • New plugin option: stop_autoplay_on_click
  • New external function: boutique_stopautoplay() to trigger autoplay
  • New external function: boutique_startautoplay() to trigger autoplay
  • New external function: boutique_goto(frame-number) to jump to a specific frame number (it will automatically pick the shortest route)
  • New callback function: pre_move_callback(anchor, instance-id) that's triggered when a movement starts
  • Better/easier fancybox (and probably other lightboxes) compatibility (example included) and now supporting fancybox galleries too
  • Bug fix: frame-link-clicking-not-reacting bug, created in version 1.33
  • Added more example cases that you can learn from / copy/paste from:
    • Basic example
    • Simulating 3 frames
    • Using Boutique with Fancybox
    • Responsive / fluid layout (dynamic 100% width)
    • Callback functions
    • External functions
    • Straight line
    • Content div
  • Default easing types are now included in the plugin. You can still use the external easing plugin if you are especially picky on your easing or want to add some special effects
  • Improved support for future jQuery versions
  • CSS flexibility improvements
  • Performance tweaks

v1.33 (2011/09/10):

  • Fixed a compatibility issue with jquery 1.6+ (header text became "undefined" when left empty)
  • Moved some CSS to plugin settings to have a clearer seperation of settings/styling
  • Nicer default easing types
  • 100% width now takes the parent element's width (not always the body width)
  • Basic setup example included
  • Fancybox example included
    Note when upgrading: The names of some of the plugin options have changed.

v1.32 (2011/05/12):

  • Fixed bug introduced in v1.31 (links of distant frames firing on click)
  • Added behind_distance as plugin option (option to manually set the horizontal distance of frame 2 and 4)
  • Minor usability tweak (images are now undraggable (in supporting browsers))

v1.31 (2011/05/03):

  • jQuery version compatibility fix: zooming the center frame on mouseover (now works with 1.4.1+)
  • jQuery version compatibility fix: frame border animation (now works with 1.3.0+)
  • All frames now have the simple classnames: frame1 - frame5 (so you can easily target them by CSS or javascript) (center frame = .frame3)
  • Minor performance tweaks

v1.3 (2011/04/22):

  • Plugin option container_width can now be '100%' (full page width). The width will adapt when resizing the browser
  • Added move_on_hover (navigate with mouse-over instead of click) as plugin option. Depending on your setup, this will work better if you set freescroll to false
  • Minor performance tweaks

v1.2.1 (2011/01/18):

  • Added keyboard (enable/disable keyboard functionality) as plugin option

v1.2 (2010/10/18):

  • Added container_width as plugin option
  • Added front_img_width as plugin option
  • Added front_img_height as plugin option
  • Added text_opacity as plugin option
  • Added text_front_only as plugin option
  • Added external functions (previous / next) (see example page 2) to use for buttons
  • Added a callback function: link click (see example page 2) to use for any other action than following a URL link
  • Added a callback function: frame moved forward (see example page 2)
Note: all previous settings / CSS will still work in the new version so you can update safely.

Implementation

Note that full documentation, instructions, examples and documented (full of comments) source code are included in the download package.

Example markup:

<ul id="boutique">
	<!-- Frame with minimal setup: -->
	<li><img src="images/image.jpg" width="300" height="200"></li>

	<!-- Frame with full setup:-->
	<li>
		<a href="Optional link">
			<img src="images/image1.jpg" width="300" height="200" alt="Optional header">
			<span>Optional description.</span>
		</a>
	</li>
</ul>
More detailed documentation is included, along with the commented source files.

Credits

Example images feature Princess Lea.
Easing equations based on Robert Penner's and the jQuery easing plugin.

Support

Difficulty with implementing:

  1. Check out the instructions page (included in the package)
  2. Check out the example pages and their HTML source code to see how it's done (included in the package)

Can not get it/something to work:

  • Do the example pages work in your situation? That means something went wrong in your custom implementation. Try comparing them or starting out by modifying one of the sample pages step by step.
  • Look for your issue in the Boutique FAQ
  • Look for your issue on the Boutique comments page
  • Post a comment with your question / request
  • Email the author directly at please@frique.me
Purchase
At CodeCanyon Live preview

Have you seen these?

Cart Insights for WooCommerce

$10

Scheduled Sale Manager for WooCommerce

$19

Admin Column Manager for WooCommerce

$10
Products Blog Support
Frique on Twitter Frique on the Envato Marketplaces Contact options

FRIQUE

Striving for originality, usability, simplicity and style — Frique builds jQuery and WordPress plugins and themes that make life a little easier. Frique cares and writes about web and software usability, performance, development workflow and desire for perfection.