Easy JQuery Circular Gallery Using RadMenu Plugin

June 24th, 2011 by aditia rahman / 6 Comments  

     

Today post, let’s playing a little code with JQuery and JQuery RadMenu Plugin, cause lately I’ve been thinking about creating circular image gallery my self, and my search stop here for a moment when finding this cool plugins.
JQuery Circle Gallery

This plugin is really cool you can creating a circle from many html element that you defined, which means you don’t have to create a formula to set all the element position to create a circle form.

Plugin: RadMenu

All Code
<!DOCTYPE html>
<html>
<head>
    <title>JQuery Circle Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jQuery.radmenu.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {

        var posc = $("#radial_container").position();
        var left = $(window).width() / 2;

        if ($.browser.opera) {
            $("#big").css({"left": left - 122, "top": posc.top - 13});
        } else {
            $("#big").css({"left": left - 122, "top": posc.top + 3});
        }

        jQuery("#radial_container").radmenu({
            listClass: 'list',
            itemClass: 'item',
            radius: 220,
            animSpeed:800,
            centerX: 0,
            centerY: 150,
            selectEvent: "click",
            onSelect: function($selected) {
                var imgindex = $selected.index() + 1;
                $(".my_class").removeClass("selected");
                $(".img"+imgindex).addClass("selected");
                $("#big").css("background-image", "url('images/"+imgindex+".jpg')");
            },
            angleOffset: 0
        });

        jQuery("#radial_container").radmenu("show");
    });
    </script>
    <style>
    body{
        background: #f3f3f3;
    }
    #radial_container {
        position:relative;
        margin: 0 auto;
        top: 80px;
        height: 20px;
        width: 20px;
    }
    .radial_div_item {
    }
    .radial_div_item.active {
        z-index: 100;
    }
    .my_class {
        cursor: pointer;
        height: 75px;
        width: 75px;
        border: 5px solid #333;
        -moz-border-radius: 45px;
        -webkit-border-radius: 45px;
        border-radius: 45px;
        -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
        -moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
        box-shadow: 1px 1px 10px rgba(0,0,0,.5);
        position: relative;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        font-family: "Arial";
    }
    .my_class:hover {
        border-color: #0066cc;
    }
    .my_class:active {
        -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
        -moz-box-shadow: 1px 5px 1px rgba(0,0,0,.5);
        box-shadow: 1px 1px 5px rgba(0,0,0,.5);
        top: 2px;
        border-color: #e3e3e3;
    }
    .img1 { background-image: url("images/thumbs/1.jpg"); }
    .img2 { background-image: url("images/thumbs/2.jpg"); }
    .img3 { background-image: url("images/thumbs/3.jpg"); }
    .img4 { background-image: url("images/thumbs/4.jpg"); }
    .img5 { background-image: url("images/thumbs/5.jpg"); }
    .img6 { background-image: url("images/thumbs/6.jpg"); }
    .img7 { background-image: url("images/thumbs/7.jpg"); }
    .img8 { background-image: url("images/thumbs/8.jpg"); }
    .img9 { background-image: url("images/thumbs/9.jpg"); }
    .img10 { background-image: url("images/thumbs/10.jpg"); }
    .selected {
        border-color: #0066cc;
    }

    #big {
        position: relative;
        border: 5px solid #0066cc;
        width: 300px;
        height: 300px;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        border-radius: 200px;
        -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
        -moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
        box-shadow: 1px 1px 10px rgba(0,0,0,.5);
    }

    </style>
</head>
<body>
<div id="radial_container">
    <ul class="list">
        <li class="item"><div class="my_class img1"></div></li>
        <li class="item"><div class="my_class img2"></div></li>
        <li class="item"><div class="my_class img3"></div></li>
        <li class="item"><div class="my_class img4"></div></li>
        <li class="item"><div class="my_class img5"></div></li>
        <li class="item"><div class="my_class img6"></div></li>
        <li class="item"><div class="my_class img7"></div></li>
        <li class="item"><div class="my_class img8"></div></li>
        <li class="item"><div class="my_class img9"></div></li>
        <li class="item"><div class="my_class img10"></div></li>
    </ul>
</div>

<div id="big"></div>

</body>
</html>

This example only follow the original example at the plugin page, with a little style modification and added selected image on the center of the circle, just take some attention to css position for this. If you want more advance tutorial you can read addyosmani jquery roudrr blog post, he explain step by step how to create a circle form from a set of images.

Download Demo

JQuery Circle Gallery Using RadMenu Plugin

        submit to reddit Delicious

6 Comments Leave a Comment Subscribe RSS

  • John McLear says:

    Good work, here is a suggestion.. Please make it pre-load the images.

    Congrats

  • eko says:

    does not work with ie8 i.e. no circles but squares are displayed, any support for ie8 yet?

  • @eko — The border radius CSS attribute is not available in IE8. The radmenu does ‘support’ IE8, as the main purpose of the plugin is to distribute items around the circumference of a circle. The plugin also takes advantage of the CSS3 transform ‘rotate’ attribute where the browser supports it. The circular items are in the developers control, so if you absolutely need circular items in IE8 (or any other browser that do not support border radius) you can utilize your own image assets. Also worth noting, if you want this example to be X-browser friendly, in addition to ‘-webkit-border-radius’, ‘-moz-border-radius’ and ‘border-radius’, it’s worth while putting ‘-ms-border-radius’ for Microsoft support, and ‘-o-border-radius’ for Opera support. Hope this helps -Nirvana

  • Melvin says:

    Thanks. tutorial added

  • Srini says:

    Thanks for the awesome stuff. Can you make the small circles rotate around the BIG …!

  • Nuton says:

    A very interesting plugin! It’s a very good solution for presenting a gallery of team members, where you do not want to convey any team hierarchy. As a way to emphasize the randomness of the members sequence, it’d be nice to have an optional “intro” which would swirl the pictures around for, say, 3 seconds, ease-out and stop.

Leave a Comment