Circle jQuery Gallery

User Rating: / 0
PoorBest 

Hi, in the next time i will present you a very special gallery. Is a circle with image in the center and you have the buttons in the border of the circle, is a very cool concept, try it ;) !

In html page, in the head section create the link with jquery plugin, css, some fix bug for ie and a litlle script:

<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

    <!--[if lte IE 6]>
        <style type="text/css">
        /* Internet Explorer 6 PNG transparency fix */
        #rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); }
        #rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); }
        </style>
    <![endif]-->
   
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinycircleslider.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
        });
    </script>    

In the body section copy the code:

    <div id="rotatescroll">
        <div class="viewport">
            <ul class="overview">
                <li><a href="#"><img src="images/hdr3.jpg" /></a></li>
                <li><a href="#"><img src="images/hdr2.jpg" /></a></li>
                <li><a href="#"><img src="images/hdr1.jpg" /></a></li>
                <li><a href="#"><img src="images/hdr4.jpg" /></a></li>
                <li><a href="#"><img src="images/hdr5.jpg" /></a></li>                                                           
            </ul>
        </div>
       
        <div class="dot"></div>
        <div class="overlay"></div>
        <div class="thumb"></div>
  </div>

Now, create e css file and copy-paste the code:

img { border: 0; }

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(../images/bg-rotatescroll.png) no-repeat 0 0;  position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(../images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }
#rotatescroll .dot { background:url(../images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
 

The last step is to download the css and the jQuery plugin, that was all, bye!

This script has been developed by http://baijs.nl !