Skip to main content
Links caidos arreglados
Origen Enlace
Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26
Complementación
Origen Enlace
Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26
// Obtenemos el valor de la cookie selected que almacenamos mas abajo. 

var estateCookiestateCookie = Cookies.get("selected"); 

// Agregamos el valor de la cookie a un query selector que ya vimos como armar (no almacenamos/seteamos la cookie aquí) y hacemos los cambios, preferiblemente con .load() condicionando para que no funcione si la cookie no existe aun. 

if (stateCookie != undefined) {

  $(".image").removeClass("selected");
  $("#"+stateCookie).addClass("selected");

}


$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){
  
    $(".image").hide();  
    $(".image").removeClass("selected");        
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");

    // Con cada click seteamos una cookie llamada selected con el valor de id del la foto actual, que requerimos arriba.

    Cookies.set("selected", $(this).attr("rel"));
  
  });

});

Aquí te dejo un fiddle funcional.

// Obtenemos el valor de la cookie selected que almacenamos mas abajo. 

var estateCookie = Cookies.get("selected"); 

// Agregamos el valor de la cookie a un query selector que ya vimos como armar (no almacenamos/seteamos la cookie aquí) y hacemos los cambios, preferiblemente con .load()

$(".image").removeClass("selected");
$("#"+stateCookie).addClass("selected");


$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){
  
    $(".image").hide();  
    $(".image").removeClass("selected");        
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");

    // Con cada click seteamos una cookie llamada selected con el valor de id del la foto actual, que requerimos arriba.

    Cookies.set("selected", $(this).attr("rel"));
  
  });

});
// Obtenemos el valor de la cookie selected que almacenamos mas abajo. 

var stateCookie = Cookies.get("selected"); 

// Agregamos el valor de la cookie a un query selector que ya vimos como armar (no almacenamos/seteamos la cookie aquí) y hacemos los cambios, preferiblemente con .load() condicionando para que no funcione si la cookie no existe aun. 

if (stateCookie != undefined) {

  $(".image").removeClass("selected");
  $("#"+stateCookie).addClass("selected");

}


$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){
  
    $(".image").hide();  
    $(".image").removeClass("selected");        
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");

    // Con cada click seteamos una cookie llamada selected con el valor de id del la foto actual, que requerimos arriba.

    Cookies.set("selected", $(this).attr("rel"));
  
  });

});

Aquí te dejo un fiddle funcional.

Correcciones
Origen Enlace
Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26

Para el siguiente ejemplo utilizaremos solo una clase para los botones y lo relacionaremos con el contenido que quieres mostrar, también en lugar de tener un estilo que haga visible una clase permanentemente, lo haremos cada vez que se ejecute el código.

Con Jquery podemos decidir cual imagen mostrar y cual no utilizando el método que te sea conveniente, en este caso utilizaremos un atributo para relacionar nuestro botón a la imagen, al que le colocaremos la id de la misma quedando así rel="imagen00". Después armamos un query selector para obtener el id de la imagen correspondiente al botón presionado, algo así $("#"+$(this).attr("rel")) y es todo, mira el código:

// Mostramos la etiqueta que tenga la clase selected

$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){
  
    //Al hacer click eliminamos la clase selected y escondemos las clases .image.
  
    $(".image").hide();  
    $(".image").removeClass("selected");
    
    //Tambien cargamos la imagen actual gracias al atributo rel que usamos como id y le agregamos la clase selected a la misma.
    
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");
  
  });

});
.image {

 display: none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image01" class="image selected">
  <img src="https://www.african.cam.ac.uk/images/secondlevel/dasshills/image_preview">
</div>

<div id="image02" class="image">
  <img src="https://data.whicdn.com/images/60436988/large.png">
</div>

<div id="image03" class="image">
  <img src="https://www.tawbaware.com/maxlyons/crop_8.jpg">
</div>

<!-- Usamos una sola clase para los botones, así es mas sencillo de manejar--> 
<!-- Tambien agregamos nuestro relativo con la id de cada imagen-->

<button rel="image01" class="change">Picture 1</button>
<button rel="image02" class="change">Picture 2</button>
<button rel="image03" class="change">Picture 3</button>

Para el siguiente ejemplo utilizaremos solo una clase para los botones y lo relacionaremos con el contenido que quieres mostrar.

Con Jquery podemos decidir cual mostrar y cual no utilizando el método que te sea conveniente, en este caso utilizaremos un atributo para relacionar nuestro botón a la imagen, al que le colocaremos la id de la misma quedando así rel="imagen00". Después armamos un query selector para obtener el id de la imagen correspondiente al botón presionado, algo así $("#"+$(this).attr("rel")) y es todo, mira el código:

$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){
  
    //Al hacer click eliminamos la clase selected y escondemos las clases .image.
  
    $(".image").hide();  
    $(".image").removeClass("selected");
    
    //Tambien cargamos la imagen actual gracias al atributo rel que usamos como id y le agregamos la clase selected a la misma.
    
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");
  
  });

});
.image {

 display: none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image01" class="image selected">
  <img src="https://www.african.cam.ac.uk/images/secondlevel/dasshills/image_preview">
</div>

<div id="image02" class="image">
  <img src="https://data.whicdn.com/images/60436988/large.png">
</div>

<div id="image03" class="image">
  <img src="https://www.tawbaware.com/maxlyons/crop_8.jpg">
</div>

<button rel="image01" class="change">Picture 1</button>
<button rel="image02" class="change">Picture 2</button>
<button rel="image03" class="change">Picture 3</button>

Para el siguiente ejemplo utilizaremos solo una clase para los botones y lo relacionaremos con el contenido que quieres mostrar, también en lugar de tener un estilo que haga visible una clase permanentemente, lo haremos cada vez que se ejecute el código.

Con Jquery podemos decidir cual imagen mostrar y cual no utilizando el método que te sea conveniente, en este caso utilizaremos un atributo para relacionar nuestro botón a la imagen, al que le colocaremos la id de la misma quedando así rel="imagen00". Después armamos un query selector para obtener el id de la imagen correspondiente al botón presionado, algo así $("#"+$(this).attr("rel")) y es todo, mira el código:

// Mostramos la etiqueta que tenga la clase selected

$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){
  
    //Al hacer click eliminamos la clase selected y escondemos las clases .image.
  
    $(".image").hide();  
    $(".image").removeClass("selected");
    
    //Tambien cargamos la imagen actual gracias al atributo rel que usamos como id y le agregamos la clase selected a la misma.
    
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");
  
  });

});
.image {

 display: none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image01" class="image selected">
  <img src="https://www.african.cam.ac.uk/images/secondlevel/dasshills/image_preview">
</div>

<div id="image02" class="image">
  <img src="https://data.whicdn.com/images/60436988/large.png">
</div>

<div id="image03" class="image">
  <img src="https://www.tawbaware.com/maxlyons/crop_8.jpg">
</div>

<!-- Usamos una sola clase para los botones, así es mas sencillo de manejar--> 
<!-- Tambien agregamos nuestro relativo con la id de cada imagen-->

<button rel="image01" class="change">Picture 1</button>
<button rel="image02" class="change">Picture 2</button>
<button rel="image03" class="change">Picture 3</button>
Correcciones
Origen Enlace
Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26
Loading
Origen Enlace
Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26
Loading