Ayuda por favor jquery

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, tambien quiero implantar de otro codigo que tengo el efecto 3d, te digo el primero que es como lo tengo y no se como mas poder cambiarlo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery.transform-0.9.3.min"></script>
<script type="text/javascript">
//Paul Irish smartresize : http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
//smartresize
jQuery.fn[sr] = function(fn){ return fn ? This.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
</script>
<script type="text/javascript">
$(function() {
//check if the user made the
//mistake to open it with IE
var ie = false;
if ($.browser.msie)
ie = true;
//flag to control the click event
var flg_click = true;
//the wrapper
var $im_wrapper = $('#im_wrapper');
//the thumbs
var $thumbs = $im_wrapper.children('div');
//all the images
var $thumb_imgs = $thumbs.find('img');
//number of images
var nmb_thumbs = $thumbs.length;
//image loading status
var $im_loading = $('#im_loading');
//the next and previous buttons
var $im_next = $('#im_next');
var $im_prev = $('#im_prev');
//number of thumbs per line
var per_line = 6;
//number of thumbs per column
var per_col = Math.ceil(nmb_thumbs/per_line)
//index of the current thumb
var current = -1;
//mode = grid | single
var mode = 'grid';
//an array with the positions of the thumbs
//we will use it for the navigation in single mode
var positionsArray = [];
for(var i = 0; i < nmb_thumbs; ++i)
positionsArray=i;
//preload all the images
$im_loading.show();
var loaded = 0;
$thumb_imgs.each(function(){
var $this = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src'));
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src').replace('/thumbs',''));
});
//starts the animation
function start(){
$im_loading.hide();
//disperse the thumbs in a grid
disperse();
}
//disperses the thumbs in a grid based on windows dimensions AQUI PARA CAMBIAR LOS ESPACIOS ENTRE IMAGENES
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.4);
//center point for first thumb along the height of the window
var spaces_h = $(window).height()/(per_col + 0.9);
//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 AQUI PARA CAMBIAR ALTURA DE LA PAGINA
var left = spaces_w*((i%per_line)+3) - $thumb.width()/2;
var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/1;
//lets give a random degree to each thumb
var r = Math.floor(Math.random()*41)-20;
/*MIRAR AQUI QUE CREO ES PARA LA ANIMACION
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',
...
Respuesta
1
¿Tienes colgada la página en algún sitio? Es que como no tengo las imágenes, no puedo visualizar bien lo que me envías. He referenciado a http://cloud.github.com/downloads/heygrady/transform/jquery.transform-0.9.3.min.js pero sigo sin ver nada.
hola carlos gracias por responderme, si te paso el enlace
http://mareden.dyndns.biz/azespacio/web/ImageEffectsPack/index8b.php,
lo que pasa es que no se que navegador usaras y no lo veras como lo veo yo pero bueno es para que te hagas una idea, nuevamente gracias
Para que cada imagen aparezca de un punto de la pantalla, deberías colocarlas antes de que se llame a la función disperse(), con algo así:
var controlPosicion = 0;
$thumbs.each(function(i){
var $thumb = $(this);
var left
var top;
if (controlPosicion==0){
left="0px";
top="0px"
}
else if (controlPosicion==1){
left= "" + (screen.width - $thumb.width()) + "px";
top="0px"
}
else if (controlPosicion==2){
left= "" + (screen.width - $thumb.width()) + "px";
top="" + (screen.height- $thumb.height()) + "px";
}
else if (controlPosicion==3){
left= "0px";
top="" + (screen.height- $thumb.height()) + "px";
controlPosicion = -1;
}
controlPosicion++;
}
No lo he probado, por lo que seguro que tendrás que cambiar algo. Lo importante es que cojas la idea. Voy imagen por imagen y la voy distribuyendo a una esquina en el sentido de las agujas del reloj.
hola carlos he cogido la idea asi que me pondre a cambiar y pobrar no hay problema, lo otro que te preguntaba si te fijas en la pagina si pinchas en cualquier cuadrado hace un efecto, pero me gustaria que ese efecto se hiciera cuando se colocan en el medio solos sin necesidad de hacer click, y no se vuelva a hacer mas, no se si me explico yo creo que el cambio le tengo que hacer aqui:
/*
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();
si te fijas arriba lo primero es donde esta todo lo que sigue pero no logro ubicarme bien con ello, sobre todo porque flag parece importante y he intentado cambiar flg_click y el mismo click por load, unload, pero nada, gracias por ayudarme
Lo mas facil es que una vez termine la animación, fuerces un click en una imagen:
$thumb_imgs.first().click();
No se decirte en qué momento debes forzar el click. Puede que lo mejor sea poner un setTimeout con un tiempo suficiente para que todas las imágenes estén en su sitio

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas