menu

Monday 6 October 2014


Fullscreen Image 3D Effect



<html lang="en">
<head>
<title>Fullscreen Image</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<style>
.fd-wrapper > img {
display: block;
margin: 0 auto;
}
</style>
</noscript>
<script id="pageTmpl" type="text/x-jquery-tmpl">
<div class="fd-box-wrapper">
<div class="fd-box fd-box-upper">
<div class="fd-front">
<div class="fd-image">
<a href="#" class="fd-option fd-option-fullscreen">Fullscreen</a>
<div class="fd-option fd-loading"></div>
</div>
<!-- any other content after this -->
                    <div class="header">
                        <a href="http://e-technology.co.in" target="_blank"><strong>Visit For Site</strong></a>
                        <span class="right">
                            <a href="https://dheerendraverma007.blogspot.in" target="_blank">Images by Dheerendra Verma</a>
                         
                        </span>
                        <div class="clr"></div>
                    </div>
                 
                </div>
<div class="fd-back"></div>
<div class="fd-right"></div>
<div class="fd-left"></div>
<div class="fd-top"></div>
<div class="fd-bottom">
<a href="#" class="fd-option fd-option-zoomout">Zoom out</a>
</div>
</div>
</div>
<div class="fd-box-wrapper">
<div class="fd-box fd-box-lower">
<div class="fd-front">
<div class="fd-image">
<h2 class="fd-title"></h2>
</div>
<!-- dot navigation -->
<ul class="fd-nav">
<li><a href="#"><span>Image 1</span></a></li>
<li><a href="#"><span>Image 2</span></a></li>
<li><a href="#"><span>Image 3</span></a></li>
</ul>
<!-- any other content after this -->
</div>
<div class="fd-back"></div>
<div class="fd-right"></div>
<div class="fd-left"></div>
<div class="fd-top"></div>
<div class="fd-bottom"></div>
</div>
</div>
</script>
<script type="text/javascript" src="js/modernizr.custom.40443.js"></script>
</head><body>
<div class="container">
  <div id="fd-wrapper" class="fd-wrapper"> <img src="images/medium/1.jpg" data-bgimg="images/large/1.jpg" alt="image01" title="Love Will Tear Us Apart" /> <img src="images/medium/2.jpg" data-bgimg="images/large/2.jpg" alt="image02" title="Just Can't Get Enough" /> <img src="images/medium/3.jpg" data-bgimg="images/large/3.jpg" alt="image03" title="In a Manner of Speaking" /> </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.slideshow.min.js"></script>
<script type="text/javascript">
            $(function() {

                $('#fd-wrapper').slideshow({
                    width : 600,
                    height : 396,
onLoad : function() {
if( !Modernizr.csstransforms3d )
$('#fd-message').show();
}
                });

            });
        </script>
</body>
</html>



    Download Source Code

Posted by at No comments:

loading_effect




<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loadind Effect</title>
<link rel="stylesheet" type="text/css" href="css/style.css"  />
<link rel="stylesheet" type="text/css" href="css/slider.css"  />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/smartMenu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//Menu
jQuery("#menu > li").smartMenu({
inSpeed: 600,
outSpeed: 300,
margin: 8,
easingFxIn: 'easeOutQuint',
easingFxOut: 'easeOutQuint'
});
});

</script>
<script type="text/javascript" src="scripts/queryLoader.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".btn-slide, .hide").click(function(){
jQuery("#panel").slideToggle("slow");
jQuery(this).toggleClass("active"); return true;
});
});
</script>
</head>
<body>



<!--top_wrapper end-->
<p class="slide"><a href="#" class="btn-slide"></a></p>


<script>
$(document).ready(function () {
    $("body").queryLoader2({
        barColor: "#000000",
        backgroundColor: "#FFFFFF",
        percentage:false,
        barHeight: 1,
        completeAnimation: "grow",
        minimumTime: 2000
    });
$('#loaderlogo').css({ width:'177px',  height:'69px', position:'absolute', 'margin-top':'-140px',  'margin-left':'-88px', top:'50%',  left:'50%', background:'url(images/krish_play.gif) no-repeat center'})
});
$('#mailcontdiv a').hover(function(){$(this).find('.hovspan').fadeIn(200)}, function(){$(this).find('.hovspan').fadeOut(200)
});
</script>
</body>
</html>


         Download Source Code
Posted by at No comments:

 jQuery Animations and Effects Video




                                           Hiding And Showing Elements

Posted by at No comments:

Accordian




<html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Accordion</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="css/core.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="css/accordion.core.css" type="text/css" charset="utf-8">
       
        </head>
        <body>
<div id="page">
          <h1> Accordion</h1>
          <h2>Example 1</h2>
          <p>This is the default accordion. Toggling is disabled, and the first
    item in the accordion automatically opens during accordion initialisation.</p>
          <ul id="example1" class="accordion">
    <li>
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
          <h2>Example 2</h2>
          <p>With toggling enabled, the user is able to close down all items.</p>
          <ul id="example2" class="accordion">
    <li>
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
          <h2>Example 3</h2>
          <p>By applying a class of "locked" (or whatever is specified in the
    parameter object that is passed to the accordion plug-in), the corresponding
    item is locked open. The rest of the accordion functions as expected
    around the locked item.</p>
          <ul id="example3" class="accordion">
    <li class="locked">
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1 (Locked open)</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
          <h2>Example 4</h2>
          <p>This example isn't an accordion at all, and behaves like a standard
    collapsible menu. It is possible to open more than one item.</p>
          <ul id="example4" class="accordion">
    <li>
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
        </div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script> 
<script type="text/javascript" src="js/jquery.accordion.2.0.js" charset="utf-8"></script> 
<script type="text/javascript">
            $('#example1, #example3').accordion();
            $('#example2').accordion({
                canToggle: true
            });
            $('#example4').accordion({
                canToggle: true,
                canOpenMultiple: true
            });
            $(".loading").removeClass("loading");
        </script> 
<a href="e-technology.co.in" title="">E-technology</a>
</body>
</html>


Posted by at No comments:
Subscribe to: Posts (Atom)