سلام به همه کاربران سایت ایران هکس . به خاطر درخواست های مکرر بازدیدکنندگان ، آموزش ساخت یک اسلایدشو ساده رو آموزش میدم که امیدوارم مفید باشه…برای خواندن آموزش و دانلود فایل آماده اسلایدشو به ادامه مطلب مراجعه کنید .
در این آموزش به جزئیات اشاره نکردم و افراد مبتدی درصورتی که با کدها آشنایی ندارند میتوانند فقط از فایل آماده استفاده کنند . این آموزش مختصر می باشد و برای افرادی که با کدهای HTML و CSS آشنایی دارند نوشته شده است .
برای نوشتن کدهای مربوط به اسلایدشو ابتدا فایل آماده رو دانلود کنید . یک فایل جاوا با نام contentslider.js داخل فایل ریپ قرار دارد .
در پوشه ای که قصد ایجاد کدهای مربوط به اسلایدشو را دارید فایل contentslider.js را کپی کنید و یک پوشه جدید با نام img برای قرار دادن تصاویر بسازید . سپس با یک ادیتور مناسب کدهای زیر را در آن بنویسید .
<html>
<head><title>IRANHEX-Slider</title></head>
<style type="text/css">
.sliderwrapper{
background:#f6f6f6;
position:relative;
overflow:hidden;
width:950px;
height:307px;
border-bottom:0;}
.sliderwrapper .contentdiv{
visibility:hidden;
left:0;
top:0;
padding:0px;
background:#f6f6f6;
width:950px;
height:307px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1;
opacity:1;
margin:0;}
.pagination{
width:935px;
text-align:left;
padding:0px 10px;
font-size:9pt;
background:#f6f6f6;
border-bottom:1px solid #f6f6f6;
border-top:1px solid #f6f6f6;
direction:ltr;
height:18px;}
.pagination a{
padding:0px 5px;
text-decoration:none;
color:#000;
background-color:#f6f6f6;
font-family:Arial;
font-weight:bold;}
.pagination a.selected{color:#666;background-color:#f6f6f6;}
.pagination a:hover{color:#f6f6f6;background-color:#555;}
</style>
تا اینجا کدهای CSS مربوط به اسلایدر را نوشتیم . حالا باید فایل جاوا را فراخوانی کنیم . به صورت زیر :
<script type="text/javascript" src="contentslider.js"></script>
خوب . کدهای مربوط به بدنه اسلایدشو رو هم اضافه می کنیم :
<center>
<div style="background-image: url(slide-bg.jpg); width: 950px; height: 287px; padding-top:0px;">
<div id="slider1">
<div>
<a id="ctl04_rpt1_ctl01_hyp1" href="http://www.iranhex.com/" target="_blank">
<img width="980" height="317" id="ctl04_rpt1_ctl01_img1" src="img/1.jpg" style="border-width:0px;" />
</a>
</div>
<div>
<a id="ctl04_rpt2_ctl02_hyp2" href="http://www.iranhex.com/">
<img width="980" height="317" id="ctl04_rpt1_ctl01_img1" src="img/2.jpg" style="border-width:0px;" />
</a>
</div>
<div>
<a id="ctl04_rpt3_ctl03_hyp3" href="http://www.iranhex.com/" target="_blank">
<img width="980" height="317" id="ctl04_rpt1_ctl01_img1" src="img/3.jpg" style="border-width:0px;" />
</a>
</div>
</div>
این اسلایدشو دارای یک بخش شماره تصاویر می باشد که باید کد آن را هم اضافه کنیم .
<div id="paginate-slider1">
</div>
کدهای مربوط به بدنه اسلایدر به پایان رسید . تنها قسمت باقی ماننده نوشتن کدهای جاوا برای تعریف عملکرد اسلایدر است که به صورت زیر نوشته می شوند :
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1",
contentsource: ["inline", ""],
toc: "#increment",
nextprev: ["", ""],
revealtype: "click",
enablefade: [true, 0.050],
autorotate: [true, 3500],
onChange: function(previndex, curindex){
}
})
</script>
با تغییر مقدار enablefade میتوانید سرعت Fade شدن تصاویر و با تغییر مقدار autorotate سرعت تغییر تصاویر را تعیین کنید . در پایان هم تگ های آخر را می بندیم .
</div>
</center>
</html>
با تشکر …
نویسنده : محمد رضا محمودی
۱۵ دیدگاه برای این مطلب ارسال شده است.
ممنون دوست عزیز
اینا رو وقتی درست کردیم کجا باید قرارش بدبم . تو چه پوشه ای ؟
[پاسخ]
سلام
این اسلاید شویی که گذاشتین با اونی که بالای سایت خودتون هست فرق داره،این یکی شماره ۱و۲و۳ داره
اگه بخوایم شماره ها رو برداریم باید چیکار کنیم ؟؟؟
راستی اگر هم میشه
یه آموزش برای اون اسلاید شویی که بالای سایت خودتون هست بذارید
اون بهتره
ممنون
[پاسخ]
Mohamad Reza پاسخ در تاريخ فروردین ۲۲م, ۱۳۹۰ ۷:۵۱ ق.ظ:
این اسلایدر چون توی فایل جاواش کدهای مربوط به شماره صفحات قرار داده شده اگر کد مربوط به اون رو حذف کنید . اسلایدر کار نمیکنه…
[پاسخ]
خدا وکیلی سوال من چه ربطی به جوابی که شما دادین دره ؟؟؟؟؟؟؟؟؟؟
[پاسخ]
من میگم اون اسلاید شوی بالای سایت خودتون رو بذارید
و اینکه اون شما ره ها رو چجوری میشه برداشت که خراب نشه ؟؟؟
[پاسخ]
Mohamad Reza پاسخ در تاريخ فروردین ۲۴م, ۱۳۹۰ ۶:۵۹ ق.ظ:
دوست عزیز شما مثل اینکه طلبکارم هستید!!! گفتم شماره صفحات رو نمیشه حذف کرد چون وارد فایل جاوا شده و توی تخصص من نیست…موفق باشید…
[پاسخ]
سلام دوست عزیز
من طلبکار نیستم
آخه من شما فقط به یه سوال من جواب دادی
دوباره حالا هم به یکیش جواب دادی
من میگم یه آموزش برای ساخت اسلاید شو مثل همونی که خودت بالای سایتت گذاشتی بده
دمت گرم
[پاسخ]
یه آموزش برای ساخت اسلاید شو مثل همونی که خودت بالای سایتت گذاشتی بده
دمت گرم
[پاسخ]
لطفا آموزش قرار دادن بخش (( آخرین قالب ها)) رو تو سایت بذارین
یه جوری باشه ک بشه عکس ها رو بصورت دستی گذاشت
و قسمت تعداد نظرات هم نداشته باشه
مرسی!
[پاسخ]
سلام خوبی؟
حالا ما این فایل هارو دانلود کردیم بعد بخوایم از این اسلاید توی یه قسمتی از سایت استفاده کنیم کل کدهای فایل iranhex-slider.html رو باید توی قسمت دلخواه بزاریم ؟!
[پاسخ]
محمد رضا محمودی پاسخ در تاريخ شهریور ۸م, ۱۳۹۰ ۷:۴۱ ب.ظ:
سلام . علاوه بر اون باید فایل ها رو هم توی مکان جدید منتقل کنید و آدرس های فراخوانی رو تغییر بدید…
[پاسخ]
یاشار کرم زاده پاسخ در تاريخ شهریور ۹م, ۱۳۹۰ ۱:۱۱ ق.ظ:
آقا چرا این اینطوری میشه !!! :دی فایل هارو میریزم توی یه فولدر لینک ها رو هم تغییر میدم اما وقتی فایل اسلایدر رو میزنم بجای اینکه اسلاید رو نیشون بده میاد صفحه اصلی سایت رو لود میکنه :دی جریانش چیه این !؟!؟
ببین خودت : neginpps.com/slider/shop/iranhex-slider.html
[پاسخ]
داداش لینک دانلود خرابه!
[پاسخ]
mer30 عالی بود واقعا به دردم خورد
[پاسخ]
barikala mohamadreza kheili khosham omad b inke sene kami dari ama
etelaated alie
omidvaram hamishe haminjor movafagh bashi
[پاسخ]