Archive Page 4 of 37



29ИюльZoom с помощью jQuery

Несложный прием с использованием библиотеки jQuery, с помощью которого можно получить эффект увеличения (zoom) любого элемента на странице.

1. Подгружаем библиотеку.




2. HTML просматриваемой области состоит из 5 элементов.
The Wrap (#wrap) – контейнер.
Small Area (#small) – просматриваемая зона по умолчанию, по которой проводится мышкой для увеличения.
Large (#large) – увеличенная облась.
Overlay (#overlay) – контейнер-”увеличитель”, следующий за движениями мышки.
Mover (#mover) – сворачивание и перекрытие увеличенной зоны.
Не обязательно использовать именно эти ID, можно объявлять и свои.

small rushmore
big rushmore

3. CSS.

#wrap          { width: 600px; position: relative; }
#small         { position: relative; width: 100%; }
#large         { background: white; position: relative; width: 600px; }
#mover         { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay       { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }

4. Параметры

$("#wrap").anythingZoomer({

      expansionSize: 30,      // Как далеко может отходить мышь от краев
      speedMultiplier: 1.4,   // Насколько быстрее внутренняя зона движется быстрее мыши

      smallArea: "#small",    // Перекрытие ID маленькой зоны
      largeArea: "#large",    // Перекрытие ID большой зоны
      zoomPort: "#overlay",   // Перекрытие ID "увеличителя"
      mover: "#mover"         // Перекрытие ID движущихся элементов
});

Варианты демо смотреть здесь

Оригинал статьи

22ИюльПокен / Poken

Покен
Дмитро Подзываловский показал интересную вещь – Покен (Poken). Покен – это такой типа “социальный” гаджетик, с помощью которого можно обмениваться контактами с владельцами таких же Покенов. Фактически это флэшка со специальной программой. Обменяться контактами очень просто – достаточно лишь коснуться другого такого же Покена. После этого можно подключить свой Покен к компьютеру и посмотреть новые контакты. Каждый Покен может хранить до 64 контактов, после чего следует предупреждение о заполнении. Нужно перенести контакты на компьютер, и Покен снова будет готов к обмену информацией.
Подробно о Покенах и как они работают (в т.ч. видео с инструкицей) рассказано на сайте Покен – твоя новая визитка.

15ИюльBeing a loser

Я фантастический талант по упущению идей.
Еще в ноябре прошлого года разразился вот таким постом по поводу организации табов в таб-интерфейсах браузеров.

А теперь внимание – очень похожая идея оказалась одной из победителей конкурса от Mozilla Lab…

Конечно, это не было подсмотрено у меня – до этого достататочно просто додуматься, если несколько секунд поизучать таб-интерфейсы браузеров. Но ведь ничего мне не мешало выдвинуть эту идею самому, если немного ее продумать.

Не будьте лузерами :)…

26ИюньРазграничение авторов по произвольным полям

Часто бывает, что при публикации записи необходимо указать стороннего пользователя как автора статьи. Конечно, WP позволяет создать аккаунт для этого автора и назначить ему авторство статьи. Но есть ли необходимость создавать аккаунт, если этот автор опубликуется всего лишь 1 раз? А что произойдет, если этот аккаунт удалить? Эта статья будет привязана к другому пользователю, который будет выбран при удалении. Не плодить же кучу 1-разовых аккаунтов. Тут нам приходят на помощь произвольные поля (custom fields). Для того, чтобы назначить авторство статьи стороннему лицу, при публикации создаем произвольное поле pauthor и назначаем ему в виде значения автора, например Вася Пупкин. Если у Васи Пупкина есть сайт, на который можно сослаться, создаем еще одно поле pauthurl и пишем ссылку http://… как значение.

В файлах темы index.php и single.php разместите вот такой код:

< ?php
$pauthor = get_post_meta ($post->ID, 'pauthor', TRUE);
if ($pauthor) :
    echo "".$pauthor."";
else :
    the_author_posts_link();
endif;
?>

Это правило (строки 2, 3, 4 кода) будет выводить сторонних автором простым текстом (либо ссылкой, если укажете), а ваши “штатные” авторы будут выводиться обычной функцией WP the_author_posts_link(); (строка 6 в вышеуказанном коде), если произвольные поля отсутствуют.

16ИюньОпределение браузера посетителя в WordPress

Чтобы определить, каким браузером пользуется посетитель вашего блога, нужно всего лишь в файл functions.php вашей темы добавить вот такой код:

< ?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Эта функия автоматически добавит к тэгу BODY свой CSS-класс:


Остается лишь добавить в файл стилей соответствующие классы.

12ИюньСлайдер на jQuery

Этот туториал поможет быстро и достаточно легко создать с помощью jQuery вот такой красивый слайдер.

1. Создайте HTML-страницу.


2. Создайте CSS-файл.

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

3. Скопируйте и вставьте этот код в вашу станицу после основного HTML-кода перед закрывающим BODY-тэгом. Вы можете легко изменить заголовок и описание – поменяйте команду “client” для заголовка и команду “desc” для описания.


4. Скачайте файлы jquery.js и scripts.js и вставьте ссылки на них в секции HEAD.

Демо примера.
Файловый архив.
Оригинал статьи.

08ИюньАвтообновление плагинов и ядра WordPress через FTP

Автообновление ядра и плагинов WordPress, впервые представленное в версии 2.7 донельзя облегчило жизнь всем, пользующимся этим движком. Но на некоторых хостингах, в зависимости от настроек, автообновление не работает в автоматическом режиме (вот такая тавтология!) и просит пользователей ввести в предлагаемую вместо обновления форму параметры ФТП – хост, логин, пароль. На одном из хостингов я столкнулся с тем, что данная форма наотрез отказывалась принимать предлагаемые сервер, логин и пароль и сообщала, что “connect failed”. Поиски решения в гугле навели на следующие варианты решения:

1. В форме вместо обычного имени сервера, типа mydomain.ru, попробовать ввести localhost или localhost:21 (это у меня сработало)
2. Чтобы не вводить хост, логин и пароль каждый раз, можно их прописать в файле wp-config.php в таком формате:

define("FTP_HOST", "domain.com");
define("FTP_USER", "ftpusername");
define("FTP_PASS", "ftppassword");

Первая строка – это сервер, там нужно ввести имя сервера в зависимости от того, как он у вас работает – по домену или localhost :). Вторая и третья – FTP-логин и пароль соответственно.
Надеюсь, это кому-нибудь поможет.

08ИюньОтображение рубрик в WordPress в 2 колонки

Простейший прием позволяет заменить традиционный 1-колоночный вывод рубрик в блоге на отображение рубрик в 2 колонки.

1. Нужно найти в файле темы (чаще всего в sidebar.php) стандартный код вывода рубрик, обычно это:

< ?php wp_list_categories() ?>

2. Заменить его на

< ?php
$cats = explode("",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i< $cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'
  • '.$cats[$i].''; elseif ($i>=$cat_n/2): $cat_right = $cat_right.'
  • '.$cats[$i].'
  • '; endif; endfor; ?>
      < ?php echo $cat_left;?>
      < ?php echo $cat_right;?>

    Все!

    05ИюньОтображение тэгов WordPress выпадающим списком

    Простой прием позволяет отобразить тэги в вашем блоге в виде выпадающего (dropdown) списка.

    1. В файл functions.php текущей темы вставьте следующий код.

    < ?php
    function dropdown_tag_cloud( $args = '' ) {
    	$defaults = array(
    		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
    		'exclude' => '', 'include' => ''
    	);
    	$args = wp_parse_args( $args, $defaults );
    
    	$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) );
    	if ( empty($tags) )
    		return;
    
    	$return = dropdown_generate_tag_cloud( $tags, $args );
    	if ( is_wp_error( $return ) )
    		return false;
    	else
    		echo apply_filters( 'dropdown_tag_cloud', $return, $args );
    }
    
    function dropdown_generate_tag_cloud( $tags, $args = '' ) {
    	global $wp_rewrite;
    	$defaults = array(
    		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
    	);
    	$args = wp_parse_args( $args, $defaults );
    	extract($args);
    
    	if ( !$tags )
    		return;
    	$counts = $tag_links = array();
    	foreach ( (array) $tags as $tag ) {
    		$counts[$tag->name] = $tag->count;
    		$tag_links[$tag->name] = get_tag_link( $tag->term_id );
    		if ( is_wp_error( $tag_links[$tag->name] ) )
    			return $tag_links[$tag->name];
    		$tag_ids[$tag->name] = $tag->term_id;
    	}
    
    	$min_count = min($counts);
    	$spread = max($counts) - $min_count;
    	if ( $spread < = 0 )
    		$spread = 1;
    	$font_spread = $largest - $smallest;
    	if ( $font_spread <= 0 )
    		$font_spread = 1;
    	$font_step = $font_spread / $spread;
    
    	// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
    	if ( 'name' == $orderby )
    		uksort($counts, 'strnatcasecmp');
    	else
    		asort($counts);
    
    	if ( 'DESC' == $order )
    		$counts = array_reverse( $counts, true );
    
    	$a = array();
    
    	$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';
    
    	foreach ( $counts as $tag => $count ) {
    		$tag_id = $tag_ids[$tag];
    		$tag_link = clean_url($tag_links[$tag]);
    		$tag = str_replace(' ', ' ', wp_specialchars( $tag ));
    		$a[] = "\t";
    	}
    
    	switch ( $format ) :
    	case 'array' :
    		$return =& $a;
    		break;
    	case 'list' :
    		$return = "
    
      \n\t
    • "; $return .= join("
    • \n\t
    • ", $a); $return .= "
    • \n
    \n"; break; default : $return = join("\n", $a); break; endswitch; return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args ); } ?>

    2. После этого в нужном месте вашей темы (чаще всего в файле sidebar.php) вставьте вот такой код:

    
    

    Как и многое другое, подсмотрено на сайте WpRecipes.

    31МайSmub.it – очередной сократитель ссылок

    Smub.It – очередной сократитель ссылок (сколько их уже в мире???), который в принципе можно было бы и пропустить, но его основное и принципиальное отличие от десятков других в том, что для его использования не нужно переходить на страницу самого сервиса. Чтобы с помощью Smub.it сократить ссылку, нужно всего лишь ввести smub.it/ перед той ссылкой, которую вы хотите сократить, например:

    smub.it/http://livejournal.com

    и нажать Enter. Ссылка будет сокращена, после чего ей можно поделиться (расшарить) в Twitter, Facebook, MySpace, Digg, StumbleUpon, FriendFeed, LinkedIn, занести в закладки или отправить по почте.

    Smub.it

    Существуют букмарклеты для Mac и iPhone.




    Спонсоры: пододеяльники . ремонт квартир