Is there any way to open all types of files (.txt, .doc, .html, .ppt, .jpeg, .png etc) in light box?
<p>Is there any way to open all types of files (.txt, .doc, .html, .ppt, .jpeg, .png, also video files.) using asp.net C#?</p>

<p>I have tried color box but I am able to load .html pages only in color box. If i want to open a Word file then I have to convert it to html first. So is there any way to open all files in light box?</p>

<p>Please help.</p>

<p><strong>EDIT</strong></p>

<p>I have tries the code from below link
<a href="http://www.jacklmoore.com/colorbox/example1/" rel="nofollow">http://www.jacklmoore.com/colorbox/example1/</a></p>

<p>What I have done so far is...<strong>My code is as below</strong></p>

<p><strong>Default.aspx</strong></p>

<pre><code> &lt;style type="text/css"&gt;
            body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
            a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
            h2{font-size:13px; margin:15px 0 0 0;}
        &lt;/style&gt;
        &lt;link rel="stylesheet" href="example1/colorbox.css" type="text/css"/&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="jquery.colorbox.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            $(document).ready(function(){
                //Examples of how to assign the ColorBox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".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});
                $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
                $(".iframe").colorbox({iframe:true, width:"60%", height:"80%"});
                $(".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'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

                //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;
                });
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;ColorBox Demonstration&lt;/h1&gt;
        &lt;%--&lt;h2&gt;Elastic Transition&lt;/h2&gt;
        &lt;p&gt;&lt;a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;&lt;/p&gt;

        &lt;h2&gt;Fade Transition&lt;/h2&gt;
        &lt;p&gt;&lt;a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee"&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
        --%&gt;
        &lt;h2&gt;No Transition + fixed width and height (75% of screen size)&lt;/h2&gt;
        &lt;p&gt;&lt;a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;&lt;/p&gt;

    &lt;%--    &lt;h2&gt;Slideshow&lt;/h2&gt;
        &lt;p&gt;&lt;a class="group4"  href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group4"  href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped Photo 2&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="group4"  href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;Grouped Photo 3&lt;/a&gt;&lt;/p&gt;

        &lt;h2&gt;Other Content Types&lt;/h2&gt;
        &lt;p&gt;&lt;a class='ajax' href="WordToHtml/Notes.htm" title="Homer Defined"&gt;Outside HTML (Ajax)&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class='youtube' href="Uploadedfiles/Wildlife.wmv" title="The Knife: We Share Our Mother's Health"&gt;Flash / Video (Iframe/Direct Link To YouTube)&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class='vimeo' href="Uploadedfiles/Wildlife.wmv" title="R&amp;ouml;yksopp: Remind Me"&gt;Flash / Video (Iframe/Direct Link To Vimeo)&lt;/a&gt;&lt;/p&gt;--%&gt;

        &lt;p&gt;&lt;a runat="server" id="a"  class='iframe'&gt;Outside Webpage (Iframe)&lt;/a&gt;&lt;/p&gt;
        &lt;%--&lt;p&gt;&lt;a class='inline' href="#inline_content"&gt;Inline HTML&lt;/a&gt;&lt;/p&gt;--%&gt;

        &lt;h2&gt;Demonstration of using callbacks&lt;/h2&gt;
        &lt;p&gt;&lt;a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island"&gt;Example with alerts&lt;/a&gt;. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.&lt;/p&gt;


    &lt;%--    &lt;h2&gt;Retina Images&lt;/h2&gt;
        &lt;p&gt;&lt;a class="retina" href="../content/daisy.jpg" title="Retina"&gt;Retina&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a class="non-retina" href="../content/daisy.jpg" title="Non-Retina"&gt;Non-Retina&lt;/a&gt;&lt;/p&gt;

        &lt;!-- This contains the hidden content for inline calls --&gt;
        &lt;div style='display:none'&gt;
            &lt;div id='inline_content' style='padding:10px; background:#fff;'&gt;
            &lt;p&gt;&lt;strong&gt;This content comes from a hidden element on this page.&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.&lt;/p&gt;
            &lt;p&gt;&lt;a id="click" href="#" style='padding:5px; background:#ccc;'&gt;Click me, it will be preserved!&lt;/a&gt;&lt;/p&gt;

            &lt;p&gt;&lt;strong&gt;If you try to open a new ColorBox while it is already open, it will update itself with the new content.&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;Updating Content Example:&lt;br /&gt;
            &lt;a class="ajax" href="../content/ajax.html"&gt;Click here to load new content&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;--%&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>.cs</strong></p>

<pre><code> protected void Page_Load(object sender, EventArgs e)
    {
        a.HRef = "~/Uploadedfiles/notes.html";
    }
</code></pre>

<p>Here i have converted notes.doc file to notes.html.
Here i an able to open .html file. So i want to know is there any way to open word doc. directly in iframe</p>
