The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

jQuery fireFly effect

View previous topic View next topic Go down

jQuery fireFly effect

Post by Yahve on June 2nd 2013, 10:37 pm

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
New Member

Posts : 2
Reputation : 0
Language : Hungarian

http://aoeku.gettalk.net/forum

Back to top Go down

Re: jQuery fireFly effect

Post by Ultron's Vision on June 3rd 2013, 8:54 am

@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! Wink

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: jQuery fireFly effect

Post by Yahve on June 3rd 2013, 5:50 pm

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

Yahve
New Member

Posts : 2
Reputation : 0
Language : Hungarian

http://aoeku.gettalk.net/forum

Back to top Go down

Re: jQuery fireFly effect

Post by Ultron's Vision on June 3rd 2013, 6:49 pm

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.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum