$(document).ready(function () {
    //Examples of how to assign the ColorBox event to elements
    $(".group1").colorbox({ rel: 'group1' });
    $(".otelresimleri").colorbox({ rel: 'otelresimleri', transition: "fade", iframe: true, innerWidth: 600, innerHeight: 400 });
    $(".otelresimlerislide").colorbox({ rel: 'otelresimleri', transition: "fade", iframe: true, innerWidth: 600, innerHeight: 400, slideshow: true });
    $(".group3").colorbox({ rel: 'group3', transition: "none", width: "75%", height: "75%" });
    $(".group4").colorbox({ rel: 'group4', slideshow: true });
    $(".ajax").colorbox();
    $(".youtube").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
    $(".otelharita").colorbox({ iframe: true, innerWidth: 500, innerHeight: 500 });
    $(".inline").colorbox({ inline: true, width: "50%" });
    $(".callbacks").colorbox({
        onOpen: function () { alert('onOpen: colorbox is about to open'); },
        onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
        onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
        onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
        onClosed: function () { alert('onClosed: colorbox has completely closed'); }
    });

    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function () {
        $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
        return false;
    });
});