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

No comments:

Post a Comment