¿Cómo puedo agregar una función 'Clic para Ampliar Imagen', con la imagen ampliada abriéndose en una ventana emergente?

Question

¿Cómo puedo agregar una función 'Clic para Ampliar Imagen', con la imagen ampliada abriéndose en una ventana emergente?

19 mar 2013, 11:14:21

Vistas: 28.7K

Votos: 1

Tengo varias imágenes de formularios de interfaz de usuario y tareas que son bastante grandes. Me gustaría mostrar una imagen más pequeña en 'miniatura' y dar al usuario la opción de 'Clic para Ampliar', y luego mostrar la imagen en tamaño completo en una ventana emergente, una ventana separada o una pestaña. Las ventanas emergentes no son muy recomendadas, pero esta es una decisión que aún debo tomar.

¿Cómo podría hacer esto? ¿Dónde debería colocar el JavaScript que carga la imagen en tamaño completo y abre una nueva ventana?

Here's a simple solution you could use / Aquí hay una solución simple que podrías usar:

<!-- HTML -->
<div class="thumbnail-container">
    <img src="small-image.jpg" alt="Vista en miniatura" class="thumbnail" onclick="openImage(this.src)">
    <span class="click-to-enlarge">Clic para ampliar</span>
</div>

<style>
.thumbnail-container {
    position: relative;
    display: inline-block;
}

.thumbnail {
    max-width: 200px;
    cursor: pointer;
}

.click-to-enlarge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
}
</style>

<script>
function openImage(src) {
    // Opción 1: Abrir en ventana emergente
    window.open(src, 'Image', 'width=800,height=600,resizable=yes');
    
    // Opción 2: Abrir en nueva pestaña
    // window.open(src, '_blank');
}
</script>

ProfK

172

imágenes pestañas

Comentarios

¿Qué has investigado/encontrado/intentado? Me parece que estás buscando algo como thickbox/lightbox. WordPress incluye Thickbox integrado, una búsqueda simple en Google debería darte la información que necesitas.

t31os

14 may 2013 12:44:37

Todas las respuestas a la pregunta

Comentarios

Las respuestas deben ser más que un fragmento de código. Por favor, realiza una edición y explica por qué esto funcionaría.

Gabriel

4 dic 2015 23:31:43

No logro ver cómo esto responde remotamente a la pregunta

Pieter Goosen

5 dic 2015 08:31:10

Jamie 1.36K · Answer 1 · 2013-03-19T15:00:08Z

Deberías usar un lightbox para esto. Prueba este. Funciona muy bien

http://lokeshdhakar.com/projects/lightbox2/

Hay instrucciones sobre cómo usarlo y documentación sobre cómo hacerlo funcionar. La descarga también incluye ejemplos y puedes simplemente copiar y pegar el código.

Jamie

1.36K

19 mar 2013 15:00:08

ehtesham 1 · Answer 2 · 2015-12-04T23:10:22Z

<?php get_header(); ?>
<?php get_sidebar();?>
    <div id="content">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>
                    <header class="entry-header">
                        <?php if(has_post_thumbnail()):?>
                            <?php the_post_thumbnail(); ?>
                        <?php endif; ?>
                        <h1 class="entry-title">
                            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Enlace permanente a %s', 'ifoti' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
                        </h1>
                        <?php if ( 'post' == get_post_type() ) : ?>
                        <div class="entry-meta">
                            <?php ifoti_posted_on(); ?>
                        </div><!-- .entry-meta -->
                        <?php endif; ?>
                    </header><!-- .entry-header -->

                    <?php if ( is_search() ) : // Solo muestra extractos para Búsqueda ?>
                    <div class="entry-summary">
                        <?php the_excerpt(); ?>
                    </div><!-- .entry-summary -->
                    <?php else : ?>
                    <div class="entry-content">
                        <?php the_content( __( 'Continuar leyendo <span class="meta-nav">&rarr;</span>', 'ifoti' ) ); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Páginas:', 'ifoti' ) . '</span>', 'after' => '</div>' ) ); ?>
                    </div><!-- .entry-content -->
                    <?php endif; ?>

                    <footer class="entry-meta">
                        <?php $show_sep = false; ?>
                        <?php if ( 'post' == get_post_type() ) : // Oculta categoría y etiquetas para páginas en Búsqueda ?>
                        <?php
                            $categories_list = get_the_category_list( __( ', ', 'ifoti' ) );
                            if ( $categories_list ):
                        ?>
                        <span class="cat-links">
                            <?php printf( __( '<span class="%1$s">Publicado en</span> %2$s', 'ifoti' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
                            $show_sep = true; ?>
                        </span>
                        <?php endif; // Fin si hay categorías ?>
                        <?php
                            $tags_list = get_the_tag_list( '', __( ', ', 'ifoti' ) );
                            if ( $tags_list ):
                            if ( $show_sep ) : ?>
                        <span class="sep"> | </span>
                            <?php endif; // Fin si $show_sep ?>
                        <span class="tag-links">
                            <?php printf( __( '<span class="%1$s">Etiquetado</span> %2$s', 'ifoti' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
                            $show_sep = true; ?>
                        </span>
                        <?php endif; // Fin si hay etiquetas ?>
                        <?php endif; // Fin si 'post' == get_post_type() ?>

                        <?php if ( comments_open() ) : ?>
                        <?php if ( $show_sep ) : ?>
                        <span class="sep"> | </span>
                        <?php endif; // Fin si $show_sep ?>
                        <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Dejar un comentario', 'ifoti' ) . '</span>', __( '<b>1</b> Comentario', 'ifoti' ), __( '<b>%</b> Comentarios', 'ifoti' ) ); ?></span>
                        <?php endif; // Fin si comments_open() ?>
                        <span class="sep"> | </span>
                        <?php edit_post_link( __( 'Editar', 'ifoti' ), '<span class="edit-link">', '</span>' ); ?>
                    </footer><!-- #entry-meta -->
                    <div class="socialbtn">
                        <!-- AddThis Button BEGIN -->
                        <div class="addthis_toolbox addthis_default_style"addthis:url="<?php the_permalink() ?>">
                            <a class="addthis_button_email">Email</a>
                            <a class="addthis_button_print">Imprimir</a>
                            <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                            <a class="addthis_button_tweet"></a>
                            <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
                        </div>
                        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
                        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f97067f47ad8fdb"></script>
                        <!-- AddThis Button END -->
                    </div>

                    <div>
                        <?php comments_template();?>
                    </div>
                </article><!-- #post-<?php the_ID(); ?> -->
            <?php endwhile; ?>
        <?php else : ?>
            Sin resultados;
        <?php endif; ?>
    </div>
<?php get_footer(); ?>

Elemento de lista