Як я обіцяв у своїй минулій статті (Завантаження зображень із заданою роздільною здатністю у WordPress), представляю посібник зі створення галереї зображень заданого розміру. Як бонус ви також навчитеся створювати базовий jQuery плагін, щоб відображати збільшене зображення мініатюри красивіше.
Якщо ви не читали мою попередню статтю про власні розміри зображень, будь ласка, прочитайте її, щоб простіше зрозуміти це керівництво.
| Завантажити вихідні |
Крок 1. Визначтеся з розмірами зображень
Залежно від розмітки теми та сітки, яку вона використовує, ви можете зупинитися на різних розмірах мініатюр. Перед тим, як визначитися, подумайте про те, яку кількість зображень ви хочете розмістити в рядку, яка ширина контейнера, в якому будуть відображатися зображення, відступи, інтервали тощо.
Я використовуватиму ширину 940 пікс, 2х-колоночну розмітку (8/4) як приклад, де контент буде 620 пікс, сайдбар - 300 пікс с 20 пікс лівим відступом. Область контенту та сайдабару матиме внутрішні поля в 20 пікс.
Тепер трохи математики: контент шириною в 600 пікс с 20 пікс інтервалом, залишається 580 пікс під мініатюри; якщо виводити їх 5 в ряд, при цьому кожна буде відступ справа в 10 піксщоб вони не прилипали один до одного, у п'ятої мініатюри в ряду не буде правого відступу. Мініатюри будуть 108 пікс у висоту та ширину та обрізані.
Збільшені зображення будуть максимум 660 пікс у ширину та висоту, вони будуть зменшені пропорційно, без обрізки.
Ви можете вибрати розміри, які підходять під розмітку, якщо ви вирішите змінити розміри, вони можуть бути легко оновлені (дивіться попередня стаття щоб дізнатися, як це зробити), і вони не обов'язково мають бути квадратними.
Крок 2. Встановлення власних розмірів
Відредагуйте файл functions.phpщоб він виглядав приблизно так:
add_action( 'after_setup_theme', 'setup' );
function setup() {
// ...
add_theme_support( 'post-thumbnails' );
add_image_size( 'preview', 108, 108, true ); // thumbnail
add_image_size( 'zoomed', 660, 600 ); // large
// ...
}
Крок 3. Генерація списку мініатюр
Все в тому ж functions.php додайте метод generate_thumbnail_list:
function generate_thumbnail_list( $post_id = null ) {
if ( $post_id == null ) return;
$images = get_posts(
array(
'numberposts' => -1,
'post_type' => 'attachment',
'post_mime_type' => 'image/jpeg, image/jpg, image/png, image/gif',
'post_parent' => $post_id,
'orderby' => 'menu_order',
'order' => 'ASC',
'exclude' => get_post_thumbnail_id( $post_id )
)
);
if ( count( $images ) > 0 ) {
echo '<ul class="gallery">';
foreach ( $images as $image ) {
$src = wp_get_attachment_image_src($image->ID, 'zoomed');
echo '<li><a href="' . $src[0] .'">' . wp_get_attachment_image( $image->ID, 'preview' ) . '</a></li>';
}
echo '</ul>';
echo '<div class="clear"></div>';
}
}
У файлі Зміст-single.php викличте метод generate_thumbnail_list, передаючи ID посту як параметр.
<?php the_content(); ?> <h3>Images</h3> <?php generate_thumbnail_list( get_the_ID() ); ?>
Цей код виведе невпорядкований список, що містить посилання на файли більшого розміру та зображення мініатюр.
Крок 4. Стилізація галереї
Очевидно, що мініатюр потрібно додати оформлення стилю, інакше це просто список зображень. Додайте наступне до таблиці стилів style.css:
.clear {
clear: both;
}
.gallery {
list-style-type: none;
padding: 0;
margin: 0;
}
.gallery li {
float: left;
margin: 0 10px 10px 0;
}
.gallery li:nth-child(5n) {
margin-right: 0;
}
.gallery a {
float: left;
cursor: pointer;
text-decoration: none;
}
.gallery img {
float: left;
border: 0;
}
Так ми розмістимо зображення поруч, залишаючи між ними певний простір.
Тепер при натисканні на мініатюру буде відкриватися зображення більшого розміру на порожній сторінці. Це хороший варіант на випадок, якщо JavaScript відключений.
Крок 5. Відкриття зображень за допомогою галереї на jQuery
Стиль галереї зі збільшеним зображенням
Перед тим, як писати будь-який JavaScript, було б добре дізнатися як великі зображення будуть відображатися. Ось що я мав на увазі:
Зверніть увагу: все це генеруватиметься плагіном jQuery. Я лише хочу показати процес створення.
Прозорий шар поверх контенту із зображенням у центрі та кнопками управління у правому верхньому кутку. Поки зображення завантажується, відображатиметься символ завантаження. У тіло документа буде додано шар-контейнер, який міститиме посилання для навігації на наступне та попереднє зображення, посилання на закриття галереї та контейнер навколо зображення, в який воно, власне, і завантажуватиметься.
Це мінімальний HTML код, який буде використано для галереї.
<div id="zoom"> <a href="#next" class="next">Next</a> <a href="#previous" class="previous">Previous</a> <div class="close"></div> <div class="content"></div> </div>
Якщо додати код, наведений нижче, до опису стилів у файл style.css, вийде таке ж оформлення, як показано на зображенні вище:
#zoom {
z-index: 99990; /* high index so it stays on top of all other elements */
position: fixed; /* is fixed so if content is scrolled this stays in the same place */
top: 0;
left: 0;
width: 100%;
height: 100%;
/* creates a transparent background, so the content under it will be visible,
transparency can be adjusted */
background: rgba(0, 0, 0, 0.8);
}
#zoom .content {
z-index: 99991; /* higher index so the image will stay on top of the overlay */
position: absolute;
/* start initial positioning: will be centered horizontally and vertically */
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
/* end positioning */
/* an animated spinner as background will be visible while the image is loading */
background: #ffffff url('../img/spinner.gif') no-repeat 50% 50%;
border: 20px solid #ececec;
padding: 0;
}
#zoom img {
display: block;
max-width: none;
background: #ececec;
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
#zoom .close {
z-index: 99993; /* higher index so the close will stay above the overlay and image */
position: absolute;
top: 0;
right: 0;
width: 49px;
height: 49px;
cursor: pointer;
background: transparent url('../img/icons/close.png') no-repeat 50% 50%;
opacity: 1;
filter: alpha(opacity=100);
}
#zoom .previous,
#zoom .next {
z-index: 99992; /* higher index so the close will stay above the overlay and image */
position: absolute;
top: 0;
overflow: hidden;
display: block;
width: 49px;
height: 49px;
text-indent: 100%;
}
#zoom .previous {
right: 100px;
background: url('../img/icons/arrows.png') no-repeat 0 0;
}
#zoom .next {
right: 50px;
background: url('../img/icons/arrows.png') no-repeat 100% 0;
}
#zoom .close:hover {
background-color: #da4f49; /* adds a red tint on hover */
}
#zoom .previous:hover,
#zoom .next:hover {
background-color: #0088cc; /* adds a blue tint on hover */
}
З цього отримаємо на виході:
Тепер трохи JavaScript
Наведений вище HTML код буде не потрібен, він генеруватиметься JavaScript. Події будуть прив'язані до відкриття, навігації або закриття галереї. Навігація та закриття галереї може здійснюватися з клавіатури або мишкою.
JavaScript нижче також прокоментовано, щоб пояснити, що відбувається:
(function($) {
$.zoom = function() {
// append a gallery wrapper to the document body
$('body').append('<div id="zoom"></div>');
var zoomedIn = false, // a flag to know if the gallery is open or not
zoom = $('#zoom'),
zoomContent = null,
opened = null; // the opened image element
function setup() {
zoom.hide(); // hide it
// add the inner elements, image wrapper, close and navigation links
zoom.prepend('<div class="content"></div>');
zoom.prepend('<div class="close"></div>');
zoom.prepend('<a href="#previous" class="previous">Previous</a>');
zoom.prepend('<a href="#next" class="next">Next</a>');
zoomContent = $('#zoom .content');
// attach events to the added elements
$('#zoom .close').on('click', close);
$('#zoom .previous').on('click', openPrevious);
$('#zoom .next').on('click', openNext);
// observe keyboard events for navigation and closing the gallery
$(document).keydown(function(event) {
if (!opened) {
return;
}
if (event.which == 27) {
$('#zoom .close').click();
return;
}
if (event.which == 37) {
$('#zoom .previous').click();
return;
}
if (event.which == 39) {
$('#zoom .next').click();
return;
}
return;
});
if ($('.gallery li a').length == 1) {
// add 'zoom' class for single image so the navigation links will hide
$('.gallery li a')[0].addClass('zoom');
}
// attach click event observer to open the image
$('.zoom, .gallery li a').on('click', open);
}
function open(event) {
event.preventDefault(); // prevent opening a blank page with the image
var link = $(this),
src = link.attr('href'),
// create an image object with the source from the link
image = $(new Image()).attr('src', src).hide();
if (!src) {
return;
}
$('#zoom .previous, #zoom .next').show();
if (link.hasClass('zoom')) {
$('#zoom .previous, #zoom .next').hide();
}
// show the gallery with loading spinner, navigation and close buttons
if (!zoomedIn) {
zoomedIn = true;
zoom.show();
}
// clean up and add image object for loading
zoomContent.empty().prepend(image);
// event observer for image loading, render() will be
// called while image is loading
image.load(render);
opened = link;
}
function openPrevious(event) {
event.preventDefault();
if (opened.hasClass('zoom')) {
return;
}
var prev = opened.parent('li').prev();
if (prev.length == 0) {
prev = $('.gallery li:last-child');
}
prev.children('a').trigger('click');
}
function openNext(event) {
event.preventDefault();
if (opened.hasClass('zoom')) {
return;
}
var next = opened.parent('li').next();
if (next.length == 0) {
next = $('.gallery li:first-child');
}
next.children('a').trigger('click');
}
function render() {
// if the image is not fully loaded do nothing
if (!this.complete) {
return;
}
var image = $(this);
// if image has the same dimensions as the gallery
// just show the image don't animate
if (image.width() == zoomContent.width() &&
image.height() == zoomContent.height()) {
show(image);
return;
}
var borderWidth = parseInt(zoomContent.css('borderLeftWidth'));
// resize the gallery to the image dimensions before
// displaying the image
zoomContent.animate({
width: image.width(),
height: image.height(),
marginTop: -(image.height() / 2) - borderWidth,
marginLeft: -(image.width() / 2) - borderWidth
}, 300, function(){
show(image);
});
function show(image) {
image.fadeIn('fast');
}
}
function close(event) {
event.preventDefault();
zoomedIn = false;
zoom.hide();
zoomContent.empty();
}
setup();
};
})(jQuery);
Після додавання плагіна ініціалізуйте його, додавши виклик плагіна в метод generate_thumbnail_list.
function generate_thumbnail_list( $post_id = null ) {
// ...
if ( count( $images ) > 0 ) {
// ...
echo '<script type="text/javascript">jQuery.zoom();</script>';
}
}
Приклад
Приклад того, як це працює в житті та як може бути використане: Zoom jQuery Photo Gallery Plugin demo
Джерело: WP.tutsplus.com
Коментарі до запису: 3
Здрастуйте, давно шукав щось подібне, Крок 2, 3 дуже став у нагоді. Додав свої стилі і все що хотів реалізував без проблем, величезне спасибі.
Тільки питання, як замінити class=»» до картинки wp_get_attachment_image( $image->ID, 'preview' ), стоїть class=»attachment-preview»
і як видалити width і height????
Посилання з прикладом — Page not found