Tampilkan postingan dengan label smooth. Tampilkan semua postingan
Tampilkan postingan dengan label smooth. Tampilkan semua postingan

Rabu, 04 Desember 2013

Animated jQuery Bubble Scroll (Navigation)

jQuery Bubble Scroll is an easy-to-integrate navigation asset that you can use on your website to display any kind of usefull informations.

You can customize it a lot with some parameters to integrate it well in your website.

There are two types of layout (square or circle) and you can put it to the left or to the right of the screen. You can check all of the available options on the demo page.

ImageZoom - Responsive jQuery Image Zoom Plugin (Images and Media)

Overview


ImageZoom is a jQuery plugin for image zoom effect. It has thrid mode of image zoom effect : inner mode,standard mode and follow mode. It is easy to use, you can just use single image or set a large image. When you set a large image you view see it‘s 410 faster than other to show zoom view (witch use image load event to get the large image width/height ). You can try the the imgfast demo in the live demo page to see it. And ImageZoom is ready to use with an carousel. It has a lot of options and method witch let make what just need. Enjoy it :)


Features



  • Responsive! You can use it in you responsive layout.

  • Three zoom mode include. Inner zoom,standard zoom,follow zoom

  • Get large width/height 410 faster than imageload event.

  • Use resized thumb image for zoom view when the large image is loading.

  • Smooth move. Zoom view move smooth.

  • Customizable by CSS and  options.

  • Flexible options.

  • Easy to control the zoom object with many method.

  • Option for preload image or not.

  • ImageZoom with elastislide ready.(An custom skin include)  Also responsive.

  • Cross browser

  • Event callback for begin and end zoom.

  • Easy to custom the style.

  • Many demo and documention include.


Options



  • type:The image zoom mode.(inner,standard,follow) Default:inner

  • bigImageSrc:If Call image zoom on the thumb image and want to zoom with large image set this option. Default:null

  • smoothMove:Is the zoomviewer’s image move smooth. (true/false) Default:true

  • preload:Is ImageZoom preload the large image. Default:true

  • zoomSize:The ZoomView Size for standard mode and follow mode. Default:[100,100]

  • offset:Set the offset of the zoomviewer for standard mode. Default:[10,0]

  • position:Set left/right to show the zoomviewer. Default:right

  • alignTo:Set the id of the zoomviewer align to (Standard Mode). Default:null (alignTo the riginal image)

  • descriptionClass:The coustom description css class. Default:null

  • showDescription:Is zoomimage auto show the image description. Default:true

  • zoomViewerClass:The coustom class of the zoom viewer for follow mode and standard mode. Default:null

  • zoomHandlerClass:The coustom class of the zoom handler area for standard mode. Default:null       string

  • onShow:Event when zoom begin. Default:null

  • onHide:Event when zoom end. Default:null


ImageZoom Object



  • obj.$viewer   (jQuery element object)       The large image show view area.

  • obj.$handlerArea    (jQuery element object)       The handler view show on thumb image when use standard mode.

  • obj.$el    (jQuery element object)       The image the you have called ImageZoom on it.

  • obj.$largeImg    (jQuery element object)       The large image that show on zoom viewer.   


Methods



  • destroy() : Destroy imagezoom.

  • changeImage(string,string) : Change the img tag original image src and large image.

  • changeZoomSize(number,number) : Change the ZoomViewer Size (width,height).



Other Image Effects Plugins


HoverEx – jQuery image hover animation plugin



Picanim – jQuery image hover effect pulgin



Zoome – jQuery Image Zoom Effect Plugin



Flag Counter

Animated jQuery Bubble Scroll (Navigation)

jQuery Bubble Scroll is an easy-to-integrate navigation asset that you can use on your website to display any kind of usefull informations.

You can customize it a lot with some parameters to integrate it well in your website.

There are two types of layout (square or circle) and you can put it to the left or to the right of the screen. You can check all of the available options on the demo page.