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>

View Demo

Download Source

EGrappler

Development Resources for Entrepreneurs

jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider

Using Quake Image Slider

Slider Configurations

Customizing Captions

Related Posts

38 comments

Leave a Reply Cancel reply

Premium WordPress/HTML Themes