Como establecer elemento seleccionado como primero?

Juanjo87 · 20 Dic 2016

Buenas a todos, tengo creada una función en jquery que al cargar el documento, reconoce las imágenes que hay dentro de una galería y automáticamente, el código establece a la primera imagen de la galería como primera, y después puedo avanzar por las imágenes cargando su contenido, con los botones siguiente y atrás. Hasta aquí todo bien.

Lo que no soy capaz es de establecer la imagen seleccionada como primera para que aparir de esa, cuando de a los botones siguientes o atrás, estos me llevan la siguiente imagen o a la anterior de esta.

Actualmente, cuando presiono el botón siguiente, por ejemplo, este siempre me lleva a la segunda imagen de la galería, aunque yo aya entrado en la quinta. Al establecerse la primera imagen como primera al cargar el documento esto es normal, lo que no se, como puedo cambiar ese orden y asignar la primera imagen de la galería en la que hago click.

Perdonen si es mucho o si no me entienden, he intentado expresarme lo mejor posible para que comprendáis lo que pretendo hacer.

Este es el código

PHP:

<script>

$(document).ready(function() {
    var divs = $('#carousel-accion>li a');
    var now = 0; // currently shown div
    divs.css("border", "0").first().css("border", "solid 1px white"); // hide all divs except first
	
	
    $("button[name=next]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now + 1 < divs.length) ? now + 1 : 0;
	divs.eq(now).click();

    });
	
	
	
    $("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).click();
    });
});

</script>

[SOLUCIÓN POR: Sevilla666, ultima pagina]

sevilla666 · 20 Dic 2016

Tienes:

Insertar CODE, HTML o PHP:

var now = 0; // currently shown div

Que el 0 hace referencia al primer div.
Cuando le des a la funcion de seleccionar otro div (en este código que muestras no sale esa función) tienes que cambiar el valor de now.

Saludos

Juanjo87 · 20 Dic 2016

No consigo entenderte, la función que selecciona otro div si aparece, es esta

PHP:

<script>
 $("button[name=next]").click(function() { 
        divs.eq(now).css("border", "0"); 
        now = (now + 1 < divs.length) ? now + 1 : 0; 
    divs.eq(now).click(); 

    }); 
</script>

sevilla666 · 20 Dic 2016

A lo mejor no he entendido bien.
Creo entender:
Abres la página (now=0) y le das al boton siguiente y vas al siguiente div (now=1). (sin problemas)
Y si le das atraś vuelve al div primero (now=0). (sin problemas)
Pero si le das click encima de un div por ejemplo el tercero pasa al tercero y (now sigue siendo 0) cuando le vuelves a dar a siguiente, en vez de irte al cuarto va al segundo now=1)

Es como te digo?? o he entendido mal?.

Juanjo87 · 20 Dic 2016

si si, es exactamente así.

al cargar la pagina, el primer div de la lista es 0 entonces yo quiero que al hacer click sobre otro div de la lista, este pase a ser 0 para que al darle a siguiente me muestre el siguiente a este sabes?

sevilla666 · 20 Dic 2016

No tienes que cambiar el div a valor 0.
Tienes que cambiar la variable now al valor que tenga el div que has clickado directamente.

No entiendo mucho de Jquery, pero ahi no tienes la función que tienes que modificar.
No es la misma función la que llama al boton adelante o atras, Que la funcion que haces click directamente al div.

Juanjo87 · 20 Dic 2016

ya vale, no la tengo por que aun no lo he conseguido y no e querido ponerla para no ensuciar el codigo pero seria algo asi

PHP:

<script>
$('#carousel-accion>li a').click(function() {
 var divs = $(this);
    var now = 0; // currently shown div

// o asi, pero tampoco
var now = $(this).eq(0)

});

</script>

asi es como lo estoy intentando pero no funciona

el codigo quedaria algo asi (este es el ultimo que e probado pero no funciona)

PHP:

<script>

$(document).ready(function() {
    var divs = $('#carousel-accion>li a');
    var now = 0; // currently shown div
    divs.css("border", "0").first().css("border", "solid 1px white"); // hide all divs except first
	
	
	
	$('a').click(function() {

	var divs = $('#carousel-accion>li a');
	var now = $(this).eq(0)
	
	
	
    $("button[name=next]").click(function() {
        divs.eq(now).css("border", "0");
		
        now = (now + 1 < divs.length) ? now + 1 : 0;
		
  
	  
	  
	   divs.eq(now).click();
	   
	   

    });
	
	
	
	
	
    $("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).click();
    });
	
	});
});</script>

sevilla666 · 20 Dic 2016

La verdad ahora mismo no se decirte y no tengo tiempo ahora.
Si mañana no te han contestado y no lo has solucionado te responderé.

Saludos

Juanjo87 · 20 Dic 2016

vale gracias

jsstoni · 20 Dic 2016

agrégale un atributo data-posimg a la imagen con su posición donde

HTML:

<img src="..." data-posimg="1">

en jquery tomas la posición de la imagen:

Insertar CODE, HTML o PHP:

var now = $("img").attr("data-posimg");

sevilla666 · 20 Dic 2016

Ok. Te escribo desde el móvil.
Como te han comentado jsstoni esta muy bien, pero entiendo que la página será dinámica y a lo mejor no se adapta bien dinamicamente data-posimg.
Te abro una función pero posiblemente lo puedas poner dentro de otra función y no necesitas poner función nueva.
$(,#carouselaccion.Li a).click(function(){
Var e=$($this).index();
now=e;

Fijate que al escribir con el móvil me faltan comillas y revisalo un poco.

o bien:
now=$($this).index();

Juanjo87 · 20 Dic 2016

nada sevilla no funciona, estoy probando asi

PHP:

<script>
 $('#carousel-accion>li a').click(function() {
	  var divs = $('#carousel-accion>li a');

	  now = $(this).index();
	   
	   $("button[name=next]").click(function() {

        divs.eq(now).css("border", "0");
		
        now = (now + 1 < divs.length) ? now + 1 : 0;
		
	  
	  
	   divs.eq(now).click();
	   
	   

    });
	
$("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).click();
    });
    });
 

</script>

asi tampoco

PHP:

<script>
 $('#carousel-accion>li a').click(function() {
	  var divs = $('#carousel-accion>li a');

	  var e= $(this).index();
now = e;
	   
	   $("button[name=next]").click(function() {

        divs.eq(now).css("border", "0");
		
        now = (now + 1 < divs.length) ? now + 1 : 0;
		
	  
	  
	   divs.eq(now).click();
	   
	   

    });
	
$("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).click();
    });
    });
 

</script>

ya no se que hacer

sevilla666 · 20 Dic 2016

tendrias que poner un alert despues de:

Insertar CODE, HTML o PHP:

now = (now + 1 < divs.length) ? now + 1 : 0;

y otro alert despues de:

Insertar CODE, HTML o PHP:

now = (now > 0) ? now - 1 : divs.length - 1;

asi:

Insertar CODE, HTML o PHP:

alert(now);

y miras despues de darle a la "funcion directa a la imagen" luego en el boton "adelante" o "atras" que te de de resultado now que le corresponde

tambien tendrias que poner alert(now);
despues de:

Insertar CODE, HTML o PHP:

now = $(this).index();

con esto anterior tendrías que llegar a una conclusión

Aún así creo que se corregiria el error cambiando:

Insertar CODE, HTML o PHP:

 $('#carousel-accion>li a').click(function() {

por:

Insertar CODE, HTML o PHP:

$('body').on('click',"#carousel-accion>li a", function()  {

Puede ser también que este equivocado y la solución que te he dado de un principio no este bien, a lo mejor otro que lo lea te orienta mejor.

Saludos
PD. Si lo solucionas dilo

Juanjo87 · 20 Dic 2016

lo siento, hasta ahora no vi la respuesta.
He probado así:

PHP:

<script>
 $('body').on('click',"#carousel-accion>li a", function()  {
      var divs = $("#carousel-accion>li a");

      now = $(this).index();
	  alert(now);
       
       $("button[name=next]").click(function() {

        divs.eq(now).css("border", "0");
        
        now = (now + 1 < divs.length) ? now + 1 : 0;
        alert(now);
      
      
       divs.eq(now).click();
       
       

    });
    
$("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
		alert(now);
        divs.eq(now).click();
    });
    });
 

</script>

así, no hace nada al darle a siguiente ni atrás, la verdad que no entiendo que es lo que esta mal

sevilla666 · 20 Dic 2016

pero te tiene que salir un alerta diciendo el valor de now

Bueno pues
$('body').on('click',"#carousel-accion>li a", function() {
estará mal, pero me estraña porque es como siempre lo utilizo yo.

Prueba a quitar eso y con los alerts a ver si llegas a una conclusión.

Juanjo87 · 20 Dic 2016

mira, asi, me devuelve 1 el alert y si vuelvo a dar pues 2 y asi sucesivamente..

PHP:

<script>$(document).ready(function() {
 var divs = $("#carousel-accion>li a");
 var now = 0; // currently shown div
$('body').on('click',"#carousel-accion>li a", function()  {
     

      now = $(this).index();
	  alert(now);
       
      
    });
	
 $("button[name=next]").click(function() {

        divs.eq(now).css("border", "0");
        
        now = (now + 1 < divs.length) ? now + 1 : 0;
        alert(now);
      
      
       divs.eq(now).click();
       
       

    });
    
$("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
		alert(now);
        divs.eq(now).click();
    });	
	
});

</script>

sevilla666 · 20 Dic 2016

y cuando te da 1 por ejemplo le das directamente a la imagewn 5 ¡que te da? y luego le das atras ¿que te da?

Juanjo87 · 20 Dic 2016

si si, le doy a la imagen 5 y cuando le doy a siguiente me pone 1 y cuando le doy atras, 0

sevilla666 · 20 Dic 2016

ok pues la linea:
now = $(this).index();
no funciona

esa linea cuando le das a la imagen cinco tiene que asignar un valor a now de 4 (alert 4)

luego cuando le das a siguiente tiene que valer now 5 (alert 5)

Juanjo87 · 20 Dic 2016

y se te ocurre como puedo hacerlo funcionar?

Como establecer elemento seleccionado como primero?

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

jsstoni

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

Temas similares