loading...
پايگاه اينترنتي نهاد
آخرین ارسال های انجمن
вєηуαмιη بازدید : 1291 شنبه 01 مهر 1391 نظرات (0)
راهنمای استفاده
محتوای داینامیک یا نمایش به صورت اسلایدی امروزه کاربردهای زیادی در صفحات وی دارد و در قسمت های مختلف سایت از این ابزار مناسب و کاربردی استفاده می شود. در اینجا اسکریپت نسبتا" ساده ای از محتوای داینامیک را آورده ایم. این کد سه فایل ضمیمه دارد که می بایست ابتدا آنها را دانلود نمایید. این سه فایل عبارتند از یک فایل js, یک فایل CSS و آیکن لودینگ (Loading). مطابق کد نمونه در قسمت head فایل های CSS و js را فرا خوانی نمایید. کد نمونه 1 یا 2 (کد پیشنهادی: نمونه 2) را کپی و در بخش مورد نظر از صفحه قرار دهید. با استفاده از فایل CSS ساختار گرافیکی را مطابق سلیقه خود می توانید اصلاح نمایید. با استفاده از قسمت هایی که در کد به صورت پررنگ نمایش داده شده است سرعت تغییر فریم و افکت و تنظیمات کنترلی را می توانید تغییر دهید. در صورت افزایش تعداد فریم ها، بخشی از کد را که با رنگ آبی مشخص شده به تعداد دلخواه اضافه نمایید، با افزایش هر فریم شماره مربوطه به صورت خودکار اضافه می شود. به جای محتوای شماره 1، 2 و 3 محتوای مورد نظر خود را جایگزین نمایید. تگ <a> که با رنگ قرمز مشخص شده است یک لینک میانبر به فریم مورد نظر شما می باشد. در فایل js آدرس آیکن لودینگ را در صورت نیاز اصلاح نمایید.
توجه: هر دو نمونه 1 و 2 یکسان بوده و تنها در چیدمان و شکل لینک های کنترلی تفاوت دارند.
در اسکریپت نمونه 2 به جای لینک متنی، از تصویر نیز می توانید استفاده نمایید. (بخش سبز رنگ)
<head>
<script type="text/javascript" src="contentslider.js"></script>
<link href="contentslider.css" rel="stylesheet" type="text/css">
</head>

<body>

<!-- =================== نمونه 1 ==================== -->
<div align="center">

<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
محتوای شماره 1
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
محتوای شماره 2
</div>

<div class="contentdiv">
محتوای شماره 3
</div>

</div>
<div id="paginate-slider1" class="pagination">

</div>
<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>
<!-- ---------------------------------- انتهای کد نمونه 1 ------------------------------ -->

<!-- =================== نمونه 2 ==================== -->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
محتوای شماره 1
</div>

<div class="contentdiv">
محتوای شماره 2 <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
محتوای شماره 3
</div
>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc">page 1</a> <a href="#" class="toc anotherclass">page 2</a> <a href="#" class="toc">page 3</a> <a href="#" class="prev" style="margin-left: 10px"><strong><</strong></a> <a href="#" class="next"><strong>></strong></a></div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
</body>

ارسال نظر برای این مطلب

کد امنیتی رفرش
درباره ما
این وب سایت جهت رفع نیاز های کاربران می باشد چنانچه مایل هستید در قسمت تالار با هم انجمن این وب سایت را راه اندازی خواهیم کرد شما می توانید با ثبت نام در این وب سایت ما را در این امر خیر یاری فرمایید .
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • نظرسنجی
    طرفدار کدوم تیم هستید؟
    بهترین خواننده مورد علاقه شما؟
    آمار سایت
  • کل مطالب : 764
  • کل نظرات : 250
  • افراد آنلاین : 32
  • تعداد اعضا : 497
  • آی پی امروز : 226
  • آی پی دیروز : 618
  • بازدید امروز : 532
  • باردید دیروز : 1,990
  • گوگل امروز : 0
  • گوگل دیروز : 3
  • بازدید هفته : 8,188
  • بازدید ماه : 8,188
  • بازدید سال : 166,708
  • بازدید کلی : 4,191,128