How to add a "full screen" button to colorbox?

Question

JavaScript

There was a need to add an additional button to the colorbox plugin (an advanced version of lightbox).
The button is extremely simple - it is a direct link to what opens in this lightbox.



implementation:

$(document).ready(function(){
  
        $(".iframe").colorbox({
          iframe:true, innerWidth:"90%", height:"90%",
          onComplete: function() {
              $("#cboxContent iframe").ready(function(){
                  $("#cboxContent").append('<a id="cboxFullScr" style="float: left;">full screen</a>');
                  $("#cboxFullScr").attr("href", $.colorbox.element().attr("href"));
              });
            }
        });

    });

But this code works 1 time.
If you open a lightbox, close it and open it again, the button will not be pressed (it will no longer have an href parameter).

I clearly lack the experience to understand why this is happening and how it can be fixed.
Please help.

Booth:
jsbin.com/yovum/1

Answer 1

$(document).ready(function(){

    $(".iframe").each(function(){
      var that = $(this);
      that.colorbox({
        iframe:true, innerWidth:"90%", height:"90%",
        onComplete: function() {
            $("#cboxContent iframe").ready(function(){
                $("#cboxContent").append('<a id="cboxFullScr" style="float: left;" href=' + that.attr("href") + '>full screen</a>');
            });
          }
      });
    });

});

This is how it's supposed to work