onclick en href automatico

mascamasca · #1 (**permalink**) 03/08/2012, 04:36

Buenos días.
Me gustaría saber si se puede pedir en el onload del body que haga un onclick a un ancla de una galería de imagenes.
La galería tiene un menú que según la opción que pulses hace un filtrado y recoloca las imagens que corresponden, todo ello dentro de la misma página sin salirse a otra.

El problema que tengo es que cuando carga la página no muestra las imágenes pero sí los huecos de ellas, y si pinchas en el menú de la galería las recoloca y muestra las fotos.
Es un poco extraño porque si coloco una imagen que tengo para maquetar, aunque lea de la BBDD cómo la imágen es la misma si que la muestra, pero si le digo que coja el nombre de la imágen de la BBDD no las muestra hasta que no hace el filtrado.

Un saludo y muchas gracias.

furoya · #2 (**permalink**) 03/08/2012, 06:53

Más que un

Código:

<body onload = "document.getElementById('anclaDeUnaGaleria').click()" >

lo que deberías hacer es confirmar si esa ancla no dispara una función que recoloca las fotos.

Si es así, lo que deberías hacer es

Código:

<body onload = "recolocaFotos(parametroInicial)" >

Para cualquier otro problema, deberíamos ver la página. Porque es muy raro que en el escript no esté previsto que se cargue todo al inicio.

emprear · #3 (**permalink**) 03/08/2012, 14:23

Me estoy perdiendo de algo?
Por que no hacer que el onload cargue la función que supuestamente ejecuta el evento onclick? (aunque sospecho que hay algo de Jquery dando vueltas por ahi)

furoya · #4 (**permalink**) 03/08/2012, 14:44

Cita:

Iniciado por emprear

Por que no hacer que el onload cargue la función que supuestamente ejecuta el evento onclick?

Qué casualidad, justo eso le estaba comentando.

Cita:

Iniciado por emprear

aunque sospecho que hay algo de Jquery dando vueltas por ahi

No me sorprendería. Pero la solución es la misma. De última, se edita el JQ.

Por eso tuve la precaución de reclamar el código.

(Ahora lo único que falta es que aparezca posteado el contenido del archivo jquery. Y sin las etiquetas de código.

)

mascamasca · #5 (**permalink**) 04/08/2012, 01:59

Muy buenas a todos y muchas gracias por las respuestas.
Teneis razón en lo del jquery puesto que es una funcion para recolocar las fotos deslizandolas.
Ya no estoy en la oficina y hasta el lunes no lo podré probar pero la respuesta de furoya sobre el getElementById, que porcierto se me había olvidado completamente es la que me va a funcionar seguro, o eso creo.

En un par de días os diré si ha funcionado o si no os paso el código por si hay suerte y lo podemos sacar.

La verdad es que me tiene de cabeza.

De verdad muchas gracias por todo y un saludo.

mascamasca · #6 (**permalink**) 06/08/2012, 09:00

Disculpar la tardanza.
Los anclas donde se realiza el filtro son estos:

Código:

<ul class="folio-filter">
        <li><a id="inicio" href="#" filter="">Todas</a></li>
		<li><a href="#" filter="class:1">Aglomeradoras</a></li>
		<li><a href="#" filter="class:2">Centr&iacute;fugas</a></li>
		<li><a href="#" filter="class:3">Cortadora bolsas de papel</a></li>
		<li><a href="#" filter="class:4">Cortadoras resmadoras</a></li>
        <li><a href="#" filter="class:5">Cortadoras - soldadoras de Pl&aacute;stico</a></li>
        <li><a href="#" filter="class:6">Extrusoras</a></li>
        <li><a href="#" filter="class:7">Extrusoras de tuber&iacute;a</a></li>
        <li><a href="#" filter="class:8">Generadores</a></li>
        <li><a href="#" filter="class:9">Guillotinas</a></li>
        <li><a href="#" filter="class:10">Impresoras - Parafinadoras</a></li>
        <li><a href="#" filter="class:11">Impresoras</a></li>
        <li><a href="#" filter="class:12">Laminadoras</a></li>
        <li><a href="#" filter="class:13">Molinos</a></li>
        <li><a href="#" filter="class:14">Plastificadoras</a></li>
        <li><a href="#" filter="class:15">Prensas</a></li>
        <li><a href="#" filter="class:16">Rebobinadoras</a></li>
        <li><a href="#" filter="class:17">Recuperadoras de pl&aacute;stico</a></li>
        <li><a href="#" filter="class:18">Varios</a></li>
    </ul>

Y es un jquery.

No se si os valdrá ésto.

Porque poner todo el jquery es demasiado.
Un saludo.

mascamasca · #7 (**permalink**) 06/08/2012, 09:04

Como habeis dicho la función carga todas las imágenes al principio, pero no se ven, y una vez pulsado en cualquiera de las opciones realiza el filtro y ya si que las muestra, y si le das a mostrar todas ya se ven.

Me explico:

Inicia la página y aparece el hueco expandido como si estuvieran las imágenes pero sólo las imágenes no se ven. si llevo el ratón hacia donde supuestamente hay una imágen y le doy click se muestra en grande.
Si pulso por ejemplo a ver todas ya sí que aparece la imágen.

Os pongo el jquery pero es muy largo. Si os enterais de algo decirmelo porque yo estoy muy perdido.

Código:

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};
if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};
c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3($){3 8(b,c,d,f){6(u $.v.m!=\'3\'){J("K: m L M N O");9}
6(!(b.n&&c.n)){9}4 g=2;2.o=b;2.x=b.p().y();2.7=q;2.z=d;2.A=3(){6(u f==\'3\'){f(g.o)}};c.P(3(e){g.j($(2).k(\'5\'));4 a=$(2).B();a.Q(\'.l-5\').R(\'l-5\');a.C(\'l-5\');e.S()}).T(0).B().C(\'l-5\');b.p().r(\'D\',0);b.r({\'E\':\'U("V/W.X")\',\'Y\':\'F% F%\',\'Z\':\'10-11\'});
4 h=b.j(\'G\').n;b.j(\'G\').12(\'13\',3(){h--;6(h==0){b.r({\'E\':\'14\'});b.p().15(3(i){$(2).16({\'D\':1},17)})}})}
8.s.5=3(a){2.7=2.7.5(a)};8.s.t=3(c){6(c!=\'\'){2.7.t(3(a,b){9 H($(b).k(c))-H($(a).k(c))})}};8.s.j=3(a){4 b="*";4 c=\'\';4 d=a.I(/;?18:(\\w+);
?/);6(d!==q){b=\'.\'+d[1]}4 d=a.I(/;?k:(\\w+);?/);6(d!==q){c=d[1]}2.7=2.x.y();2.t(c);2.5(b);4 e=2;2.o.m(2.7,2.z,2.A)};$.v.19=3(a,b){4 c=1a 8($(\'.1b-1c\',2),$(\'a[5]\',2),a,b);9 2}})(1d);',62,76,'||this|function|var|filter|if|setTempCopy|PortfolioFilter|return||||||||||find|attr|active|quicksand|length|set|children|null|css
|prototype|sort|typeof|fn||setCopy|clone|quicksandConf|afterCallback|parent|addClass|opacity|backgroundImage|50|img|parseInt|match
|alert|portfolio|plugin|is|not|loaded|click|siblings|removeClass|preventDefault|eq|url|images|loader|gif|backgroundPosition
|backgroundRepeat|no|repeat|bind|load|none|each|animate|500|class|portfolioFilter|new|folio|list|jQuery'.split('|'),0,{}))

mascamasca · #8 (**permalink**) 06/08/2012, 09:11

Bueno acabo de probar lo que me habéis puesto del Onload

Código:

onload = "document.getElementById('anclaDeUnaGaleria').click()"

Y si que las ha mostrado.

Muchísimas pero muchísimas gracias por la respuesta.
Os lo agradezco enormemente.

Un saludo.

emprear · #9 (**permalink**) 06/08/2012, 09:11

@mascamasca
Disculpame la franqueza,
El hecho de que nos muestres el contenido de la librería y no el javascript que estás utilizando me lleva inevitablemente a hacerte esta pregunta:
¿Tenés idea de lo que estás haciendo, o simplemente estás copiando y pegando código de algún otro lado?

mascamasca · #10 (**permalink**) 06/08/2012, 09:52

No pasa nada.

Primeramente sé lo que hago pero es una librería que he encontrado para hacer el filtrado de imágenes y me iba bien con la imágen que pongo siempre de prueba, pero al meter ya las de la bbdd me hacía esto que os he contado.

El Jquery llevo relativamente poco tiempo empleándolo y todavía hay cosas que no las controlo muy bien.
Disculpar mi pequeña ignorancia en éste aspecto.

Y tienes razón porque con el follón que tengo aquí en el curro no os he puesto lo que interesa.

Código:

(function($){

    /**********************************************
     *   PORTFOLIO FILTER WITH QUICKSAND
     **********************************************/
     
    // PortfolioFilter constructor
    //    set - initial set of objects (<ul> element)
    //    filters - elements that have "filter" attr and define filter rules
    //    conf - configuration object for "quicksand" plugin
    //	  callback - function to run on new item set after rearrange with quicksand
    
    function PortfolioFilter(set,filters,conf,callback){
        //check if "quicksand" is loaded
        if(typeof $.fn.quicksand != 'function'){
	        alert("portfolio: quicksand plugin is not loaded");
            return;
        }
        // make sure we have something to sort
       	if(!(set.length && filters.length)){
	       return;
       	}
        
        //save ref to "PortfolioFilter" object in local variable
        var ref = this;
        this.set = set;
        this.setCopy = set.children().clone();
        this.setTempCopy = null;
        this.quicksandConf = conf;
        this.afterCallback = function(){
        	if(typeof callback == 'function'){
        		callback(ref.set);
        	}
        };
 		//add click handlers to portfolio filters
        filters.click(function(e){
            ref.find($(this).attr('filter'));
            //apply active class to filter
            var link_wrap = $(this).parent();
            link_wrap.siblings('.active-filter').removeClass('active-filter');
            link_wrap.addClass('active-filter');
            e.preventDefault();
        }).eq(0).parent().addClass('active-filter');
        
        // portfolio preload (preloadImage,preloadTime)
        set.children().css('opacity',0);
        set.css({'backgroundImage':'url("images/loader.gif")','backgroundPosition':'50% 50%','backgroundRepeat':'no-repeat'});
        var set_length = set.find('img').length;
        set.find('img').bind('load',function(){
        	set_length--;
			if(set_length == 0){
				set.css({'backgroundImage':'none'});
				set.children().each(function(i){
					$(this).animate({'opacity':1},500);
				});
			}
        });
    }
    
    // method to filter elements (uses .filter() jquery function)
    PortfolioFilter.prototype.filter=function(by){
      this.setTempCopy = this.setTempCopy.filter(by);
    };
    
    // method to sort elements (uses numeric sorting by attr values)
    PortfolioFilter.prototype.sort=function(by){
        if(by != ''){
            this.setTempCopy.sort(function(a,b){
                return parseInt($(b).attr(by)) - parseInt($(a).attr(by));
            });
        }
    };

	// method that uses filter() and sort() to find final set of elements 
    PortfolioFilter.prototype.find=function(filter){
        var filter_class="*";
        var filter_attr='';
        //look for 'class'
        var filter_value = filter.match(/;?class:(\w+);?/);
        if(filter_value !== null){
            filter_class = '.'+filter_value[1];
        }
        //look for 'attr'
        var filter_value = filter.match(/;?attr:(\w+);?/);
        if(filter_value !== null){
            filter_attr = filter_value[1];
        }
        this.setTempCopy = this.setCopy.clone();
        this.sort(filter_attr);
        this.filter(filter_class);
        //realign items with quicksand
        var ref = this;
        this.set.quicksand(this.setTempCopy,this.quicksandConf,this.afterCallback);
    };
    
    
    //create jQuery plugin
    $.fn.portfolioFilter = function(quicksand,callback){        
       var filter = new PortfolioFilter($('.folio-list',this),$('a[filter]',this),quicksand,callback); 
       //chaining
       return this;
    }
  
})(jQuery);

mascamasca · #11 (**permalink**) 03/09/2012, 11:26

Me he dado cuenta que en el IE9 no me deja hacer la opción del onclick en el body.
Habría alguna otra opción posible?
Gracias.

furoya · #12 (**permalink**) 23/09/2012, 13:44

No creo.
<body onload="document.getElementById('inicio').fireEven t('onclick')">
solamente dispara al atributo, si existe. Lo mismo pasa con
<body onload="document.getElementById('inicio').onclick( )">.
Usando <body onload="var alfa = document.getElementById('bravo'); alfa.click.call(alfa);"> hace el click, pero seguramente el IE9 tampoco lo va a reconocer.
Es que allí tienes enlaces ... que no apuntan a nada, pero están. Entonces debe generar el evento 'click' (¿probaste cambiar, no sé, a onfocus?)

Yo revisaría de una vez por qué no carga desde el comienzo. Se me ocurren varias pruebas para hacer, pero ni tengo un IE9, ni sé qué tan completo está eso que posteaste, o si borraste o editaste algo antes de publicarlo (¿la clase vacía es para que no la vea en el filtrado, o la usa y le falta un 0?). Tampoco sé qué te dice la consola o si te avisa que falta algún plugin o que aún no terminó de cargar el DOM al ejecutar (¿probaste <script defer src="miPlugin.js"></script>, aunque sea para IE?).

La verdad es que tiraría esa library al tacho y haría una nueva, que se portase como debe.

Generar un click automáticamente

Disparar un evento asignado con Event.observe

Como llamar evento desde otro evento?

mascamasca · #13 (**permalink**) 03/10/2012, 09:28

La verdad es que ya me funciona.
Lo he puesto con:
<body onload = "document.getElementById('inicio').click()">

furoya tus ejemplos me han dado muchas ideas.

Muchas gracias por vuestros aportes.
Un saludo.