Galerie page html

Bonsoir !

Je suis tombé sur ce tutoriel qui m'intéresse beaucoup:
Une galerie d'images simple avec jQuery

Cependant comme je ne suis pas expert, je n'arrive pas à comprendre comment l'insérer sur mon forum (phpbb3 forumactif) ni comment la retrouver.

De ce que je comprend c'est qu'il faut insérer ces 2 codes:

jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation"
  };

  var thumbLinks = $("#"+settings.thumbListId).find("a"),
    firstThumbLink = thumbLinks.eq(0),
    highlight = function(elt){
      thumbLinks.removeClass(settings.activeClass).removeAttr("title");
      elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
    };

  highlight(firstThumbLink);

  $("#"+settings.thumbListId).after(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          src: firstThumbLink.attr("href")
        })
      )
  );

  var imgViewer = $("#"+settings.imgViewerId),
    bigPic = imgViewer.children("img");

  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
        target = $this.attr("href");
      if (bigPic.attr("src") == target) return;
      highlight($this);
      bigPic
        .attr("src",target);
    });

});

body {background:#222;}
img {vertical-align:middle; border:none;}
#thumbs {overflow:auto; list-style:none; margin:30px; padding:0;}
#thumbs li {float:left;}
#thumbs a {display:block; padding:10px; outline:none;}
#thumbs a:hover, #thumbs a:focus {background:#fff;}
#thumbs a.active {background:#000;}
#viewer {width:700px; height:465px; margin-left:30px;}

Mais je n'ai pas trop saisi où et comment ?

Aussi j'aimerais utiliser comme hébergeur d'image Hostingpics.com et l'insérer dans cette galerie (pour pouvoir charger les photos sur mon compte hostingpics), comme je les fait pour l'éditeur en créant une page javascipt avec le code ci-dessous: (les XXXXX étant notre identifiant de compte)

$(function () {
$.sceditor && ($.sceditor.commands.servimg["exec"] = $.sceditor.commands.servimg["txtExec"] = function (caller) {
var content = '<p><iframe src="http://www.hostingpics.net/iframe_mini.php?module=XXXX&iduni=XXXXXXXXXXXX" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe></p>';
this.createDropDown(caller, 'servimg', content);
})
});

Voilà merci d'avance !