article:
Elements Design: 2500 free iPhone web icons
article:
Website: Pix - website template

JS Plugin: jqTiles - slideshow

Advertisement

"With jq-tiles you can create many interesting slide transitions in your slideshow. It is a jQuery plugin that leverages the power of CSS3 and comes with a lot of options."


Implementation

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.tiles.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css"/>
<link rel="stylesheet" href="css/jquery.tiles.min.css"/>

<html>

<div class="slider-wrap">
    <div class="slider">
        <img src="[image 1]"/><p>[info 1]</p>
        <img src="[image 2]"/><p>[info 2]</p>
        <img src="[image 3]"/><p>[info 3]</p>
        ...
    </div>
</div>


Option javascript

{
  x              : 4, // # of tiles in x axis, 20 max
  y              : 4, // # of tiles in y axis, 20 max
  effect         : 'default',
  fade           : false, // fade images in addition to the tiles effect
  random         : false, // animate tiles in random order
  reverse        : false, // start animation from opposite direction
  backReverse    : false, // reverse the animation when going back in the slideshow (useful for some effects)
  rewind         : false, // reverse animation at a certain percentage in time
  auto           : false, // Start the slideshow on load
  loop           : false, // Start slideshow again when it finishes
  slideSpeed     : 3500, // time between slides
  tileSpeed      : 800, // time to clear all tiles
  cssSpeed       : 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
  nav            : true, // Add navigation
  navWrap        : null, // Add the navigation to an existing element
  bullets        : true, // Show bullets, if false the show pagination with numbers
  thumbs         : true, // Show thumbnails when hovering nav
  thumbSize      : 25, // Thumbnail size (percentage of the original image)
  timer          : true // show or hide the timer bar
  beforeChange   : function() {}, // Runs before changing the image
  afterChange    : function() {} // Runs after the tiles have cleared
  onSlideshowEnd : function() {} // Runs when the slideshow finishes ( "loop" must be set to false )
}



Screenshot

Plugin: jqTiles - slideshow



source
demo
download

Advertisement
Tags: slideshow, plugin, jquery, design, develop, layout, website, web

Leave a Comment

No Comment

© Creative3x Ltd.