رفتن به مطلب

استایل متفاوت برای پست دوم در آخرین مطالب


U3F

پست های پیشنهاد شده

من یک اسلاید شو رو به این صورت ویرایش کردم که آخرین مطالب رو با تصویر که از زمینه دلخواه استفاده شده رو نمایش بده، تو این اسلاید شو تصویر دوم استایل سی اس اسش با بقیه باید متفاوت باشه. دقیقا مثل اسلاشد شو Google Play. اما نمیدونم چطور باید تصویر یا همون پست دوم رو بهش استایل بدم

32997709655052931628.jpg


<ul class="slider"><?php query_posts('showposts=6'); ?><?php while (have_posts()) : the_post(); ?><?php if(get_post_custom_values('cover')) : ?>
<li><a href="<?php the_permalink() ?>" target="_blank"><img src="<?php echo get_post_meta($post->ID, 'cover', true); ?>" alt="<?php the_title(); ?>"></a></li><?php endif; ?>
<?php endwhile;?></ul>

کد جاوا


<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
/**
* sct_slider.js
*/
(function($) {
var slider = $(".slider");
var next = $(".slider-wrapper a[rel='next']");
var prev = $(".slider-wrapper a[rel='prev']");
function sct_woble(element, direction) {
var o_pos = parseInt(slider.css("margin-left"));
if (direction == 'right') {
var n_pos = o_pos - 100;
} else {
var n_pos = o_pos + 100;
console.log(n_pos);
}
slider.animate({
marginLeft: n_pos
}, 100, function() {
slider.animate({
marginLeft: o_pos
}, 500, function() {});
});
}
next.click(function() {
if (slider.is(':animated')) {
return false;
}
if ($('.slider li:last-child').attr('class') == 'active') {
sct_woble(slider, 'right');
return false;
}
var curr_pos = parseInt(slider.css("margin-left"));
var new_pos = curr_pos - 493;
slider.animate({
marginLeft: new_pos
}, 400, function() {
// move active to the next one
slider.find('li.active').removeClass('active').next().addClass('active');
});
});
prev.click(function() {
if (slider.is(':animated')) {
return false;
}
if ($('.slider li:first-child').attr('class') == 'active') {
sct_woble(slider, 'left');
return false;
}
var curr_pos = parseInt(slider.css("margin-left"));
var new_pos = curr_pos + 493;
slider.animate({
marginLeft: new_pos
}, 400, function() {
// move active to the next one
slider.find('li.active').removeClass('active').prev().addClass('active');
});
});
})(jQuery);
});//]]>
</script>

استایلی که تصویر یا پست دوم باید بگیره active هست لطفا راهنمایی کنید

لینک به ارسال

یک counter قرار دهید و اگر = 2 بود کلاس جدید را پرینت کنید

لینک به ارسال

<ul class="slider">
<?php $i = 0; query_posts('showposts=6'); while (have_posts()) : the_post();if(get_post_custom_values('cover')) : ?>
<li<?php if($i%2==0){ echo 'class="myclass"';} ?>>
<a href="<?php the_permalink() ?>" target="_blank"><img src="<?php echo get_post_meta($post->ID, 'cover', true); ?>" alt="<?php the_title(); ?>"></a>
</li>
<?php $i++; endif; endwhile;?>
</ul>

برای li های زوج کلاس myclass اضافه میشه.

لینک به ارسال

ممنون مرتضی جان، نمیشه فقط به به عدد خاص اون کلاس رو داد ؟ اگر نه برای عدد های فرد کد به چه شکل میشه

لینک به ارسال

زوج و فرد


<ul class="slider">
<?php $i = 0; query_posts('showposts=6'); while (have_posts()) : the_post();if(get_post_custom_values('cover')) : ?>
<li<?php if($i%2==0){ echo 'class="myclass"';}else{ echo 'class="myclass2"';} ?>>
<a href="<?php the_permalink() ?>" target="_blank"><img src="<?php echo get_post_meta($post->ID, 'cover', true); ?>" alt="<?php the_title(); ?>"></a>
</li>
<?php $i++; endif; endwhile;?>
</ul>

دومی


<ul class="slider">
<?php $i = 1; query_posts('showposts=6'); while (have_posts()) : the_post();if(get_post_custom_values('cover')) : ?>
<li<?php if($i==2){ echo 'class="myclass"';}else{ echo 'class="myclass2"';} ?>>
<a href="<?php the_permalink() ?>" target="_blank"><img src="<?php echo get_post_meta($post->ID, 'cover', true); ?>" alt="<?php the_title(); ?>"></a>
</li>
<?php $i++; endif; endwhile;?>
</ul>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...