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>
No comments:
Post a Comment