سوال راجع به اسلاید شو

[mehrad]

سلام
میخواستم ببینم اسلایدشو ها هم با جی کوئری ساخته میشن؟
در کل ساخت 3-4 نمونه اسلایدشو رو اموزش بدید ممنون میشم

[sepastian]

بله در بیشتر طراحی وب های از این فناوری جی کوئری بیشتر برای اسلایدشو استفاده میشه که نمونه ای از اون رو آموزش میدم
نمایش اسلایدی یا همان SlideShow، برای نمایش تصاویر، به‌صورت متحرک و پشت ِ سرهم به‌کار می‌رود. احتمالا نمونه‌هایی‌ از نمایش اسلایدی را در سایت‌های مختلف مشاهده کرده‌اید.
به روش‌های مختلف می‌شود نمایش اسلایدی ساخت، اما جی‌کوئری کارمان را در این مورد بسیار آسان و حجم کدمان را مقادیری کم‌تر کرده است

کدهای اچ‌تی‌ام‌ال ِ زیر را می‌نویسم:

کد PHP:

<div id="slideshow">
<img src="01.jpg" alt="Slideshow Image 1" class="active" />
<img src="02.jpg" alt="Slideshow Image 2" />
<img src="03.jpg" alt="Slideshow Image 2" />
</div> 


نکته: حتما باید کلاس ِ اولین تصویر، active باشد.
دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه می‌کنیم

کد PHP:

#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
} 


حالا یک فانکشن با نام ِ slideswitch تعریف می‌کنیم و کدهای مربوط به افکت ِ نمایش اسلایدی‌مان را در آن می‌نویسیم:

کد PHP:

function slideSwitch() {
var $active = $('#slideshow IMG.active');
     
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
     
var $next =  $active.next().length ? $active.next()
: $('#slideshow IMG:first');
     
$active.addClass('last-active');
     
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
     
$(function() {
setInterval( "slideSwitch()", 5000 );
}); 


مدت‌زمان توقف هرعکس بسته به مقداری‌ست که به setInterval() می‌دهید (خط 19). الان روی 5000 یعنی 5 ثانیه می‌باشد که باتوجه به نیاز خود می‌توانید آن را تغییر دهید.
از[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...] میتونید فایل آماده از این کد نویسی رو مشاهده کنید
و برای دریافت کامل این اسلاید شو میتوانید لینک زیر را دانلود نمائید
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
منبع:انجمن های تخصصی الماس سافت

[mehrad]

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

[sepastian]

ببینید این راه ساده یه که توضیح دادم ولی ببینید برای لینک دادن به عکس اولین باکس کد که در آموزش بالا قرار دادم اگه به شکل زیر تغییرش بدید میتونید به عکس ها هم لینک بدید

کد PHP:

<div id="slideshow">
<a target="_blank" href="لینک عکس1"><img src="عکس1" alt="Slideshow Image 1" class="active" /></a>
<a target="_blank" href="لینک عکس2"><img src="عکس2" alt="Slideshow Image 2" /></a>
<a target="_blank" href="لینک عکس3"><img src="عکس3" alt="Slideshow Image 2" /></a>
</div> 


امیدوارم توضیحات کامل باشه

[mehrad]

ممنون ولی اگر میشه چند نمونه دیگه هم اموزش بدید مثلا مثل این اسلاید شو این سایت:[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
یک سوال هم دارم مثلا میگن اسلاید شو نیوک یعنی چی؟ مگه کد با کد فرق داره؟ مگه نباید این کد رو بذاریم تو قالب؟

[mehrad]

راستی سوالات راجع به دریم ویور اینجا بپرسم؟اخه دیگه یاهو آن نمیشی!!

[sepastian]

برای دریم ویور رو در انحمن های طراحی وب مطرح کنید

[mehrad]

میشه چند نمونه دیگه آموزش بدید؟اسلای شو هایی که میشه تو قالب سایت گذاشت

[sepastian]

من آموزش جامع و کلی از برنامه نویسی تحت زبان جی کوئری رو در سایت گذاشتم هم میتونید از بخش جی کوئری یادبگیرید و نمونه های برنامه نویسی شده ی جی کوئری زیادن میتونید با سرچ اونها رو پیدا کنید من هم سعی میکنم مجموعه ی کلی از هر نمونه جی کوئری هستش رو در اینجا قرار بدم