Untitled

jCarousel into Tabbed Menu

<link type="text/css" href="http://www.immobilia-re.eu/wp-content/plugins/css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>

        <script type="text/javascript" src="http://www.immobilia-re.eu/wp-content/plugins/js/jquery-ui-1.8.10.custom.min.js"></script>

 

<script type="text/javascript">

                $(function(){

 

                    // Tabs

                    $('#tabs').tabs();

 

                    //hover states on the static widgets

                    $('#dialog_link, ul#icons li').hover(

                        function() { $(this).addClass('ui-state-hover'); },

                        function() { $(this).removeClass('ui-state-hover'); }

                );

 

            });

    </script>

 

        <style type="text/css">

            /*demo page css*/

            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

            .demoHeaders { margin-top: 2em; }

            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

            ul#icons {margin: 0; padding: 0;}

            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}

            ul#icons span.ui-icon {float: left; margin: 0 4px;}

        </style>

       

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <link href="http://www.immobilia-re.eu/wp-content/plugins/jcarousel/filename.css" rel="stylesheet" type="text/css"/>

    <link href="http://www.immobilia-re.eu/wp-content/plugins/jcarousel/jquery.jcarousel.css" rel="stylesheet" type="text/css"/>

    <link href="http://www.immobilia-re.eu/wp-content/plugins/jcarousel/skin.css" rel="stylesheet" type="text/css"/>

  <script type="text/javascript" src="http://www.immobilia-re.eu/wp-content/plugins/jcarousel/jquery.jcarousel.js"></script>

 

<script>

$(function() {

 

    $('#first-carousel').jcarousel();

 

  $("#tabs-navitems li a").click(function() {

 

        // Figure out current list via CSS class

        var curList = $("#tabs-navitems li a.current").attr("rel");

 

        // List moving to

        var $newList = $(this);

 

        // Set outer wrapper height to height of current inner list

        var curListHeight = $("#all-list-wrap").height();

        $("#all-list-wrap").height(curListHeight);

 

        // Remove highlighting - Add to just-clicked tab

        $("#tabs-navitems li a").removeClass("current");

        $newList.addClass("current");

 

        // Figure out ID of new list

        var listID = $newList.attr("rel");

 

        if (listID != curList) {

 

            // Fade out current list

            $("#"+curList).fadeOut(300, function() {

 

                // Fade in new list on callback

                $("#"+listID).fadeIn();

 

                // Adjust outer wrapper to fit new list snuggly

                var newHeight = $("#"+listID).height();

                $("#all-list-wrap").animate({

                    height: newHeight

                });

 

            });

 

        }      

 

        // Don't behave like a regular link

        return false;

    });

 

 

});

</script>