Friday, 19 September 2014

3D Rotating Image Gallery & Retrive Image From Folder

Here i will explain how to Create a 3D rotated image gallery which fetch pictures from the folder and display in the web page. By using the Jquery And  CSS we can retrieve the images from the containing folder and add to the image gallery.







<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
      <script type="text/javascript" src="js/roundabout.js"></script>
  <script type="text/javascript" src="js/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/gallery_init.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>

</head>

<body>

 <!-- #gallery -->
  <section id="gallery">
      <div class="container">
      <ul id="myRoundabout">
            <li><img src="images/slide3.jpg" alt=""></li>
        <li><img src="images/slide2.jpg" alt=""></li>
        <li><img src="images/slide5.jpg" alt=""></li>
        <li><img src="images/slide1.jpg" alt=""></li>
        <li><img src="images/slide4.jpg" alt=""></li>
      </ul>
      </div>
  </section>
  <!-- /#gallery -->
</body>
</html>
Downoad code

0 comments::

Post a Comment

Copyright © DotNet-Ashok