hola tengo un gran problema ya que hace poco termine un curso de diseño web, y no tengo mucha experiencia, asi que tengo en el codigo java script que cuando se inica la pagina las imagenes que en este caso son cuadros, salen de una esquina y se centran en el medio, si pinchas cualquier cuadro se forman varios sin deshacerse y si vuelves a pinchar vuelve a su sitio, entonces me gustaria que las imagenes salieran de todos los puntos de la pagina y se formen en el centro y ese efecto que hace cuando se pincha lo haga solo al terminar de colocarse y solo una vez sin necesidad de pinchar,:
//starts the animation
function start(){
var controlPosition = 0;
$thumbs.each(function(i){
var $thumb = $(this);
var left;
var top;
var right;
var down;
if (controlPosition==0){
left="0px";
top="0px";
right="0px";
down="0px";
}
else if (controlPosition==1){
left= "" + (screen.width - $thumb.width()) + "px";
top="0px";
right="0px";
down="0px";
}
else if (controlPosition==2){
left= "" + (screen.width - $thumb.width()) + "px";
top="" + (screen.height- $thumb.height()) + "px";
right="" + (screen.width - $thumb.width()) + "px";
down="" + (screen.height - $thumb.height()) + "px";
}
else if (controlPosicion==3){
left= "0px";
top="" + (screen.height- $thumb.height()) + "px";
right="0px";
down="0px";
controlPosition = -1;
}
controlPosition++;
}
$im_loading.hide();
//disperse the thumbs in a grid
disperse();
}
//disperses the thumbs in a grid based on windows dimensions
function disperse(){
if(!flg_click) return;
setflag();
mode = 'grid';
//center point for first thumb along the width of the window
var spaces_w = $(window).width()/(per_line + 5);
//center point for first thumb along the height of the window
var spaces_h = $(window).height()/(per_col + 0.6);
//let's disperse the thumbs equally on the page
$thumbs.each(function(i){
var $thumb = $(this);
//calculate left and top for each thumb,
//considering how many we want per line
var left = spaces_w*((i%per_line)+3) - $thumb.width()/2;
var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/2;
//lets give a random degree to each thumb
var r = Math.floor(Math.random()*41)-20;
/*
now we animate the thumb to its final positions;
we also fade in its image, animate it to 115x115,
and remove any background image of the thumb - this
is not relevant for the first time we call disperse,
but when changing from single to grid mode
*/
if(ie)
var param = {
'left' : left + 'px',
'top' : top + 'px'
};
else
var param = {
'left' : left + 'px',
'top' : top + 'px',
};
$thumb.stop()
.animate(param,700,function(){
if(i==nmb_thumbs-1)
setflag();
})
.find('img')
.fadeIn(700,function(){
$thumb.css({
'background-image' : 'none'
});
$(this).animate({
'width' : '115px',
'height' : '115px',
'marginTop' : '2px',
'marginLeft': '2px'
},150);
});
});
}
como veis no se si he puesto bien el codigo que tendria que cambiar? lo del click el efecto que hace este:
//controls if we can click on the thumbs or not
//if theres an animation in progress
//we don't want the user to be able to click
function setflag(){
flg_click = !flg_click
}
/*
when we click on a thumb, we want to merge them
and show the full image that was clicked.
we need to animate the thumbs positions in order
to center the final image in the screen. The
image itself is the background image that each thumb
will have (different background positions)
If we are currently seeing the single image,
then we want to disperse the thumbs again,
and with this, showing the thumbs images.
*/
$thumbs.bind('click',function(){
if(!flg_click) return;
setflag();
var $this = $(this);
current = $this.index();
if(mode == 'grid'){
mode = 'single';
//the source of the full image
var image_src = $this.find('img').attr('src').replace('/thumbs','');
$thumbs.each(function(i){
var $thumb = $(this);
var $image = $thumb.find('img');
//first we animate the thumb image
//to fill the thumbs dimentions
$image.stop().animate({
'width' : '100%',
'height' : '100%',
'marginTop' : '2px',
'marginLeft': '2px'
},150,function(){
//calculate the dimentions of the full image
var f_w = per_line * 116;
var f_h = per_col * 116;
var f_l = $(window).width()/2 - f_w/2
var f_t = $(window).height()/2 - f_h/2
/*
set the background image for the thumb
and animate the thumbs postions and rotation
*/
if(ie)
var param = {
'left' : f_l + (i%per_line)*116 + 'px',
'top' : f_t + Math.floor(i/per_line)*116 + 'px'
};
else
var param = {
'rotate': '0deg',
'left' : f_l + (i%per_line)*116 + 'px',
'top' : f_t + Math.floor(i/per_line)*116 + 'px'
};
$thumb.css({
'background-image' : 'url('+image_src+')'
}).stop()
.animate(param,1200,function(){
//insert navigation for the single mode
if(i==nmb_thumbs-1){
addNavigation();
setflag();
}
});
//fadeout the thumb's image
$image.fadeOut(700);
});
});
}
else{
setflag();
//remove navigation
removeNavigation();
//if we are on single mode then disperse the thumbs
disperse();
}
});
//removes the navigation buttons
function removeNavigation(){
$im_next.stop().animate({'right':'-50px'},300);
$im_prev.stop().animate({'left':'-50px'},300);
}
//add the navigation buttons
function addNavigation(){
$im_next.stop().animate({'right':'0px'},300);
$im_prev.stop().animate({'left':'0px'},300);
}
});
no se como cambiarlo para que no sea click sino que despues de que haga la primera animacion haga esto solo y sin necesidad de ningun click y ya lo haga solo al terminar de cargarse la pagina
espero puedas ayudarme llevo dos semanas intentando encontrar algo en la web pero no hay nada, gracias por tu atencion
