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

Карусель в блоге. Часть 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');

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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

/************************************************

* 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 (это зависит от темы) следующий код:

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

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

$featurecat = 'wordpress';
$featurenum = '3';

1 2	$featurecat = 'wordpress'; $featurenum = '3';

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

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

Cycle Carousel Pack (23,0 КиБ, 1 312 скачиваний)
Файлы для организации карусели в Wordpress-блоге на базе jQuery Cycle

Blogger

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

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

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

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

WordPress

Blogger

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

Поделитесь статьёй

Об авторе

minimus

Оставьте комментарий

Апрель 2025
Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30