آموزش قرار دادن آخرین ارسالهای متحرک ویبولتین به صورت افقی (تایپی)

[amin khan]

سلام
این آموزش توسط ایران انجمن تهیه شده است لطفا در صورت کپی برداری از حذف منبع خوداری فرمایید.

​

قبل از هر چیز بگم که آموزش اضافه کردن این نوع آخرین ارسال ها در سایت های دیگری نیز قرار گرفته ولی این اخرین ارسالها که در اینجا آموزش آن را قرار داده ام به صورت اصلاح شده و تغییرات از جمله تغییر رنگ بندی و اصلاح اندازه کادر آن می باشد .

1- به قسمت جستجوی قالب برید و headinclude رو جستجو کنید.


2- کد های زیر رو در آخر کدها اضافه کنید:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="js/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

3-عبارت additional.css رو جستجو کنید و وارد آن بشید .
4- کد های زیر رو به آخر کدها اضافه کنید:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* StatorLatest Threads Ticker  */
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#ticker-wrapper * {
        margin-left: auto;
        margin-right: auto;

}

#ticker-wrapper.has-js {
    margin: 20px auto 20px auto;
    padding: 0px 20px;
    width: 850px;
    height: 30px;
    display: block;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #f3f3f3;
    font-size: 1.1em;
}
#ticker {
    width: 775px;
    height: 30px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f3f3f3;
}
#ticker-title {
    padding: 5px;
    color: #990000;
    font-weight: bold;
    background-color: #f3f3f3;
    text-transform: none;
}
#ticker-content {
    margin: 0px;
    padding: 5px;
    position: absolute;
    color: #1F527B;
    font-weight: normal;
    background-color: #f3f3f3;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2em;

}
#ticker-content:focus {
    none;
}
#ticker-content a {
    text-decoration: none;    
    color: #1F527B;
}
#ticker-content a:hover {
    text-decoration: underline;    
    color: #0D3059;
}
#ticker-swipe {
    padding-top: 9px;
    position: absolute;
    top: 0px;
    background-color: #f3f3f3;
    display: block;
    width: 800px;
    height: 23px; 
}
#ticker-swipe span {
    margin-left: 1px;
    background-color: #f3f3f3;
    border-bottom: 1px solid #1F527B;
    height: 12px;
    width: 7px;
    display: block;
}
#ticker-controls {
    padding: 8px 0px 0px 0px;
    list-style-type: none;
    float: left;
}
#ticker-controls li {
    padding: 0px;
    margin-left: 5px;
    float: left;
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: block;
}
#ticker-controls li#play-pause {
    background-image: url('../images/controls.png');
    background-position: 32px 16px;
}
#ticker-controls li#play-pause.over {
    background-position: 32px 32px;
}
#ticker-controls li#play-pause.down {
    background-position: 32px 0px;
}
#ticker-controls li#play-pause.paused {
    background-image: url('../images/controls.png');    
    background-position: 48px 16px;
}
#ticker-controls li#play-pause.paused.over {
    background-position: 48px 32px;
}
#ticker-controls li#play-pause.paused.down {
    background-position: 48px 0px;
}
#ticker-controls li#prev {
    background-image: url('../images/controls.png');
    background-position: 0px 16px;        
}
#ticker-controls li#prev.over {
    background-position: 0px 32px;        
}
#ticker-controls li#prev.down {
    background-position: 0px 0px;        
}
#ticker-controls li#next {
    background-image: url('../images/controls.png');    
    background-position: 16px 16px;    
}
#ticker-controls li#next.over {
    background-position: 16px 32px;    
}
#ticker-controls li#next.down {    
    background-position: 16px 0px;    
}
.js-hidden {
    display: none;
}
#no-js-news {
    padding: 10px 0px 0px 45px; 
    color: #f3f3f3;
}
.left #ticker-swipe {
    left: 80px;
}
.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
    float: left;
}
.left #ticker-controls {
    padding-left: 6px;
}
.right #ticker-swipe {
    right: 80px;
}
.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
    float: right;
}
.right #ticker-controls {
    padding-right: 6px;
}

5-در قسمت جستجوی قالب Navbar رو جستجو کنید و وارد آن بشید.
6- کدهای زیر رو در آخر کدها وارد کنید.

<!--ticker-->
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
    <script type="text/javascript">
<!--
    for (var i = 0; i < threads.length; i++)
    {
        document.write('<li><a href="{vb:raw vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' + threads[i]['title'] + '</a>' + '   ' + '<span style="color: red;">Posted By:</span>'+ ' ' + threads[i]['poster'] + '</a>' + '</li>');
    }
//-->
</script>
</ul>
</div>
<!--ticker-->

7- فایل پیوستی زیر رو در شاخه اصلی هاستتون آپلود کنید.

 

[WALKMAN]

درود. چرا اینطوری شده؟

و اینکه توی صفحه اصلی هم نشون میده، چکار کنم که تو صفحه اصلی نشون نده؟

 

[amin khan]

برای حل مشکل اول به داخل هاستتون برید ، فایل jquery.ticker را edit کنید و مقابل عبارت titleText: متن مورد نظر رو وارد کنید.

و اینکه توی صفحه اصلی هم نشون میده، چکار کنم که تو صفحه اصلی نشون نده؟

برای حل این مشکل هم کدی که در قسمت قالب Navbar اضافه کردین را حذف کنید و به جاش این کد رو در قالب showthread اضافه کنید.

 

[WALKMAN]

سلام. دوتا سوال داشتم
1- چطور میشه سرعتش رو کمتر کرد؟
2- عکس های موجود نشون داده نمی شوند. چرا؟منظورم عکس هایی هست که سمت چپ کادر موجوده.

 

[admin]

1- چطور میشه سرعتش رو کمتر کرد؟

سلام
فایل jquery.ticker.jz رو باز کنید در انتهای کدهای درون اون قسمتی رو که براتون مشخص کردم تنظیم کننده سرعت خواهد بود:

    $.fn.ticker.defaults = {
      [COLOR=red] [COLOR=blue] speed: 0.10,[/COLOR][/COLOR]
        ajaxFeed: false,
        feedUrl: '',
        feedType: 'xml',
        displayType: 'reveal',
        htmlFeed: true,
        debugMode: true,
        controls: true,
        titleText: '?¢?®?±UŒU† ?§?±?³?§U„U‡?§UŒ ?§UŒ?±?§U† ?§U†?¬U…U† :',
        direction: 'rtl',
        pauseOnItems: 3000,
[COLOR=red]        fadeInSpeed: 600,
        fadeOutSpeed: 300[/COLOR]

2- عکس های موجود نشون داده نمی شوند. چرا؟منظورم عکس هایی هست که سمت چپ کادر موجوده.

پوشه مربوط به تصاویر رو که در پست اول پیوست شده در مسیر مور نیاز در هاستتون آپلود کنید.

موفق باشید

 

[mary.brayant]

:ترس:سختهههههههههه!!!!!!!!!:نه:
​

 

[WALKMAN]

فایل controls.png رو در پوشه image آپلود می کنم ولی همچنان نشون داده نمی شه.

 

[admin]

​

فایل controls.png رو در پوشه image آپلود می کنم ولی همچنان نشون داده نمی شه.

والله ما به همین طریق عمل کرده ایم و تست شده و مشکلی نبوده. در نحوه ی انجام کار دقت بیشتری کنید.
عکس رو داخل پوشه images آپلود کنید.