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(' #','   #'); ?>
</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>