Automatic translator

I have the following problem.

link

I'm using that example to set up my translator.

but he does not do anything to me, I do not know what he's doing wrong.

In the webroot is the home-in and the home-is

home-en.json

{
    "titulo": "Laboratorio estrategico"
}

home-en.json (sorry if it's badly translated, I did it in memory)

{
    "titulo": "Estrategic laboratory"
}

jqueryTranlator.js this was downloaded

 /*
        Name: jqueryTranslator
        Author: Antonio Laguna
        Twitter: @Belelros
        Website: http://www.funcion13.com
        Version: 1.1.1
    */
    (function($, window, document, undefined){
      var Translate = {
        initialize : function(pkg, options){
          this.packages = [];
          this.loaded = $.Deferred();

          this.translatable = true;

          this.options = $.extend({}, $.fn.jqTranslate.options, options);
          var userLanguage = this.getUserLanguage();

          if (typeof pkg === 'string'){
            this.packages.push(pkg);
          }
          else {
            this.packages = pkg;
          }

          if (this.isTranslatable(userLanguage)){
            this.loadLanguages();
          }
          else{
            this.translatable = false;
          }

          return this.loaded.promise();
        },
        getUserLanguage : function(){
          var userLang = this.options.forceLang || navigator.language || navigator.userLanguage;
          $.defaultLanguage = userLang;

          userLang = userLang.replace(/_/, '-').toLowerCase();

          if (userLang.length > 3){
            userLang = userLang.substring(0,3) + userLang.substring(3).toUpperCase();
            this.languages = [
              userLang.substring(0,2),
              userLang.substring(3).toUpperCase()
            ];
          }
          else {
            this.languages = [
              userLang
            ];
          }

          $.fn.jqTranslate.userLang = userLang;
          return userLang;
        },
        isTranslatable : function(language){
          if (this.options.defaultLang === language) { return false; }
          else { return ($.inArray(language, this.options.skip) === -1); }
        },
        loadLanguages : function(){
          var loaded = 0, maxLoad = Translate.languages.length * Translate.packages.length;
          this.translatedStrings = {};

          $.each(Translate.packages,function(i, pkg){
            var ePkg = pkg;

            $.each(Translate.languages, function (i, lang){
              Translate.getLanguage(ePkg,lang)
              .done(Translate.storeLangFile)
              .always(function(){
                loaded++;
                if (loaded >= maxLoad){Translate.loaded.resolve();}
              });
            });
          });
        },
        getLanguage : function(pkg, language){
          var self = this,
              path = '',
              got = $.Deferred();

          if (self.options.path){
            path = self.options.path + '/';
          }
          var url = path + [pkg, language].join('-') + '.json';

          $.ajax ({
            url : url,
            dataType : "json",
            cache : self.options.cache,
            async: self.options.asyncLangLoad
          }).done(function(data){
            got.resolve(data);
          }).fail(function(){
            if (self.options.fallbackLang){
              url = path + [pkg, self.options.fallbackLang].join('-') + '.json';
              $.ajax ({
                url : url,
                dataType : "json",
                cache : self.options.cache,
                async: self.options.asyncLangLoad
              }).done(function(data){
                got.resolve(data);
              });
            }
            else {
              got.reject();
            }
          });

          return got;
        },
        storeLangFile : function(data){
          $.extend(Translate.translatedStrings, data);
        },
        translate : function() {
          var elem = $(this),
              key = elem.data('translate');

          if (Translate.translatable){
            if (Translate.translatedStrings[key]){
              if (Translate.translatedStrings[key].length === undefined){
                // The key have nested keys
                Translate.translateElement(elem,Translate.translatedStrings[key].text);
                delete Translate.translatedStrings[key].text;
                elem.attr(Translate.translatedStrings[key]);
              }
              else{
                Translate.translateElement(elem,Translate.translatedStrings[key]);
              }
            }
          }

          if (typeof Translate.options.onComplete === 'function'){
            Translate.options.onComplete.apply(this, arguments);
          }

          return elem;
        },
        translateElement : function (elem, value){
          if (elem.is('input') || elem.is('textarea')) {
            if (elem.is('[placeholder]')){
              elem.attr('placeholder', value);
            }
            else{
              elem.val(value);
            }
          }
          else if (elem.is('optgroup')){
            elem.attr('label', value);
          }
          else if (elem.is('img')) {
            elem.attr('alt',value);
          }
          else {
            elem.html(value);
          }
        }
      };

      $.fn.jqTranslate = function(pkg, options){
        var self = this;
        Translate.initialize(pkg, options).done(function(){
            self.each(Translate.translate);
        });
        return this;
      };
      $.fn.jqTranslate.options = {
        asyncLangLoad : true,
        cache : true,
        defaultLang : null,
        fallbackLang : null,
        forceLang : null,
        onComplete : null,
        path : null,
        skip : []
      };
    })(jQuery, window, document);

home.ctp It is supposed that he should create the text that I put in the json, but he does not

<h1 class="traducir" data-translate="titulo">

</h1>

<div class="row">
    <div class="col-md-6">

        <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
    </div>
    <div class="col-md-6">ddd</div>
</div>

<script type="text/javascript">
    (function (){
        $("[data-translate]").jqTranslate("home" , {defaultLang: 'es'})
    })();
</script>