0
큰 "텍스트 캡션"(transparant-black) 오버레이를 넣고 싶습니다. 각 이미지는 wordpress의 "slider-cycle"플러그인에 있습니다. functions.php에서 오버레이 텍스트 캡션이있는 jQuery주기 플러그인?
,function slideshow_featured_posts() {
wp_reset_query();
$featured = 1; // Assuming that the name of the category ID number 1 is "Featured".
$count = 3; // How many post to be shown as slides. Ideally, it should be more than 3 posts.
add_filter('excerpt_length', 'hook_excerpt_featured_length');
?>
<div class="list">
<?php while (have_posts()) : the_post(); ?>
<div class="item">
<a class="image" href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_post_thumbnail('slideshow'); ?>
</a>
<div class="meta">
<h3><a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
<div style="clear: both"></div>
</div>
<?php endwhile; ?>
</div>
<?php
wp_reset_query();
remove_filter('excerpt_length','hook_excerpt_featured_length');
}
Index.php는
<div id="slideshow-wrapper">
<?php slideshow_featured_posts(); ?>
</div>
CSS
, 내가 오버레이 transparant 블랙 자막 사업부를 넣어해야div#slideshow { position: relative; width: 780px; height: 300px; padding: 0 0 40px; margin: 0 auto; }
div#slideshow .list { position: absolute; width: 780px; height: 300px; z-index: 1; overflow: hidden; }
div#slideshow .button {
width: 64px; height: 64px; position: absolute; top: 118px;
outline: 0; cursor: hand; border: 0 none; color: #333; font-size: 45px; line-height: 45px; font-weight: bold;
}
div#slideshow #jqc-prev {
border-bottom: 0 none;
left: -74px;
}
div#slideshow #jqc-next {
border-bottom: 0 none;
right: -74px;
}
div#slideshow .item { width: 780px; margin: 0; }
div#slideshow .item .image { display: block; float: right; padding: 0; }
div#slideshow .item .meta { width: 280px; padding: 0; float: left; }
div#slideshow h3 {
font: bold 28px/32px Helvetica, Arial, sans-serif;
display: block; padding: 0; margin: 0 0 20px 0;
}
div#slideshow h3 a:hover, div#slideshow h3 a:active {
border: 0 none;
text-decoration: underline;
}
div#slideshow p { display: block; padding: 0; margin: 0 0 20px 0; }