Subscribe to БлоговодСтатьиSubscribe to БлоговодКомментарии

Вы читаете > Главная / Блоггинг, Виджеты (Blogger), Плагины / Карусель в блоге. Часть 2.

Карусель в блоге. Часть 2.

Май 16, 2010 | minimus  
Рубрика: Блоггинг, Виджеты (Blogger), Плагины

2 комментария

КарусельВ прошлой статье мы рассматривали карусель на базе Mootools. Пришло время познакомиться с вариантом карусели, использующем jQuery. Основой этого варианта карусели является jQuery плагин Cycle. Поскольку фреймворк jQuery является самым дружественным по отношению к другим фреймворкам, я предпочитаю именно этот вариант. Его использование страхует от неприятных сюрпризов при использовании в блоге других кодов, базирующихся на Mootools или Prototypes, что особенно актуально в WordPress-блогах. Мой блог использует именно этот вариант карусели, в чем Вы можете убедиться заглянув на главную страницу блога.

Перейдём непосредственно к реализации …

WordPress

В WordPress-блоге необходимо произвести некоторые манипуляции …

Поместите файлы con_featured_post.php и thumb.php в корень папки, активной темы блога. Файл jquery.cycle.all.min.js в папку js активной темы. Так же необходимо создать папку cache с правами доступа 755 или 777 в корне папки темы.

В файл темы functions.php поместите следующий код (в конец файла):

function themeHeaderScripts() {
  $themeUrl = get_bloginfo(template_uri);
  wp_enqueue_script('jquery');
  wp_enqueue_script('jqCycle', $themeUrl.'/js/jquery.cycle.all.min.js', array('jquery'), '2.63');
}
 
add_action('template_redirect', 'themeHeaderScripts');

В файл styles.css (в любом месте) вставьте следующий код:

/************************************************
*	Content Gallery 		    	            *
************************************************/
 
#featured-post-wrap {
background-color:#212221;
margin:0 auto;
padding:0px 0 9px;
width:950px;
height:267px;
}
 
#featured-post{
height:272px;
margin:0px 0 0px 5px;
overflow:hidden;
position:relative;
width:580px;
}
 
.featured-post-item{
background:#171717 none repeat scroll 0 0;
border:1px solid #2B2B2B;
color:#555555;
float:left;
height:252px;
margin-top:7px;
overflow:hidden;
padding:5px;
position:absolute;
width:568px;
}
 
.featured-post-item .post{
background:transparent url(images/fe_bg.png) repeat scroll 0 0;
height:86px;
position:absolute;
top:170px;
width:568px;
z-index:100;
overflow:hidden;
}
 
.featured-post-item .post:hover a,.featured-post-item  .post:hover a:hover{
color:#fff;
}
 
.featured-post-item .post:hover{
background: url(images/fe_bg_h.png) repeat;
color:#FFF;
}
 
.featured-post-item .post h2{
margin:0px 0px 0px 0px;
padding:5px 5px 0;
font-weight:bold;
font-family: "Myriad Pro",verdana, helvetica,arial;
border-bottom:none!important;
font-size:1.2em!important;
line-height:19px!important;
padding-bottom:0px!important;
padding-top:5px!important;
 
}
 
.featured-post-item .post h2 a:link,.featured-post-item .post h2 a:visited{
font-size:1.2em !important;
line-height:19px !important;
}
 
.featured-post-item .post p{
margin:0px 0px 0px 0px;
padding:2px 6px 5px;
line-height:16px;
overflow:hidden;
font-family: "Myriad Pro", verdana, tahoma, sans-serif;
}	
 
.featured-post-item .post a{
color:#B2B2B2;
font-size:1.0em;
line-height:17px;
text-decoration: none;
}
 
#fm_fec_wrap{
height:285px;
position:relative;
}
 
.read-more {
background:url('images/f_read-more.png') no-repeat;
display:block;
float:right;
height:32px;
width:136px;
}
 
.read-more a {
color:#8b847c;
font-size:0.6em;
padding-left:25px;
}
 
.read-more a:hover {
color:#fff;
}
 
.date-post {
color:#FFFFFF;
float:right;
font-size:0.56em;
padding-right:6px;
text-align:right;
}
 
#feature-nav {
height:40px;
width:620px;
}
 
#feature-nav-r {
background:#000;
float:right;
}
 
#feature-nav-w {
background:#0c0804 url('images/f-nav-bg.gif') no-repeat;
border-top:1px solid #21170d;
margin:0 auto;
height:35px;
width:950px;
}
 
#featured-next {
background:transparent url(images/fe_imG.png) no-repeat scroll -77px 0;
float:right;
margin-right:10px;
}
 
#featured-prev {
background:transparent url(images/fe_imG.png) no-repeat scroll 0 0;
float:left;
margin-left:10px;
}
 
#featured-prev,#featured-next {
cursor:pointer;
height:30px;
margin-top:4px;
text-indent:-9999px;
top:0;
width:78px;
}
 
#con_fea_navwrap{
background:#171717;
height:23px;
margin-left:5px;
padding-left:13px;
padding-right:13px;
padding-top:3px;
text-indent:-9999px;
display:block;
width:554px;
}
 
#con_featured-next{
background:transparent url(images/con_n.png) no-repeat scroll 0 0;
float:right;
margin-right:10px;
}
 
#con_featured-prev {
background:transparent url(images/con_n.png) no-repeat scroll -25px 0;
float:left;
margin-left:10px;
}
 
#con_featured-prev,#con_featured-next {
cursor:pointer;
height:23px;
margin-top:0px;
text-indent:-9999px;
top:0;
width:25px;
}

Для вывода карусели на главной странице блога поместите в файл index.php или home.php (это зависит от темы) следующий код:

<?php include (TEMPLATEPATH . '/con_featured_post.php'); ?>

Для того чтобы задать данному коду галереи изображения статей добавьте к нужным статьям, по одному на каждую статью, произвольные поля с именем articleimg, а в качестве значения поля задайте URL изображения. Размер выводимого изображения 561х257 пиксел, но Вы можете указывать URL изображения любого размера – изображение автоматически будет приведено к нужному размеру и полученная копия будет сохранена в папке cache.

Количество анонсируемых статей по умолчанию равно 3-м, а рубрика вывода «wordpress». Если Вы хотите изменить эти значения, откройте файл con_featured_post.php, и найдите в нём следующий код:

$featurecat = 'wordpress';
$featurenum = '3';
  • $featurecat – имя рубрики из которой берутся изображения анонсов. $featurecat8 не актуально, т.к. используется для устранения проблем WordPress версии 2.8.
  • $featurenum – количество выводимых анонсов

В качестве текста анонса берётся заголовок статьи и анонс (цитата) статьи (по версии get_the_excerpt())

  Cycle Carousel Pack (23.0 KiB, 67 скачиваний)
Файлы для организации карусели в Wordpress-блоге на базе jQuery Cycle

Blogger

Честно говоря, идея использования этой карусели в Blogger-блогах не является разумной. Невозможность использования скриптов PHP в Blogger сводит на нет преимущество авто-подгонки размера изображений, а невозможность привязки крупных изображений к статьям не позволяет использовать авто-вывод анонсов последних статей.

Впрочем, если Blogger-блоггерам эта карусель интересна, я могу что-нибудь придумать (в индивидуальном порядке $).

Если Вы хотите подискутировать на тему этой или иных каруселей в Blogger-блогах, прошу на форум поддержки.

© 2010, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.

Постовой

  • Блог человека, работающего в интернете. Почитайте, это может быть интересно.

Популярность: 18%

Похожие статьи:

  1. Карусель в блоге. Часть 1.
  2. Подсветка кодов в блоге. Часть вторая.
  3. Просмотр объектов мультимедиа в Blogger-блоге
  4. Подсветка кодов в блоге. Часть первая.
  5. Виджет “Облако тегов”

Метки: , , , , ,

Комментарии

2 комментария к статье “Карусель в блоге. Часть 2.”

Обратные ссылки

Посмотрите, что другие говорят об этой статье ...
  1. minimus WordPress v1.2.7 :
    16.05.2010 в 14:51

    Новая статья блога: Карусель в блоге. Часть 2. http://bit.ly/at2b5r

    Ответить
  2. Tweets that mention Карусель в блоге. Часть 2. | Блоговод -- Topsy.com :
    16.05.2010 в 17:17

    [...] This post was mentioned on Twitter by minimus. minimus said: Новая статья блога: Карусель в блоге. Часть 2. http://bit.ly/at2b5r [...]

    Ответить


Выскажите своё мнение

Напишите что Вы думаете ...
и, если хотите иметь индивидуальный аватар, зарегистрируйтесь на сервисе gravatar!