Как добавить функцию 'Нажмите для увеличения изображения' с открытием увеличенного изображения во всплывающем окне?

19 мар. 2013 г., 11:14:21
Просмотры: 28.7K
Голосов: 1

У меня есть несколько изображений UI-форм и задач, которые довольно большие. Я хотел бы отображать уменьшенное 'миниатюрное' изображение и предоставить пользователю возможность 'Нажать для увеличения', после чего показывать полноразмерное изображение либо во всплывающем окне, либо в отдельном окне или вкладке. Всплывающие окна обычно не приветствуются, но это решение я должен еще принять.

Как мне это реализовать? Где мне разместить JavaScript, который загружает полноразмерное изображение и открывает новое окно?

1
Комментарии

Что вы изучили/нашли/попробовали? Мне кажется, вы ищете thickbox/lightbox. В WordPress есть встроенный Thickbox, простой поиск в Google даст вам нужную информацию.

t31os t31os
14 мая 2013 г. 12:44:37
Все ответы на вопрос 2
0

Для этого следует использовать лайтбокс. Попробуйте этот вариант. Он хорошо работает:

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

На сайте есть инструкции по использованию и документация по настройке. В загружаемом архиве также содержатся примеры, код которых можно просто скопировать и вставить.

19 мар. 2013 г. 15:00:08
2
-2
<?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__( 'Постоянная ссылка на %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() ) : // Вывод только отрывка для поиска ?>
                    <div class="entry-summary">
                        <?php the_excerpt(); ?>
                    </div><!-- .entry-summary -->
                    <?php else : ?>
                    <div class="entry-content">
                        <?php the_content( __( 'Читать далее <span class="meta-nav">&rarr;</span>', 'ifoti' ) ); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Страницы:', 'ifoti' ) . '</span>', 'after' => '</div>' ) ); ?>
                    </div><!-- .entry-content -->
                    <?php endif; ?>

                    <footer class="entry-meta">
                        <?php $show_sep = false; ?>
                        <?php if ( 'post' == get_post_type() ) : // Скрыть категории и метки для страниц при поиске ?>
                        <?php
                            $categories_list = get_the_category_list( __( ', ', 'ifoti' ) );
                            if ( $categories_list ):
                        ?>
                        <span class="cat-links">
                            <?php printf( __( '<span class="%1$s">Опубликовано в</span> %2$s', 'ifoti' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
                            $show_sep = true; ?>
                        </span>
                        <?php endif; // Конец if categories ?>
                        <?php
                            $tags_list = get_the_tag_list( '', __( ', ', 'ifoti' ) );
                            if ( $tags_list ):
                            if ( $show_sep ) : ?>
                        <span class="sep"> | </span>
                            <?php endif; // Конец if $show_sep ?>
                        <span class="tag-links">
                            <?php printf( __( '<span class="%1$s">Метки:</span> %2$s', 'ifoti' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
                            $show_sep = true; ?>
                        </span>
                        <?php endif; // Конец if $tags_list ?>
                        <?php endif; // Конец if 'post' == get_post_type() ?>

                        <?php if ( comments_open() ) : ?>
                        <?php if ( $show_sep ) : ?>
                        <span class="sep"> | </span>
                        <?php endif; // Конец if $show_sep ?>
                        <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Оставить комментарий', 'ifoti' ) . '</span>', __( '<b>1</b> Комментарий', 'ifoti' ), __( '<b>%</b> Комментариев', 'ifoti' ) ); ?></span>
                        <?php endif; // Конец if comments_open() ?>
                        <span class="sep"> | </span>
                        <?php edit_post_link( __( 'Редактировать', '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">Печать</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 : ?>
            Ничего не найдено;
        <?php endif; ?>
    </div>
<?php get_footer(); ?>

Элемент списка

4 дек. 2015 г. 23:10:22
Комментарии

Ответы должны быть больше, чем просто фрагмент кода. Пожалуйста, отредактируйте и объясните, почему это решение работает.

Gabriel Gabriel
4 дек. 2015 г. 23:31:43

Я не вижу, как это хоть как-то отвечает на вопрос

Pieter Goosen Pieter Goosen
5 дек. 2015 г. 08:31:10