Icontem

File: index.html

Recommend this page to a friend!
  Classes of Nguru Mugendi  >  Brick Slider  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: the index html code
Class: Brick Slider
Animate page elements laid out as tiled bricks
Author: By
Last change: Changed sources to JQuery and JQuery Easing easing javascript files needed to the proper cdn links.
Date: 7 years ago
Size: 3,691 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="nguru" />

    <link type="text/css" rel="stylesheet" href="slider.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
    <script src="brickSlider.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function(){
            $("#slider").brickSlider({
                maxCols:3,
                linkSelector:'.link',
                margin:1,
                //openSpeed:0,
                //closeSpeed:0,
                //delayBeforeOpen:0,
                //centerSpeed:0,
                //scrollSpeed:0,
                //autoScroll:false,
                //controlButtons:false,
                autoHeight:true,
                //startOpened: true,
                //startIndex : 0,
                //currentItem: 2,
                
                onReady: function(){
                },
                onOpen: function(item,link,linkIndex){
                    link.addClass('active').find('.hidden').fadeIn(500);
                },
                onClickClose: function(item,link,linkIndex){
                    link.find('.hidden').clearQueue().stop().fadeOut(200);
                },
                onClose: function(item,link,linkIndex){
                    link.removeClass('active');
                }
            });
        });
    </script>
    
	<title>Sliders</title>
</head>

<body>

    <div id="slider">
       <div class="item" >
       
            <div class="link rounded" >
                <h2>Heading 1</h2>
                <p>This is my beautiful slider design</p>                
                <div class="hidden">
                    <img src="1.png" />
                </div>
            </div>
            <div class="link rounded" >
                <h2>Heading Two</h2>
                <p>This is my beautiful slider design</p>                
                <div class="hidden">
                    <img src="1.png" />
                </div>
            </div>
            <div class="link rounded" >
                <h2>Heading Three</h2>
                <p>This is my beautiful slider design</p>                
                <div class="hidden">
                    <img src="1.png" />
                </div>
            </div>
            <div class="link rounded" >
                <h2>Heading Four</h2>
                <p>This is my beautiful slider design</p>                
                <div class="hidden">
                    <img src="1.png" />
                </div>
            </div>
             <div class="link rounded" >
                <h2>Heading Five</h2>
                <p>This is my beautiful slider design</p>                
                <div class="hidden">
                    <img src="1.png" />
                </div>
            </div>
            <div class="link rounded" >
                <h2>Heading Six</h2>
                <p>This is my beautiful slider design</p>                
                <div class="hidden">
                    <img src="1.png" />
                </div>
            </div>

        </div>       
        
    </div>

</body>
</html>