Fork me on GitHub
Post Format

jQuery Image / Content Slider Plugin: Quake Slider

“A picture is worth a thousand words”, complex ideas and concepts are better understood when presented using some sort of visualization. For time conscious audience Graphs and Charts can tell much more in seconds than a lengthy text.

When animation is used with images they become much more powerful medium to convey the message and convince audience. In the web images and graphics are used to give life to websites, majority of the websites also use image sliders, content carousels and image galleries to attract the visitor.

This version of Quake Slider is no longer supported, check the latest version with lots of cool features here, click here


Using sliders is a very effective way to showcase your work, portfolio and anything for which you want attention of your visitors. Sliders are normally placed in places that are in line with user focus. E.g. header area which is the first area where user’s focus lands.
Sliders not only give just life to your website, they can also help increasing the time users stays on your website.

There was a time when most the sliders were built using Flash and these flash based sliders were heavy weight and require installation of an extra plugin, which sometimes become a disadvantage in restricted environments like corporate sector where active contents are disabled. Though same applies to javascript as well but javascript has an advantage that it is built in every browser, and doesn’t require installation. On the other hand javascript based sliders are very light weight on top of that they are mostly open source. You can do anything you like with them, thanks to javascript libraries that has revolutionized the client side development. Most wonderful and widely used of them is jQuery. If you are an experienced javascript developer and you have lot of time you can build your own jQuery based image slider.

But if you are the guy who likes to focus on real business and don’t want to re-invent the wheels. Quake image slider is perfect for you. Quake image slider is a jQuery based image slider with cool animations effects and some of them are very unique. Like SwirlFadeIn, SwirlFadeOut and more.

With Quake image slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. With Quake Image Slider you have complete control over not just the orientation of each caption also you can control animation for each caption and provide different animation for each of the slide using callbacks. To see quake image slider in action, check out these demos.

Quake Image Slider Configurations

  • frameWidth: Width of Slider, default value 990.
  • frameHeight: Height of Slider, default value 306.
  • animationSpeed: No of milliseconds animation takes to complete, default value 500.
  • pauseTime: Delay in milliseconds between each slide, default value 4000.
  • rows: Determine the size of slices, for greater values slices are smaller, default value 4.
  • cols: Determins the size of slices, for greater value slices are smaller, default value 12.
  • thumbnails: To display/hide thumbnails, default value true.
  • effects: List of effects to be applied, you can pass any no of effects from the available list e.g. ['swirlFadeIn','explode'].
  • nextText: Default text for next button, default value ‘Next.
  • prevText: Default text for previous button, default value ‘Prev’.
  • hasNextPrev: Toggles next/prev controls, default value true.
  • captionOpacity: Opacity for captions, default value 0.5.
  • captionOrientations: Caption placement, can be either ‘right’, ‘left’, ‘top’, ‘bottom’ or all, default value ‘right’.
  • captionAnimationSpeed: Animation speed for captions, default value 1000.
  • thumbnailsPath: Location for thumbnails e.g. ‘images/thumbs’. each thumbnail image name must correspond to related image.
  • captionsSetup: Configurations for captions to control every aspect of captions, default value null.

Available Effects

  • swirlFadeIn
  • swirlFadeOut
  • randomFade
  • linearPeal
  • linearPealReverse
  • diagonalFade
  • blind
  • barsUp
  • barsDown
  • blindFade
  • explode
  • explodeFancy
  • mixBars
  • mixBarsFancy
  • fade
  • blindFadeReverse
  • slideIn
  • slideInFancy
  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • fallingBlindFade
  • raisingBlindFade

Using Quake Image Slider

Using Quake Image Slider is pretty straight forward.

  • Add a reference to latest jQuery library
  • Add a reference to quake.slider-min.js
  • Add a reference to quake.slider.css

Now you need to create a div element where you want to place the slider. Within that div add two additional divs, one for your images and other for captions e.g.

 <div class="quake-slider">
    <div class="quake-slider-images"> </div>
    <div class="quake-slider-captions"></div>
 </div>

Now add your images in first div with the class “quake-slider-images” and captions in the second div with the class “quake-slider-captions”. If you want to attach links to your images wrap the images within anchor tag. Once your are done call the initializer function of Quake Image Slider. Here is a complete example.

<html>
<head>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/quake.slider.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/quake.slider-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.quake-slider').quake({ effects: ['swirlFadeIn', 'swirlFadeOut'],
                thumbnails: true,
                captionOpacity: '0.3'
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="quake-slider">
            <div class="quake-slider-images">
                <a target="_blank" href="http://www.egrappler.com/free-premium-website-template-clean-business/">
                    <img src="images/1.jpg" alt="Clean Business Free Business Website Premium Template" />
                </a><a target="_blank" href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/">
                    <img src="images/2.jpg" alt="Free Premium HTML Admin/Backend Template for Web Applications" /></a>
                <a target="_blank" href="http://www.egrappler.com/free-html-jquery-portfolio-template-mni-html-vcard/">
                    <img src="images/3.jpg" alt="Free HTML jQuery Portfolio Template" />
                </a><a target="_blank" href="http://www.egrappler.com/jquery-clean-and-simple-tooltips-gips/">
                    <img src="images/4.jpg" alt="jQuery Clean and Simple Tooltips Plugin" />
                </a>
            </div>
            <div class="quake-slider-captions quake-slider-caption-container">
                <div class="quake-slider-caption">
                    Clean Business, <span class='quake-highlight'><a target="_blank" href="http://www.egrappler.com/free-premium-website-template-clean-business/">
                        Premium HTML Template.</a></span> A Free Business Website
                    Template.</div>
                <div class="quake-slider-caption">
                    BlueWhale Admin, <span class='quake-highlight'><a target="_blank" href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/">Premium HTML Admin Template.</a></span>
                    Free Premium HTML Admin/Backend Template.</div>
            </div>
        </div>
    </div>
</body>
</html>

Customizing Captions

Quake Image Slider gives you complete control our captions, you can set the orientation, animation speed and even you can provide your own animation functions. To customize captions you need to pass custom structure to captionsSetup e.g.

 {
     "orientation": "bottom",
     "slides": [0, 1, 2],
     "callback": myCallback
 }

The above structure is an example of configuration for ‘bottom’ orientation, which applies to slide 1,2 and 3, you can put any valid slide index. And callback is the custom animation function, you can leave it to default if you don’t want to control the animation. If you do, the you need to create a function with the following signatures.

function myCallback(captionWrapper, captionContainer, orientation)
{
    //do animation here
}

Where captionWrapper is the div element that wraps captions, captionContainer is the div element that wraps caption text while orientation can be ‘left’, ‘right’, ‘bottom’ or ‘top’.

 <script type="text/javascript">
        $(document).ready(function () {
            $('.quake-slider').quake({ effects: ['swirlFadeIn', 'swirlFadeOut', 'swirlFadeIn', 'linearPealReverse', 'slideIn', 'swirlFadeIn', 'explodeFancy'],
                thumbnails: true,
                captionOpacity: '0.3',
                captionsSetup: [
                                 {
                                     "orientation": "bottom",
                                     "slides": [0, 1, 2],
                                     "callback": captionAnimateCallback
                                 },
                                  {
                                      "orientation": "top",
                                      "slides": [3, 4],
                                      "callback": captionAnimateCallback
                                  }
                                  ,
                                  {
                                      "orientation": "left",
                                      "slides": [5, 6],
                                      "callback": captionAnimationCallback1
                                  }
                                  ,
                                  {
                                      "orientation": "right",
                                      "slides": [7, 8],
                                      "callback": captionAnimationCallback1
                                  }
                                ]

            });

            function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
                captionWrapper.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);
                captionContainer.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);
            }
            function captionAnimationCallback1(captionWrapper, captionContainer, orientation) {
                captionWrapper.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);
                captionContainer.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);
            }

        });
    </script>

No related posts.

27 comments

  1. Pingback: 40+ Free and Fresh jQuery Plugins and Tutorials

  2. Pingback: » 40+ Free and Fresh jQuery Plugins and Tutorials - Afghan Graffiti | Resource

  3. Pingback: jQuery Based Image Slider with Cool Animations Effects : Quake

  4. Pingback: Your Best Questions About Jquery Slider | Top Apprentice Blog

  5. Pingback: jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider - Clean Business

  6. Pingback: Tweet Heat – The hottest Tweets of the Month [May 2012] | Web design blog

  7. Pingback: 45 New jQuery Plugins for Web Developers | Splashnology

  8. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler » Web Design

  9. Pingback: jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider | TEKNQ

  10. Pingback: Tweet Heat – The hottest Tweets of the Month [May 2012] | Web Dezining

  11. Pingback: Tweet Heat - The hottest Tweets of the Month [May 2012] | Inspired Magazine

  12. Pingback: jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider | EGrappler

  13. Pingback: [Guida] jQuery Slideshow Plugin – Quake | Fedeweb

  14. Pingback: jQuery Content Image Slider with Pretty Animations Effects | Blogupstairs

  15. Pingback: Quake Slider – jQuery image/content slider plugin - CodeVisually

  16. Pingback: Your Best Questions About Jquery Slider | Top Apprentice Blog

  17. Could you please show me where to modify the css and the js to make the slider display images 1000 px x 400 px.

    Terry

    Reply
  18. Thanks for sharing such great effects with complete documentation. Please keep us posted when WordPress, Joomla, Drupal versions of the image-sliders are released.

    Much appreciated.
    Tahir

    Reply
  19. Pingback: Very cool jQuery Image / Content Slider Plugin: Quake Slider - DeluxeXtreme.com

  20. Pingback: jQuery Image / Content Slider With Many Transition Effects: Quake Slider | Greepit

  21. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | TEKNQ

  22. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler - Web 2.0 BLOG | Web 2.0 BLOG

Leave a Reply

Required fields are marked *.


2 − two =