Funcionamiento de este codigo javascript

garamond · #1 (**permalink**) 21/06/2012, 13:16

Hola!!!
Pues necesitaria que alguien me indicase como poner en funcionamiento este codigo, no tengo muchos conocimientos de javascript pero e instalado otros codigos sin problemas.
El codigo en cuestion esta aqui en esta paginas:
http://www.soyos.net/labs/bubble-engine-plugin-fuer-jquery/
Les agradeceria que me indicasen como poner el codigo para que funcione o si falta algun codigo porque no consigo que me funcione.
Muchas gracias

emprear · #2 (**permalink**) 21/06/2012, 14:24

tenés 5 demos diferentes para ver como funciona, analizalas

garamond · #3 (**permalink**) 21/06/2012, 14:42

ya he visto las 5 demos pero no consigo averiguar como hacerlo funcionar, he hecho varias pruebas con el codigo que viene ahi pero no consigo que se me muestre nada

marlanga · #4 (**permalink**) 21/06/2012, 15:00

Burbujitas...
Las que hice para mi página me gustan mas xd:

www.jlabstudio.com

Para crear burbujas, pincha en la pantalla. Para hacer que se inflen, mantener pulsado el raton. Para dispararlas, soltar el raton apuntando en la dirección contraria a donde quieres "disparar" (cuanto más lejos arrastres, mas fuerte disparas).

garamond · #5 (**permalink**) 21/06/2012, 15:11

Esta my bien pero me interesaria mas hacer como la que aparece en la pagina que he puesto en la demo 3, tienes idea de como lo puedo hacer?

maelse · #6 (**permalink**) 23/01/2013, 13:34

Hola,

Yo tengo el mismo problema. No logro hacer funcionar este código javascript. Lo estoy añadiendo en el archivo header.php de un theme de wordpress pero no se si lo coloco bien. El código del paquete demo es el siguiente:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <!--
   *
   * BubbleEngine - jQuery Plugin (v1.0)
   * Copyright 2010, SOYOS Online Solutions
   *
   * Project Website:
   * http://www.soyos.net/bubble-engine-plugin-for-jquery.html
   * http://www.soyos.net
   *
   *
   *
   * Requires Easing Plugin for Window Animations:
   * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
   *
   * Date: 2010-07-08
   *
  //-->

  <head>
    <title>Bubble Engine - jQuery Plugin | Demo 3: Three Bubble Sources at the same Place</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" href="css/BubbleEngineDemo.css" rel="stylesheet" />	
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery-BubbleEngine.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //Build Bubble Machines with the Bubble Engine ------------------------
        var SoapBubbleMachineNumber1 = $('fn').BubbleEngine({
          particleSizeMin:            0,
          particleSizeMax:            30,
          particleSourceX:            $(window).width()/2,
          particleSourceY:            $(window).height()-50,
          particleAnimationDuration:  5000,
          particleDirection:          'center',
          particleAnimationDuration:  2000,
          particleAnimationVariance:  2000,
          particleScatteringX:        150,
          particleScatteringY:        100,
          gravity:                    -100
        });
        var SoapBubbleMachineNumber2 = $('fn').BubbleEngine({
          particleSizeMin:            50,
          particleSizeMax:            100,
          particleSourceX:            $(window).width()/2,
          particleSourceY:            $(window).height()-100,
          particleAnimationDuration:  5000,
          particleDirection:          'center',
          particleAnimationDuration:  10000,
          particleAnimationVariance:  2000,
          particleScatteringX:        400,
          particleScatteringY:        600,
          gravity:                    -100
        });
        var SoapBubbleMachineNumber3 = $('fn').BubbleEngine({
          particleSizeMin:            0,
          particleSizeMax:            60,
          particleSourceX:            $(window).width()/2,
          particleSourceY:            $(window).height()-100,
          particleAnimationDuration:  5000,
          particleDirection:          'center',
          particleAnimationDuration:  10000,
          particleAnimationVariance:  2000,
          particleScatteringX:        200,
          particleScatteringY:        400,
          gravity:                    -100
        });
        //Start Bubble Machines -----------------------------------------------
        SoapBubbleMachineNumber1.addBubbles(60);
        SoapBubbleMachineNumber2.addBubbles(3);
        SoapBubbleMachineNumber3.addBubbles(50);
      });
    </script>
    <style>
      body {
        overflow: hidden;
        font-family: arial;
        font-size: 12px;
        margin: 0px;
        padding: 0px;
        background: #09368b url(win7-desktop-bg.jpg);
      }
    </style>
  </head>
  <body>
    <div id="navigation">
      <div style="float: left">
      <script type="text/javascript"><!--
      google_ad_client = "pub-7201128898371258";
      /* 468x60, Erstellt 08.07.10 */
      google_ad_slot = "7382852545";
      google_ad_width = 468;
      google_ad_height = 60;
      //-->
      </script>
      <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script>      
      </div>    
      <ul>
        <li><a href="http://www.soyos.net/bubble-engine-plugin-for-jquery.html">&laquo; Back to Bubble Engine Plugin Page</a>
        <li><a href="index.html">Demo 1 (with Controls)</a>
        <li><a href="demo2.html">Demo 2</a>
        <li><a href="demo3.html">Demo 3</a>
        <li><a href="demo4.html">Demo 4</a>
        <li><a href="demo5.html">Demo 5</a>
      </ul>
      <p><strong>This Demo:</strong> Three Bubble Sources at the same Place</p>
    </div>
    <div style="margin-left: 50px; padding-top: 50px;">
      <span style="color: white"><strong>Do you like it? </strong></span><br>
      <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fsoyos.net&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="margin-top : 5px; border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
    </div>
    
  </body>
</html>

¿Alguien puede echarme una mano? Gracias.