Foros del Web » Programando para Internet » Jquery »

imagen por defecto en jquery?

Estas en el tema de imagen por defecto en jquery? en el foro de Jquery en Foros del Web. graacias a mayid encontre lo que queria que era un slide a pantalla completa con el jquery ahora necesitaría saber como poder poner que una ...
  #1 (permalink)  
Antiguo 30/11/2009, 12:34
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
imagen por defecto en jquery?

graacias a mayid encontre lo que queria que era un slide a pantalla completa con el jquery ahora necesitaría saber como poder poner que una imagen se ponga por defecto, por ejemplo la imagen 4 de la lista de 7-8

y sinceramente estoy algo bastante perdido en esto del jquery, vamos que no se si quiera si se puede XD

he probado a cambiar el valor de li:first, y poner third incluso last pero no lo consigo

además que también quisiera quitar el autoreproduccion, limitar la reproduccion a solo el uso y la navegacion de los botones, orientadme un poco por favor!

os pego el codigo del script (demasiado tocho, pero si no está entero si que os perdeis, perdon por las molestias!

Código:
$(document).ready(function() {

	//Speed of the slideshow
	var speed = 5000;
	
	//You have to specify width and height in #slider CSS properties
	//After that, the following script will set the width and height accordingly
	$('#mask-gallery, #gallery li').width($('#slider').width());	
	$('#gallery').width($('#slider').width() * $('#gallery li').length);
	$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

	
	//Assign a timer, so it will run periodically
	var run = setInterval('newsscoller(0)', speed);	
	clearInterval(run);
	$('#gallery li:first, #excerpt li:first').addClass('selected');

	//Pause the slidershow with clearInterval
	$('#btn-pause').click(function () {
		clearInterval(run);
		return false;
	});

	//Continue the slideshow with setInterval
	$('#btn-play').click(function () {
		run = setInterval('newsscoller(0)', speed);	
		return false;
	});
	
	//Next Slide by calling the function
	$('#btn-next').click(function () {
		newsscoller(0);	
		return false;
	});	

	//Previous slide by passing prev=1
	$('#btn-prev').click(function () {
		newsscoller(1);	
		return false;
	});	
	
	//Mouse over, pause it, on mouse out, resume the slider show
	$('#slider').hover(
	
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('newsscoller(0)', speed);	
		}
	); 	
	
});


function newsscoller(prev) {

	//Get the current selected item (with selected class), if none was found, get the first item
	var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
	var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

	//if prev is set to 1 (previous item)
	if (prev) {
		
		//Get previous sibling
		var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
		var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
	
	//if prev is set to 0 (next item)
	} else {
		
		//Get next sibling
		var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
		var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
	}

	//clear the selected class
	$('#excerpt li, #gallery li').removeClass('selected');
	
	//reassign the selected class to current items
	next_image.addClass('selected');
	next_excerpt.addClass('selected');

	//Scroll the items
	$('#mask-gallery').scrollTo(next_image, 400);		
	$('#mask-excerpt').scrollTo(next_excerpt, 400);					
	
}
  #2 (permalink)  
Antiguo 30/11/2009, 12:54
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: imagen por defecto en jquery?

Bueno, esto depende del plugin que estes usando. Algunos traen una opcion para que por ejemplo la foto con el atributo tal salga primera. Cual plugin usas?
  #3 (permalink)  
Antiguo 30/11/2009, 13:11
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

y eso como se sabe? XD

ni idea tio... ni idea....
  #4 (permalink)  
Antiguo 30/11/2009, 13:13
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

como no sea:

jquery-newsslider

xD
  #5 (permalink)  
Antiguo 30/11/2009, 16:10
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: imagen por defecto en jquery?

Me aparecen varios en google. Mejor da el enlace a la pagina de donde lo bajaste, dale?
  #6 (permalink)  
Antiguo 01/12/2009, 03:58
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial

me lo bajé de aqui ^^


no puedo poner enlaces ¬¬


será mejor buscarme otro plugin??

gracias mayid, eres dios xD
  #7 (permalink)  
Antiguo 01/12/2009, 08:16
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: imagen por defecto en jquery?

Visite el sitio. Esta lleno de recursos, asi que alguno voy a implementar en lo mio.

Te cuento que para hacer un slide con tu plugin, lo unico que necesitas es invocar a la funcion goto:

Cita:
//Add this function after newslider function
function goto(item) {
$('#mask-gallery').scrollTo(item, 800);
$('#mask-excerpt').scrollTo(item, 800);
$(item).addClass('selected');
}
Pasando un parametro (el numero de pagina), tenes el autoslide. Peeero, esta solucion hace efectivamente el slide. No comienza desde, digamos, la pagina 4, sino que "va" hacia la pagina cuatro.

Proba esto al final del document.ready:
Cita:
goto("item4");
A ver que te genera.
  #8 (permalink)  
Antiguo 01/12/2009, 13:25
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

pueees no consigo que me genere nada, llama a la funcion entra y ejecuta las acciones pero no realiza movimiento por ningun lado

le he metido un alert dentro de la funcion con el valor que recibe a ver si es el correcto, y si todo correcto, pero no hay ningun movimiento de imagenes, vamos que al abrir la página me muestra el alert con "item 4", pero no realiza movimiento alguno :S:S

maaalo maria XD

graacias^^
  #9 (permalink)  
Antiguo 01/12/2009, 14:08
Avatar de hector2c  
Fecha de Ingreso: noviembre-2007
Ubicación: Perú - Tacna
Mensajes: 979
Antigüedad: 17 años
Puntos: 25
Respuesta: imagen por defecto en jquery?

para acceder al recurso de klamptax debes agregar http://

http://www.queness.com/post/443/jque...ption-tutorial

el demo esta aqui:

http://www.queness.com/resources/htm...der/index.html
__________________
blog: hector2c.wordpress.com
email: [email protected]
  #10 (permalink)  
Antiguo 01/12/2009, 14:10
Avatar de hector2c  
Fecha de Ingreso: noviembre-2007
Ubicación: Perú - Tacna
Mensajes: 979
Antigüedad: 17 años
Puntos: 25
Respuesta: imagen por defecto en jquery?

klamptax, podrias redactar otra vez, cual es tu problema??? deseas que no se de autoplay???
__________________
blog: hector2c.wordpress.com
email: [email protected]
  #11 (permalink)  
Antiguo 01/12/2009, 15:30
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: imagen por defecto en jquery?

Es que tenes que agregar los id y los class names a tu lista! Leete lo que dice en el link que me pasates:

www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial

Punto 4: Pagination Addon Mod
  #12 (permalink)  
Antiguo 02/12/2009, 06:37
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

los ids y los class ya los he añadido en la parte del html, tal y como dice en la web que posteé, pero nada no interactúa entre las imágenes que es el problema que se me presenta.

lo que yo queria conseguir es poner por defecto una de las imagenes nada mas al iniciar la web, y esto lo conseguiria llamando a la funcion al cargar la página, pero claro si la funcion no funciona.... malo! XD

le he puesto alert para hacer un poco de seguimiento al script, comprobar valores de variables y ver hasta donde hace su función.


lo del auto play ya lo he arreglado tal y como quería, tan sólo era comentar una linea que llamaba al setinterval

un saludo!^^


Código:
<script>

       
 $(document).ready(function() {  
   
     //Speed of the slideshow  
     var speed = 5000;  
       
     //You have to specify width and height in #slider CSS properties  
     //After that, the following script will set the width and height accordingly  
     $('#mask-gallery, #gallery li').width($('#slider').width());      
     $('#gallery').width($('#slider').width() * $('#gallery li').length);  
     $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());  
       
     //Assign a timer, so it will run periodically  
   //var run = setInterval('newsslider(0)', speed);    
       
     $('#gallery li:first, #excerpt li:first').addClass('selected');  
   
     //Pause the slidershow with clearInterval  
     $('#btn-pause').click(function () {  
         clearInterval(run);  
         return false;  
     });  
   
     //Continue the slideshow with setInterval  
     $('#btn-play').click(function () {  
         run = setInterval('newsslider(0)', speed);    
         return false;  
     });  
       
     //Next Slide by calling the function  
     $('#btn-next').click(function () {  
         newsslider(0);    
         return false;  
     });   
   
     //Previous slide by passing prev=1  
     $('#btn-prev').click(function () {  
         newsslider(1);    
         return false;  
     });   
       
     //Mouse over, pause it, on mouse out, resume the slider show  
 /*  $('#slider').hover(  
       
         function() {  
             clearInterval(run);  
         },   
         function() {  
             run = setInterval('newsslider(0)', speed);    
         }  
     );   */
    
       
 //Put this inside $(document).ready()  
 //For link/number button  
 $('#links a').click(function () {  
     //stop the slide show  

    // clearInterval(run);  

     //go to the item  
     goto($(this).attr('rel'));      
     //resume the slideshow  
     run = setInterval('newsscoller(0)', speed);   
     return false;  
 });  
       
	   
	   goto("item4"); 
	
	   
 });  
   
   
 function newsslider(prev) {  
   
     //Get the current selected item (with selected class), if none was found, get the first item  
     var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');  
     var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');  
   
     //if prev is set to 1 (previous item)  
     if (prev) {  
           
         //Get previous sibling  
         var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');  
         var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');  
       
     //if prev is set to 0 (next item)  
     } else {  
           
         //Get next sibling  
         var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');  
         var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');  
     }  
   
     //clear the selected class  
     $('#excerpt li, #gallery li').removeClass('selected');  
       
     //reassign the selected class to current items  
     next_image.addClass('selected');  
     next_excerpt.addClass('selected');  

     //Scroll the items  
     $('#mask-gallery').scrollTo(next_image, 800);         
     $('#mask-excerpt').scrollTo(next_excerpt, 800);                    
	} 

 //Add this function after newslider function  
 function goto(item) {  
 alert(item);
     $('#mask-gallery').scrollTo(item, 800);   
     $('#mask-excerpt').scrollTo(item, 800);   
     $(item).addClass('selected');                     
}

</script>
  #13 (permalink)  
Antiguo 02/12/2009, 08:32
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: imagen por defecto en jquery?

pone esto al completar la carga de la pagina

$('#mask-gallery').scrollTo(elementoDeIdGallery, 800);
$('#mask-excerpt').scrollTo(elementoDeIdExcerpt, 800);


en elementoDeIdGallery indicale que elemento de la lista queres que este seleccionado, lo mismo que elementoDeIdExcerpt

por ejemplo si queres el segundo pones:
$('#mask-gallery').scrollTo('#gallery li:eq(1)', 800);
$('#mask-excerpt').scrollTo('#excerpt li:eq(1)', 800);


podes usar el selector que gustes, como un id

$('#mask-gallery').scrollTo('#gallery #selgellery', 800);
$('#mask-excerpt').scrollTo('#excerpt #selexcerpt', 800);

o si queres el ultimo el ultimo

$('#mask-gallery').scrollTo('#gallery li:last', 800);
$('#mask-excerpt').scrollTo('#excerpt li:last', 800);

o sea, la función scrollTo recibe 2 parámetros, el primero es el elemnto al que tiene que ir y el segundo la velocidad
  #14 (permalink)  
Antiguo 02/12/2009, 13:39
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

geenial la respuesta Dany_s, gracias compadre!

no soy capaz de hacer la referencia con id, pero sin con las otras dos alternativas que me ofreces, ahora bien...

lo propio es que aparezca en la que yo quiero directamente, no que se "deslice" creo que esto no se va a poder hacer de esa manera, por lo cual se me ha ocurrido una "alternativa", y pa simular que está en "el centro" la que elija como principal sería hacer que al irse hacia la última, no deslizara hacia la derecha (se verian todas) sino hacía la izquierda, simulando un circulo, me explico?

por ejemplo yo quiero que se muestre:


E F G A B C D --> Siendo A el inicio de la web, pero claro que aparezca de primeras en A, sin pasar por E F G, como creo que esto no va a ser posible, he pensado la opcion de:

Distribuir las capas así:

A B C D E F G

He intentando que al cliquear por ejemplo en la capa G, que "gire" hacia la izquierda, sin pasar por b c d e y f, que llegue a G directamente, esto es posible de hacer??

llamadme iluso!

un saludo^^
  #15 (permalink)  
Antiguo 02/12/2009, 19:21
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: imagen por defecto en jquery?

Probaste un nomero negativo? En vez de 800, pone -800
  #16 (permalink)  
Antiguo 03/12/2009, 03:55
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

geeenial!!!

no hace el movimiento hacia la izquierda, pero si lo pongo que se mueva al cargar la página la velocidad del movimiento coge 0 en vez de 800, y la hace tan rápido que ni se aprecia que se mueve, oséa que realmente empieza en la A (refiriendome al esquema de arriba), pero el movimiento lo hace tan sumamente rápido que es inapreciable (he intuido que el movimiento lo hace rapido, porque le he ido cambiando los valores, averiguando que 0 es el mas rápido y a mas valores, mas lentitud de desplazamiento).

a resumidas cuentas, empieza en A pero rapidamente se mueve a D, que pasa por B y C, pero es imposible darse cuenta que hace este movimiento, por lo cual ya tengo lo que quería, que empiece en el centro, para ahora... desarrollar la web!^^

graaacias mayid, Dany_s, Hector2c conforme vaya avanzando la página os iré dando pinceladas para que la veais, que la verdad tengo un muuuy buen proyecto en mente, un saludo y seguir foreando, me habeis conquistado jaja


un saludo!^^
  #17 (permalink)  
Antiguo 03/12/2009, 06:21
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: imagen por defecto en jquery?

la cosa marcha!

me falta arreglar lo de las transiciones entre páginas, que tengo el "error" localizado, voy a utilizar el método que me dijo dany_s, y funciona casi a la perfeccion tengo esta duda:


Estas lineas funcionan a la perfección, te llevan a la 3ª entrada de la lista

$('#mask-gallery').scrollTo('#gallery li:eq(2)', 0);
$('#mask-excerpt').scrollTo('#excerpt li:eq(2)', 0);

ahora bien, quiero que en vez de ese 2 meter una variable (la que recoge la funcion con el nombre del link que la llama, y así que me lleve a la imagen que yo clickee, he probado:

$('#mask-gallery').scrollTo('#gallery li:eq(dest)', 0);
$('#mask-excerpt').scrollTo('#excerpt li:eq(dest)', 0);

$('#mask-gallery').scrollTo('#gallery li:eq($dest)', 0);
$('#mask-excerpt').scrollTo('#excerpt li:eq($dest)', 0);

y

$('#mask-gallery').scrollTo('#gallery li:eq('dest')', 0);
$('#mask-excerpt').scrollTo('#excerpt li:eq('dest')', 0);

pero nada... me falta solventar esta pequeña duda y a desarrollar!^^
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




La zona horaria es GMT -6. Ahora son las 22:13.