Fork me on GitHub
Post Format

jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider

This is an updated version of our previously released jQuery Image / Content Slider Plugin, with support for CSS themes and 40+ new cool transition effects.

jQuery Image Slider Plugin with Cool Transition Effects

3 beautiful CSS themes have been added. To chose a particular theme, add reference to the theme file in the HTML. Quake Slider currently have following themes:

  • Plain
  • Dark Room
  • Violet

Copy the dark-room skin folder into your website. Add a reference to dark-room.css file in your page e.g.

<link href="skins/dark-room/quake.skin.css" rel="stylesheet" type="text/css" />

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 and set the height and width in the CSS, in our case we have set the width and height in quake-slider class. 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" />
    <link href="skins/dark-room/quake.skin.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="javascript:/">
                    <img src="images/1.jpg" alt="" />
                </a><a target="_blank" href="javascript:/">
                    <img src="images/2.jpg" alt="" /></a>
                <a target="_blank" href="javascript:/">
                    <img src="images/3.jpg" alt="" />
                </a><a target="_blank" href="javascript:/">
                    <img src="images/4.jpg" alt="" />
                </a>
            </div>
            <div class="quake-slider-captions quake-slider-caption-container">
                <div class="quake-slider-caption">
                   This is an example caption.</div>
                <div class="quake-slider-caption">
                     This is an example caption.</div>
            </div>
        </div>
    </div>
</body>
</html>

Slider Configurations

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


Here is the list of available effects.

swirlFadeOutRotate ,
swirlFadeOutRotateFancy, swirlFadeIn, swirlFadeOut, slabs, spiral, spiralReverse, diagonalShow, diagonalShowReverse, spiralDimension , spiralReverseDimension , boxFadeIn , boxFadeOutOriginal ,
boxFadeOutOriginalRotate , diagonalFade , diagonalFadeReverse , randomFade , randomDimensions ,
boxes , explode , explodeFancy , linearPeal , linearPealReverse , linearPealDimensions ,
linearPealReverseDimensions , blind , blindHorizontal , barsUp , barsDown , barsDownReverse , blindFade , fallingBlindFade , raisingBlindFade , mixBars , mixBarsFancy ,
fade , blindFadeReverse , slideIn , slideInFancy , slideInReverse , chop , chopDimensions , chopDiagonal , chopDiagonalReverse , slideLeft , slideRight , slideUp , slideDown

Quake Image Slider also gives you a chance to customize animation effects for the captions. You can configure caption animation and orientation on per slide basis.

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.

40 comments

  1. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler

  2. Pingback: jQuery Image and Slider Plugins | csharpcodedeveloper

  3. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012

  4. Pingback: Thursday Roundup # 18 | EGrappler

  5. Pingback: 32 jQuery Image and Slider Plugins | Web Help 101

  6. Pingback: Awesome jQuery Image and Slider Plugins from 2012 | prosoxi.com

  7. Pingback: WordPress Image Slider Plugin With Cool Transition Effects: Quake Slider | TEKNQ

  8. Pingback: WordPress Image Slider Plugin With Cool Transition Effects: Quake Slider | EGrappler

  9. Pingback: Awesome jQuery Image and Slider Plugins from 2012 « C++

  10. Pingback: Free Business Portfolio WordPress Theme: CleanBusiness | EGrappler

  11. Pingback: 30 jQuery Plugins y Sliders de Imágenes para Diseño Web | Blog Diseño Web

  12. Pingback: Slider-e pentru WordPress (şi nu numai) | CNet.ro

  13. On Image change link are not changing unless you move oyour mouse outside image and then inside again?

    Reply
  14. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | websitedesigntools

  15. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012

  16. Pingback: 20 Beautiful jQuery Image Sliders | DJDESIGNERLAB

  17. Pingback: Top of your Mind » » 20 Galerias de Imagens jQuery para 2012

  18. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | :::: Namanda ::::

  19. Hello, First of all thanks for this great plugin, its great help.

    Question: How to implement stop and play animation feature.?

    Thanks Again waiting for your reply

    Reply
  20. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | WebFree.ro

  21. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | Scattered Monkey

  22. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | Developer Junk

  23. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 - Jobbook News

  24. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | WebScriptPlus.com

  25. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | MNM Tutorials

  26. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | Wordpress Themes

  27. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 - Design Graphics » Design Graphics

  28. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | Indoor Digital Billboards

  29. Pingback: 30+ Awesome jQuery Image and Slider Plugins from 2012 | Web Dezining

  30. Pingback: 12 Fantastic & New jQuery Plugins « The Creative Project

  31. Pingback: jQuery Image Slider Plugin with Cool Transition Effects: Quake … - Web 2.0 BLOG | Web 2.0 BLOG

Leave a Reply

Required fields are marked *.


+ seven = 10