CODEWITHSUNDEEP
jquerycolorboxtitle
Nikolay Dutchuk
Nikolay Dutchuk

Reputation: 713

How do I set a Colorbox title from the content loaded in the Colorbox itself?

Let me explain. I use Colorbox to load HTML file and display it in the iframe. The HTML file contains <title> tag. Is it possible to use that <title> tag as the title for the Colorbox popup? I could use onComplete event, but how?

EDIT: I should clarify the code:

Parent HTML:

<!doctype html>
<html>
    <head>
        <title>This is parent</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('a.cb').colorbox({
                    iframe : true,
                    title  : function() { /* here goes the code */ },
                });
            });
        </script>
    </head>
    <body>
        <a class="cb" href="popup.html">Popup</a>
    </body>
</html>

Child HTML:

<!doctype html>
<html>
    <head>
        <title>The title</title>
    </head>
<body>
    ...
</body>
</html>

Basically I want that Colorbox shows the title from the child HTML code.

Upvotes: 3

Views: 11326

Answers (3)

Jack
Jack

Reputation: 9548

Depending on the document, it may not be possible. If the iframed document is on the same domain as your parent document, you should be able to do something like this:

$(document).ready(function(){
    $('a.cb').colorbox({
        iframe : true,
        fastIframe: false,
        onComplete: function(){
            var title = $('.cboxIframe')[0].contentWindow.document.title;
            $('#cboxTitle').text(title);
        }
    });
});

Upvotes: 5

sahar aghakasiri
sahar aghakasiri

Reputation: 11

I'm not sure if I have understand your question well, if I'm far away from the subject, let me know to delete my post :)

you can set the color box title by a function, in that function you can get the iframe title and set it to color box title 

$("mycolorbox").colorbox({rel: 'gal', title: function(){
    var title = $( "#frame_id").contents( ).find( "title").html( );
    return 'title';
}});

I'm not sure if the code is totally correct but it may help:)

Upvotes: -1

Johan
Johan

Reputation: 35194

Hard to say but my guess would be something like

var titleText = $(fetchedHTML).find('title').text();

Upvotes: 1

Related Questions