Refrescar web y cambiar parámetros al hacer clic en un enlace

[alvaro0022]

Hola, existe la posibilidad de recargar una pagina web pero modificar algunos parámetros en la nueva vista?
Al hacer clic recargar la pagina pero con parámetros diferentes. se puede hacer esto con javascript?

[tuadmin]

Iniciado por alvaro0022

Hola, existe la posibilidad de recargar una pagina web pero modificar algunos parámetros en la nueva vista?
Al hacer clic recargar la pagina pero con parámetros diferentes. se puede hacer esto con javascript?

con cookies, o en lugar de refrescar, abrir una Url con un HASH diferente

Código HTML:

<a href="#mostrar_1">Mostrar un valor 1</a>
 
<a href="#mostrar_2">Mostrar un valor </a>
<p id="valor">aca se mostrara el valor </p>
 

Código Javascript:

<script>
window.addEventListener('hashchange', function(e){
var h = window.location.hash;
var p = document.getElementById("valor");
         if(h=='#mostrar_1'){  p.innerText='Se presiono 1';  }
        else{  p.innerText='Se usa ' +h}
}); 
</script>
 

[ArturoGallegos]

@tuadmin me sorprenden esas facultades adivinatorias :D

@alvaro0022 se mas preciso y descriptivo de lo que pretendes conseguir, tu texto actual deja mucho que desear y es difícil comprender que es lo que buscas

[alvaro0022]

Hola, siento no haber explicado bien!

Tengo un sitio creado con wordpress, es una especie de galeria de imagenes, al hacer clic las miniaturas de la pagina principal se habre un popup con la descripcion de la imagen, el autor, y un boton para descargarla, ademas debajo aparecen una serie de imagenes relacionadas!

Esta es una captura!



Lo que quiero hacer es que cuando un usuario haga clic en alguna imagen relacionada no me direccione a la pagina de la imagen, sino que se recargue en el mismo popup la imagen elegida.

No se si se entiende.

Aqui dejo el codigo para por las dudas.

Código:

<article <?php post_class( 'preview preview-' . get_post_type() . ' do-spot' ); ?> id="post-<?php the_ID(); ?>">
	<div class="preview-wrapper">
<a rel="<?php the_ID(); ?>" rel="bookmark">
		<?php if ( ( has_post_thumbnail() && ! post_password_required() ) || koji_get_fallback_image_url() ) : ?>

			<?php the_post_thumbnail('large');?>
	</a>	

		<?php endif; ?>
</div><!-- .preview-wrapper -->

<div class="modal-container">
  <input id="modal-toggle" type="checkbox">

  <div class="modal-backdrop">
    <div class="modal-content" >
        <div class="contenido-post-superior">
  <div class="autor-single">Alvaro Alexis Marega</div>
<div class="autor-web"><a href="https://picalls.com">https://picalls.com/picalls</a></div>
  </div>
  <div class="menu-deracha-post">
  	<div class="votar"></div>
    <div class="descargar"><div class="boton-descargar-single"><a href="<?php 
// Ruta de la imagen destacada (tamaño completo)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_url( $thumbID );
echo $imgDestacada;
?>" download="<?php the_title_attribute ( array( 'post' => get_post_thumbnail_id() ) ); ?>.<?php 
$file = pathinfo( $imgDestacada );
echo $file['extension']; // jpg
?>">
  <div class="boton-descargar"><img class="flecha-boton-down" src="https://picalls.com/wp-content/themes/picalls/imagenes/flecha-descarga.png" alt="flecha descargar">Free Download</div>
  </a></div></div> 
  </div>
    <div class="contiendo-post">
      <?php the_post_thumbnail('large');?>
    </div>	
<div class="tituol-tags">Tags</div>
<div class="tags">
  <?php the_tags(' #','&nbsp&nbsp #'); ?>
</div>

<!-- imagenes relacionadas -->
<div class="imagenes-relacionadas">
<div class="titulo-imagenes-relacionadas">Related images</div>
<div class="contenedor-imagenes-relacionadas">
<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  $tag_ids = array();
  foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  $args=array(
  'tag__in' => $tag_ids,
  'post__not_in' => array($post->ID),
  'posts_per_page'=>5, // Number of related posts to display.
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="miniatura-imagenes-relacionadas"><a href="<?php the_permalink(); ?>"> <div style="background-image: url(<?php the_post_thumbnail_url('thumbnail')?>); height: 130px; width: 100%; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-position: center;">
</div></a>
</div>
<?php
endwhile;
}
wp_reset_query();
}
?>
</div>
</div>

    </div>
  </div>
</div>

</article>

[Panino5001]

Puedes usar css sin javascript, para eso, valiéndote del pseudo-selector :target: http://w3.unpocodetodo.info/css3/eje...ria-target.htm

[alvaro0022]

Gracias por responder, estoy intentando, pero no logro que funcione, creo que el problema esta en el css del modal

Código:

<style>

.modal-container {

}



.modal-container .modal-backdrop {
  height: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in;
}

.modal-container #modal-toggle {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}



.modal-container #modal-toggle:checked {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  opacity: 0;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  cursor: default;
  opacity: 1;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content {
  background-color: #fff;
  width: 90%;
  height: 100%;
  padding: 10px 30px;
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 4px;
  z-index: 999;
  pointer-events: auto;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 30px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
  overflow: scroll;
  overflow-x: hidden;
  border-radius: 3px;
}





@media (max-width: 400px) {

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content { left: 0; }
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close {
  color: #666;
  position: absolute;
  right: 2px;
  top: 0;
  padding-top: 7px;
  background: #fff;
  font-size: 16px;
  width: 25px;
  height: 28px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button {
  top: initial;
  bottom: 20px;
  right: 20px;
  background: #4CAF50;
  color: #fff;
  width: 50px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button:hover {
  color: #fff;
  background: #1E824C;
}





.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close:hover { color: #333; }


</style>

instalando otros tipos de modal tampoco funciona, modal con javascript tampoco, no se que puede estar ocurriendo.

Alguna idea?

[alvaro0022]

Hasta el momento logre lo siguiente. Al hacer clic en una imagen de la galería (1), esta se abre en un popup (2), donde figura el nombre del autor, un botón para descargar y las imágenes relacionadas, como se ve en la imagen. El problema es que al hacer clic en las imágenes relacionadas (3), el popup se cierra y abre la pagina en una pantalla completa (4). Lo que quiero lograr es que se refresque el popup con la nueva imagen.



En el punto 4 se puede ver que el popup se cierra y se ve el contenido en la pantalla completa del explorador.