Adding Lightbox functionality to a JQueryUI Template in Visual Studio 2010

Hi all, I am trying to add lightbox functionality to my website but it just seems to be giving me problems. I am using a standard JQueryUI template. I have read on the net that the scripts might be clashing, but have also been advised that I am getting problems because I am using Prototype and JQuery together. Please could you advise?

Here is my code

jQuery UI Example Page

    <link rel=Stylesheet href="css/lightbox.css" type="text/css" media="screen" />

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

    <style type="text/css">
    body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
    </style>


    <link type="text/css" href="css/dot-luv/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript">




        $(function(){

            // Accordion
            $("#accordion").accordion({ header: "h3" });

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


            // Dialog           
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function() { 
                        $(this).dialog("close"); 
                    }, 
                    "Cancel": function() { 
                        $(this).dialog("close"); 
                    } 
                }
            });

            // Dialog Link
            $('#dialog_link').click(function(){
                $('#dialog').dialog('open');
                return false;
            });

            // Datepicker
            $('#datepicker').datepicker({
                inline: true
            });

            // Slider
            $('#slider').slider({
                range: true,
                values: [17, 67]
            });

            // Progressbar
            $("#progressbar").progressbar({
                value: 20 
            });

            //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>




</head>
<body>

ansaurus

tags:

views:

answers:

Adding Lightbox functionality to a JQueryUI Template in Visual Studio 2010

related questions