jQuery fireFly effect

Hello,
I would like to use this on my site. It is a phpBB2 forum. I would like fireflies to fly around my header. I am beginner and I don't understand the scripts. Can somebody explain to me in detail what I have to do?

Here is the code from the website:

Code:

/*
* jQuery Firefly v0.1
* https://github.com/motyar/firefly

* Licensed under the MIT license.
* Copyright 2011 Dharmveer Motyar
* http://motyar.blogspot.com
*/
(function($) {

   /* Plugin defaults */
   var defaults = {
      images : [
         'http://dharmmotyar.googlecode.com/svn/trunk/images/spark.png',
         'http://dharmmotyar.googlecode.com/svn/trunk/images//spark2.png',
         'http://dharmmotyar.googlecode.com/svn/trunk/images/spark3.png',
         'http://dharmmotyar.googlecode.com/svn/trunk/images/spark4.png'],
      total : 40
   };
   
   $.firefly = function(settings) {
      $.firefly.settings = $.extend({}, defaults, settings);
         if($.firefly.preloadImages()){
            for (i = 0; i < $.firefly.settings.total; i++){
               $.firefly.fly($.firefly.create($.firefly.settings.images[$.firefly.random(($.firefly.settings.images).length)]));
            }
         }
      return;
   };
   
   /* Public Functions */
   $.firefly.create = function(img){
      spark = $('<img>').attr({'src' : img}).hide();
      $(document.body).append(spark);
         return spark.css({
            'position':'absolute',
            'z-index': $.firefly.random(20),
            top: $.firefly.random(($(window).height()-150)),   //offsets
            left: $.firefly.random(($(window).width()-150))      //offsets
            }).show();
}

$.firefly.fly = function(sp) {
   $(sp).animate({
      top: $.firefly.random(($(window).height()-150)),   //offsets
      left: $.firefly.random(($(window).width()-150))
   }, (($.firefly.random(10) + 5) * 1100),function(){ $.firefly.fly(sp) } );
};

$.firefly.preloadImages = function() {
   var preloads = new Object();
   for (i = 0; i < ($.firefly.settings.images).length; i++){
         preloads[i] = new Image(); preloads[i].src = $.firefly.settings.images[i];
      }
   return true;
}

$.firefly.random = function(max) {
   return Math.ceil(Math.random() * max) - 1;
}

})(jQuery);


(I'm sorry but my English is not too good.)

Yahve wrote:Hello,
I would like to use this on my site. It is a phpBB2 forum. I would like fireflies to fly around my header. I am beginner and I don't understand the scripts. Can somebody explain to me in detail what I have to do?

Here is the code from the website:

Code:

/*
* jQuery Firefly v0.1
* https://github.com/motyar/firefly

* Licensed under the MIT license.
* Copyright 2011 Dharmveer Motyar
* http://motyar.blogspot.com
*/
(function($) {

   /* Plugin defaults */
   var defaults = {
      images : [
         'http://dharmmotyar.googlecode.com/svn/trunk/images/spark.png',
         'http://dharmmotyar.googlecode.com/svn/trunk/images//spark2.png',
         'http://dharmmotyar.googlecode.com/svn/trunk/images/spark3.png',
         'http://dharmmotyar.googlecode.com/svn/trunk/images/spark4.png'],
      total : 40
   };
   
   $.firefly = function(settings) {
      $.firefly.settings = $.extend({}, defaults, settings);
         if($.firefly.preloadImages()){
            for (i = 0; i < $.firefly.settings.total; i++){
               $.firefly.fly($.firefly.create($.firefly.settings.images[$.firefly.random(($.firefly.settings.images).length)]));
            }
         }
      return;
   };
   
   /* Public Functions */
   $.firefly.create = function(img){
      spark = $('<img>').attr({'src' : img}).hide();
      $(document.body).append(spark);
         return spark.css({
            'position':'absolute',
            'z-index': $.firefly.random(20),
            top: $.firefly.random(($(window).height()-150)),   //offsets
            left: $.firefly.random(($(window).width()-150))      //offsets
            }).show();
}

$.firefly.fly = function(sp) {
   $(sp).animate({
      top: $.firefly.random(($(window).height()-150)),   //offsets
      left: $.firefly.random(($(window).width()-150))
   }, (($.firefly.random(10) + 5) * 1100),function(){ $.firefly.fly(sp) } );
};

$.firefly.preloadImages = function() {
   var preloads = new Object();
   for (i = 0; i < ($.firefly.settings.images).length; i++){
         preloads[i] = new Image(); preloads[i].src = $.firefly.settings.images[i];
      }
   return true;
}

$.firefly.random = function(max) {
   return Math.ceil(Math.random() * max) - 1;
}

})(jQuery);


(I'm sorry but my English is not too good.)

Well, certainly there are instructions on how to create such fireflies after you installed the plugin, right?
You cannot explicitely create plugins, but you can fetch this script with jQuery.
So the first step would be to create a new JavaScript page under Administration Panel -> Modules -> HTML & JavaScript -> JavaScript pages management, then paste the code you posted here there.
Next step is to create another JavaScript page, but before you do so, go back to your JavaScript pages management site, the code you just entered should be there and it should now be accessible by URL (the forumotion-generated URLs usually consist of numbers; let's just assume it's 123456.js for the sake of this example). Copy the URL and then create a new JavaScript page, and enter this.

Code:

$.getScript('/123456.js');

Then you continue with the instructions the firefly site is giving you. The logo of your forum listen to this jQuery selector: jQuery('img#i_logo') (or $('img#i_logo'), depends on what you like most).


Hope this helped you!

I see, but it isn't working.
Is it necessary to write something in the overall_header?

After testing some scripts on a test forum of mine, I came to the result that I am using Chrome and that it won't let me perform XMLHttpRequests for whatever reason.

I will keep you updated on this matter.