اسلایدر مطالب نسخه 2 مانند نسخه قبلی خود، با ماژول قدرتمند بلاک پیشرفته هماهنگ شده است، در نتیجه شما میتوانید تغییرات بسیار زیادی را در نحوه نمایش مطالب در این اسلایدر اعمال کنید.
برخی از امکانات اسلایدر مطالب نسخه 2:
۱. قابلیت تنظیم سرعت تغییر اسلایدها.
۲. قابلیت تغییر مدت زمان نمایش هر اسلاید.
۳. اسلاید مطالب به صورت اتوماتیک.
۴. دکمه های کنترل اسلایدر برای نمایش اسلاید بعدی، قبلی، شروع اتوماتیک نمایش اسلاید ها و توقف اسلایدر.
۵. نمایش کلمه "توقف" به همراه افکت، هنگامی که بر روی دکمه توقف کلیک کنید.
۶. قابلیت نمایش اسلاید ها به دو صورت محو شونده و یا حرکت اسلایدها به سمت چپ.
۷. قابلیت تغییر نام دکمه های کنترل اسلایدر: "بعدی، قبلی، شروع، توقف"
۸. متوقف شدن اسلایدر هنگامی که موس را بر روی آن قرار دهید.
۹. سایز کم و سبک بودن فایلهای اسلایدر.
دانلود
آموزش نصب
۱. ابتدا فایل دانلود شده را از حالت فشرده خارج ساخته، سپس بر روی هات خود آپلود کنید. توجه داشته باشید که نام فولدر THEME را تغییر دهید و نام قالب خود را قرار دهید.
۲. فایل main.tpl قالب خود را باز کرده و کد زیر را پیدا کنید:
قبل از کد بالا، کد زیر را قرار بدهید:
۳. فایل style.css قالب خود را باز کرده و کد های زیر را در آن قرار دهید:
۴. کدهای زیر را در فایل main.tpl قرار دهید تا اسلایدر شما به نمایش در بیاید:
نکته:
این اسلایدر به صورت دیفالت، جدیدترین مطالب را نمایش میدهد. قسمت سوالات متداول را برای انجام تنظیمات مطالعه کنید.
۲. فایل main.tpl قالب خود را باز کرده و کد زیر را پیدا کنید:
</head>
قبل از کد بالا، کد زیر را قرار بدهید:
<script type="text/javascript" src="{THEME}/js/jquery.jshowoff.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#features').jshowoff({
speed:3500,
changeSpeed:400,
links: false,
animatePause: true,
controls: true,
effect: 'slideLeft',
controlText:{play:'شروع',pause:'توقف',previous:'قبلی',next:'بعدی'},
hoverPause: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#features').jshowoff({
speed:3500,
changeSpeed:400,
links: false,
animatePause: true,
controls: true,
effect: 'slideLeft',
controlText:{play:'شروع',pause:'توقف',previous:'قبلی',next:'بعدی'},
hoverPause: true
});
});
</script>
۳. فایل style.css قالب خود را باز کرده و کد های زیر را در آن قرار دهید:
.slider2_text {text-align:right; padding:2px 5px;}
.slider2_img img {padding:3px; border:1px solid #ddd; background:#fff; margin-top:5px;}
.slider2_date {color:#aaa;}
#features {background: #efefef;position: relative;overflow: hidden;width: 300px;height: 240px;list-style:none;line-height:13px;font:11px tahoma;color:#555;}
.jshowoff {width: 300px;margin: 10px 0;}
.jshowoff div {width: 290px;}
.jshowoff div, #features, .jshowoff {-webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px;}
.jshowoff-slidelinks a, .jshowoff-controls a {display: block;background-color: #bbb;color: #fff;padding: 3px 7px 5px;margin: 5px 0 0 5px;float: left;text-decoration: none;-moz-border-radius: 4px;-webkit-border-radius: 4px;outline: none;line-height: 13px;font:11px tahoma;}
.jshowoff-slidelinks a:hover, .jshowoff-controls a:hover {color: #999;background:#fff;}
p.jshowoff-controls {background: #ddd;overflow: auto;height: 1%;padding: 0 0 5px 3px;margin: 0;-moz-border-radius-bottomleft: 6px;-moz-border-radius-bottomright: 6px;-webkit-border-bottom-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;}
.jshowoff-pausetext {color: #ff9900;}
.slider2_img img {padding:3px; border:1px solid #ddd; background:#fff; margin-top:5px;}
.slider2_date {color:#aaa;}
#features {background: #efefef;position: relative;overflow: hidden;width: 300px;height: 240px;list-style:none;line-height:13px;font:11px tahoma;color:#555;}
.jshowoff {width: 300px;margin: 10px 0;}
.jshowoff div {width: 290px;}
.jshowoff div, #features, .jshowoff {-webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px;}
.jshowoff-slidelinks a, .jshowoff-controls a {display: block;background-color: #bbb;color: #fff;padding: 3px 7px 5px;margin: 5px 0 0 5px;float: left;text-decoration: none;-moz-border-radius: 4px;-webkit-border-radius: 4px;outline: none;line-height: 13px;font:11px tahoma;}
.jshowoff-slidelinks a:hover, .jshowoff-controls a:hover {color: #999;background:#fff;}
p.jshowoff-controls {background: #ddd;overflow: auto;height: 1%;padding: 0 0 5px 3px;margin: 0;-moz-border-radius-bottomleft: 6px;-moz-border-radius-bottomright: 6px;-webkit-border-bottom-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;}
.jshowoff-pausetext {color: #ff9900;}
۴. کدهای زیر را در فایل main.tpl قرار دهید تا اسلایدر شما به نمایش در بیاید:
<div id="features">
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&last=yes"}
</div>
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&last=yes"}
</div>
نکته:
این اسلایدر به صورت دیفالت، جدیدترین مطالب را نمایش میدهد. قسمت سوالات متداول را برای انجام تنظیمات مطالعه کنید.
سوالات متداول
تنظیمات مربوط به قسمت مطالب و نوع مطالبی که اسلایدر نمایش میدهد:
برای نمایش برترین مطالب، از کد زیر استفاده کنید:
برای نمایش مطالب به صورت تصادفی از کد زیر استفاده کنید:
برای نمایش مطالب با بیشترین نظرات از کد زیر استفاده کنید:
برای نمایش مطالب با بیشترین امتیاز از کد زیر استفاده کنید:
برای نمایش مطالب یک بخش و یا چند بخش بخصوص از تگ زیر استفاده کنید:
نمونه:
اگر مایل هستید بعضی از پستها در اسلایدر به نمایش گذاشته شوند، از تگ زیر استفاده کنید:
نمونه:
برای غیر فایل کردن کش از تگ زیر استفاده کنید:
نمونه:
تنظیمات مربوط به اسلایدر و کنترل اسلایدر:
۱. چگونه میتوانیم مدت زمان نمایش اسلایدر را تغییر دهیم؟
با ویرایش کد زیر:
۲. چگونه میتوانیم سرعت تغییر اسلاید ها را تغییر دهیم؟
با ویرایش کد زیر:
۳. چگونه میتوانیم کمله "توقف" را هنگام کلیک کردن بر روی دکمه توقف نمایش دهیم و یا بلعکس؟
با ویرایش کد زیر:
به جای true باید false قرار دهید.
چگونه میتوانیم افکت اسلاید ها را تغییر دهیم؟
با ویرایش کد زیر:
برای نمایش اسلایدها به صورت محو شوند کد fade را قرار دهید.
چگونه میتوانیم قابلیت متوقف شدن اسلایدر را هنگامی که موس را بر روی آن می آوریم غیر فعال کنیم؟
با ویرایش کد زیر:
به جای true باید false بگذارید.
برای نمایش برترین مطالب، از کد زیر استفاده کنید:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&top_views=yes"}
برای نمایش مطالب به صورت تصادفی از کد زیر استفاده کنید:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&random=yes"}
برای نمایش مطالب با بیشترین نظرات از کد زیر استفاده کنید:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&top_comm=yes"}
برای نمایش مطالب با بیشترین امتیاز از کد زیر استفاده کنید:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&top_rating=yes"}
برای نمایش مطالب یک بخش و یا چند بخش بخصوص از تگ زیر استفاده کنید:
&show_cat=1
نمونه:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&top_rating=yes&show_cat=1"}
اگر مایل هستید بعضی از پستها در اسلایدر به نمایش گذاشته شوند، از تگ زیر استفاده کنید:
&post_id=1,2,3
نمونه:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&last=yes&post_id=1,2,3"}
برای غیر فایل کردن کش از تگ زیر استفاده کنید:
nocache=y
نمونه:
{include file="engine/modules/block.pro.2.php?&block_id=46&template=blockpro&img_size=282x150&news_num=5&last=yes&nocache=y"}
تنظیمات مربوط به اسلایدر و کنترل اسلایدر:
۱. چگونه میتوانیم مدت زمان نمایش اسلایدر را تغییر دهیم؟
با ویرایش کد زیر:
speed:3500,
۲. چگونه میتوانیم سرعت تغییر اسلاید ها را تغییر دهیم؟
با ویرایش کد زیر:
changeSpeed:400,
۳. چگونه میتوانیم کمله "توقف" را هنگام کلیک کردن بر روی دکمه توقف نمایش دهیم و یا بلعکس؟
با ویرایش کد زیر:
animatePause: true,
به جای true باید false قرار دهید.
چگونه میتوانیم افکت اسلاید ها را تغییر دهیم؟
با ویرایش کد زیر:
effect: 'slideLeft',
برای نمایش اسلایدها به صورت محو شوند کد fade را قرار دهید.
چگونه میتوانیم قابلیت متوقف شدن اسلایدر را هنگامی که موس را بر روی آن می آوریم غیر فعال کنیم؟
با ویرایش کد زیر:
hoverPause: true
به جای true باید false بگذارید.