Foros del Web » Programando para Internet » Jquery »

Ejecutar evento Jquery al abrir mi pagina

 Estas en el tema de Ejecutar evento Jquery al abrir mi pagina en el foro de Jquery en Foros del Web. Hola a todos, la verda es que tengo un gran problema desde ayer y no logro solucionarlo. Tengo mi pagina web a la cual le ...
  #1 (permalink)  
Antiguo 23/12/2010, 11:49
 
Fecha de Ingreso: enero-2009
Mensajes: 20
Antigüedad: 15 años, 10 meses
Puntos: 0
Ejecutar evento Jquery al abrir mi pagina
Hola a todos, la verda es que tengo un gran problema desde ayer y no logro solucionarlo. Tengo mi pagina web a la cual le agrege el framework d jquery que es SPACEGALLERY lo pueden ver aqui:

http://www.eyecon.ro/spacegallery/#about

Como veran estas imagenes solo se inician al hacerle click dentro de ellas, lo que yo quiero ahcer es que al abrir la pagina estas imagenes se muevan automaticamente sin necesidad de hacerles click.

Aqui les mando el codigo para q lo puedan ver mas detenidamente:


Código Javascript: 
Ver original
  1. (function($){
  2.     EYE.extend({
  3.         
  4.         spacegallery: {
  5.             
  6.             //default options (many options are controled via CSS)
  7.             defaults: {
  8.                 border: 6, // border arround the image
  9.                 perspective: 140, // perpective height
  10.                 minScale: 0.2, // minimum scale for the image in the back
  11.                 duration: 800, // aimation duration
  12.                 loadingClass: null, // CSS class applied to the element while looading images
  13.                 before: function(){return false},
  14.                 after: function(){return false}
  15.             },
  16.             
  17.             animated: true,
  18.             
  19.             //position images
  20.             positionImages: function(el) {
  21.                 var top = 0;
  22.                 EYE.spacegallery.animated = false;
  23.                 $(el)
  24.                     .find('a')
  25.                         .removeClass(el.spacegalleryCfg.loadingClass)
  26.                         .end()
  27.                     .find('img')
  28.                         .removeAttr('height')
  29.                         .each(function(nr){
  30.                             var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];
  31.                             $(this)
  32.                                 .css({
  33.                                     top: el.spacegalleryCfg.tops[nr] + 'px',
  34.                                     marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
  35.                                     opacity: 1 - el.spacegalleryCfg.asins[nr]
  36.                                 })
  37.                                 .attr('width', parseInt(newWidth));
  38.                             this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
  39.                             this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
  40.                             this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
  41.                             this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
  42.                             this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
  43.                             this.spacegallery.current = el.spacegalleryCfg.asins[nr];
  44.                             this.spacegallery.width = newWidth;
  45.                         })
  46.             },
  47.             
  48.             //animate to nex image
  49.             next: function(e) {
  50.                 if (EYE.spacegallery.animated === false) {
  51.                     EYE.spacegallery.animated = true;
  52.                     var el = this.parentNode;
  53.                     el.spacegalleryCfg.before.apply(el);
  54.                     $(el)
  55.                         .css('spacegallery', 0)
  56.                         .animate({
  57.                             spacegallery: 100
  58.                         },{
  59.                             easing: 'easeOut',
  60.                             duration: el.spacegalleryCfg.duration,
  61.                             complete: function() {
  62.                                 $(el)
  63.                                     .find('img:last')
  64.                                     .prependTo(el);
  65.                                 EYE.spacegallery.positionImages(el);
  66.                                 el.spacegalleryCfg.after.apply(el);
  67.                             },
  68.                             step: function(now) {
  69.                                 $('img', this)
  70.                                     .each(function(nr){
  71.                                         var newWidth, top, next;
  72.                                         if (nr + 1 == el.spacegalleryCfg.images) {
  73.                                             top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
  74.                                             newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
  75.                                             $(this)
  76.                                                 .css({
  77.                                                     top: top + 'px',
  78.                                                     opacity: 0.7 - now/100,
  79.                                                     marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
  80.                                                 })
  81.                                                 .attr('width', newWidth);
  82.                                         } else {
  83.                                             next = this.spacegallery.current - this.spacegallery.increment * now /100;
  84.                                             newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
  85.                                             $(this).css({
  86.                                                 top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
  87.                                                 opacity: 1 - next,
  88.                                                 marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
  89.                                             })
  90.                                             .attr('width', newWidth);
  91.                                         }
  92.                                     });
  93.                             }
  94.                         });
  95.                 }
  96.                     
  97.                 this.blur();
  98.                 return false;
  99.             },
  100.             
  101.             //constructor
  102.             init: function(opt) {
  103.                 opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
  104.                 return this.each(function(){
  105.                     var el = this;
  106.                     if ($(el).is('.spacegallery')) {
  107.                         $('<a href="#"></a>')
  108.                             .appendTo(this)
  109.                             .addClass(opt.loadingClass)
  110.                             .bind('click', EYE.spacegallery.next);
  111.                         el.spacegalleryCfg = opt;
  112.                         el.spacegalleryCfg.images = el.getElementsByTagName('img').length;
  113.                         el.spacegalleryCfg.loaded = 0;
  114.                         el.spacegalleryCfg.asin = Math.asin(1);
  115.                         el.spacegalleryCfg.asins = {};
  116.                         el.spacegalleryCfg.tops = {};
  117.                         el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
  118.                         var top = 0;
  119.                         $('img', el)
  120.                             .each(function(nr){
  121.                                 var imgEl = new Image();
  122.                                 var elImg = this;
  123.                                 el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
  124.                                 top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
  125.                                 el.spacegalleryCfg.tops[nr] = top;
  126.                                 elImg.spacegallery = {};
  127.                                 imgEl.src = this.src;
  128.                                 if (imgEl.complete) {
  129.                                     el.spacegalleryCfg.loaded ++;
  130.                                     elImg.spacegallery.origWidth = imgEl.width;
  131.                                     elImg.spacegallery.origHeight = imgEl.height
  132.                                 } else {
  133.                                     imgEl.onload = function() {
  134.                                         el.spacegalleryCfg.loaded ++;
  135.                                         elImg.spacegallery.origWidth = imgEl.width;
  136.                                         elImg.spacegallery.origHeight = imgEl.height
  137.                                         if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
  138.                                         
  139.                                             EYE.spacegallery.positionImages(el);
  140.                                         }
  141.                                     };
  142.                                 }
  143.                             });
  144.                         el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
  145.                         el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
  146.                         if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
  147.                             EYE.spacegallery.positionImages(el);
  148.                         }
  149.                     }
  150.                 });
  151.             }
  152.         }
  153.     });
  154.     
  155.     $.fn.extend({
  156.     
  157.         /**
  158.          * Create a space gallery
  159.          * @name spacegallery
  160.          * @description create a space gallery
  161.          * @option  int         border          Images' border. Default: 6
  162.          * @option  int         perspective     Perpective height. Default: 140
  163.          * @option  float       minScale        Minimum scale for the image in the back. Default: 0.2
  164.          * @option  int         duration        Animation duration. Default: 800
  165.          * @option  string      loadingClass    CSS class applied to the element while looading images. Default: null
  166.          * @option  function    before          Callback function triggered before going to the next image
  167.          * @option  function    after           Callback function triggered after going to the next image
  168.          */
  169.         spacegallery: EYE.spacegallery.init
  170.     });
  171.     $.extend($.easing,{
  172.         easeOut:function (x, t, b, c, d) {
  173.             return -c *(t/=d)*(t-2) + b;
  174.         }
  175.     });


y Aqui el HTML

Código HTML: 
Ver original
  1. <head>
  2.         <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
  3.         <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
  4.         <link rel="stylesheet" media="screen" type="text/css" href="css/custom.css" />
  5.         <script type="text/javascript" src="js/jquery.js"></script>
  6.         <script type="text/javascript" src="js/eye.js"></script>
  7.         <script type="text/javascript" src="js/utils.js"></script>
  8.         <script type="text/javascript" src="js/spacegallery.js"></script>
  9.         <script type="text/javascript" src="js/layout.js"></script>
  10.         
  11.         
  12.         <script type="text/javascript">
  13.             $(document).ready(function (){
  14.                 $("#myGallery").spacegallery({loadingClass: 'loading'});
  15.             });
  16.         </script>
  17.         
  18.     </head>
  19.  
  20. <body>
  21.         
  22.                 <div id="myGallery" class="spacegallery">
  23.                     <img src="images/images_menu_slider/OrangeHRM.jpg" alt="" />
  24.                     <img src="images/images_menu_slider/SugarCRM.jpg" alt="" />
  25.                     <img src="images/images_menu_slider/OrangeHRM.jpg" alt="" />
  26.                     <img src="images/images_menu_slider/SugarCRM.jpg" alt="" />
  27.                     <img src="images/images_menu_slider/OrangeHRM.jpg" alt="" />
  28.                     <img src="images/images_menu_slider/SugarCRM.jpg" alt="" />
  29.                 </div>
  30. </body>

y el css x siak

Código CSS: 
Ver original
  1. .spacegallery {
  2.     position: relative;
  3.     overflow: hidden;
  4. }
  5. .spacegallery img {
  6.     position: absolute;
  7.     left: 50%;
  8. }
  9. .spacegallery a {
  10.     position: absolute;
  11.     z-index: 0;
  12.     display: run-in;
  13.     top: 0;
  14.     left: 0;
  15.     width: 100%;
  16.     height: 100%;
  17.     background: url(images/blank.gif);
  18. }

Espero puedan responder gacias
  #2 (permalink)  
Antiguo 23/12/2010, 13:57
 
Fecha de Ingreso: enero-2009
Mensajes: 20
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ejecutar evento Jquery al abrir mi pagina
bueno ya que nadie me respondia me vi obligado a aprender ingles.... y encontre la solucion...nadie m rspondia pero d toas maneras gracias...al moderador x cambiarme en el TEMA...jeje

http://www.webdeveloper.com/forum/showthread.php?t=237964

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:05.