درخواست کمک: دکمه Arrow برای اسلایدر

[jNaghiloo]

سلام دوستان من میخوام برای اسلایدرم دکمه های next و prev بذارم ... میشه کمکم کنید؟؟



<ul id="slides"> <li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/Minecraft.jpg" /></li> <li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/2.jpg" /></li> <li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/3.jpg" /></li> <li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/4.jpg" /></li></ul><div id="overlay" style="background:#26292E; width:100%; height:100%; position:absolute; top:0px; right:0px; z-index:2; opacity:0.5;"></div><a id="right-control">&lsaquo;</a><a id="left-control">&rsaquo;</a>


/* Switching Slides */ $(document).ready(function(){
$("#slides li:gt(0)").hide();
setInterval(function() {
$('#slides li:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slides');
}, 4000);
});

[jNaghiloo]

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

[jNaghiloo]

دوستان کلا کسی جواب نمی ده؟؟
من از این انجمن تعریف شنیده بودم !!

[vpsman]

با توجه به اینکه خودتون تا ایتجاشو نوشتین من تئوریشو میگم خودتون کامل کنید
هر عکسی که fadein میشه رو بهش یه کلاس مشخص اختصاص بده
بعد وقتی کاربر روی دکمه next کلیک کرد بر اساس اون کلاس بفهم فرزند چندمه بعد عدد بدست اومده ره به علاوه ۱ کن(جواب میشه عکس بعدی که باید نمایش داده بشه ) و اون رو نمایش بده

[jNaghiloo]

توضیح عالی بود
من کد رو به صورت زیر تغییر دادم :



/* Switching Slides */
$(document).ready(function(){
$("#slides li:gt(0)").hide();
setInterval(function() {
$('#slides li:first')
.fadeOut(1000)
.removeClass('soosk')
.next()
.fadeIn(1000)
.addClass('soosk')
.end()
.appendTo('#slides');
}, 4000);
});


این حذف و اضافه کلاس ! درسته؟؟

در مورد فرزند چندم هم یک توضیح میدید چطور بدست میاد؟؟ من خیلی با jQuery آشنایی ندارم متاسفانه

[raminrrrrrr]

سلام از هر سایتی که پلاگین اسلایدر را دانلود کنید در قسمت توضیحات همه این موارد اورده شده

[jNaghiloo]

سلام از هر سایتی که پلاگین اسلایدر را دانلود کنید در قسمت توضیحات همه این موارد اورده شده

من پلاگین دانلود نکردم میخوام خودم بنویسم ... فقط کتابخانه query اضافه شده

[raminrrrrrr]

من پلاگین دانلود نکردم میخوام خودم بنویسم ... فقط کتابخانه query اضافه شده


اها من آشنایی با زبان جاو اسکریپت ندارم وبرای اسلایدر از از پلاگین آماده استفاده میکنم...شرمنده دوست عزیز

[vpsman]

اره کارت درست بود
برای پیدا کردن فرزند از این دستور استفاده کن


index = $( "Classname" ).index();

میشه:
index = $( ".soosk" ).index();

[jNaghiloo]

اره کارت درست بود
برای پیدا کردن فرزند از این دستور استفاده کن


index = $( "Classname" ).index();

میشه:
index = $( ".soosk" ).index();





دوست عزیز بابت توضیحات سپاس
به دلیل دانش کمم نتونستم پیاده سازی کنم
میشه کدش رو بنویسی تا باعث یادگیری هم بشه؟؟
بابت صبر و حوصله برای توضیح ممنون...

==============
مرجع فارسی مبتدی برای آموزش jQuery داری برای شروع؟؟

[vpsman]

سعی کردم خیلی ساده طرز استفادشو برات بنویسم.
البته خودت تغییرش بده و بهتره هر تیکه رو یه فانکشن کنی که از بازنویسی جلوگیری بشه




$(document).ready(function(){
$("#slides li:gt(0)").hide();
setInterval(function() {
$('#slides li:first')
.fadeOut(1000)
.removeClass('soosk')
.next()
.fadeIn(1000)
.addClass('soosk')
.end()
.appendTo('#slides');
}, 4000);
$(".next").click(function(){
activeid = $("#slides li.soosk").index()
nextshow = activeid+1;
$("#slides li").hide();
$("#slides li").eq(nextshow).fadeIn(1000)
})
});

[jNaghiloo]

عالی بود کار میکنه ولی یک مشکل هست که با یک کلیک نمیره اسلاید بعدی
یک بار دو تا کلیک میکنم میره دفعه بعد 4 بار باز دو بار و ...
اصلا نظم خاصی نداره !!
من بجای کلاس next که شما گذاشتید از آیدی right-control استفاده کردم که تو کدهام هست



/* Switching Slides */
$(document).ready(function(){
$("#slides li:gt(0)").hide();
setInterval(function() {
$('#slides li:first')
.fadeOut(1000)
.removeClass('soosk')
.next()
.fadeIn(1000)
.addClass('soosk')
.end()
.appendTo('#slides');
}, 4000);
$("#right-control").click(function(){
activeid = $("#slides li.soosk").index()
nextshow = activeid+1;
$("#slides li").hide();
$("#slides li").eq(nextshow).fadeIn(1000)
});
});


می تونید اینجا ببینید: همون اسلایدر اول صفحه: Zebco.ir

[vpsman]

به این دلیله که شما ساختارت این شکلیه که همه عکسها رو تو LI اولی داری میریزی و نشون میدی!!! درسته؟
سعی کن هر LI تو جای خودش حالتش show بشه (به ترتیب پشت سر هم)

[jNaghiloo]

به این دلیله که شما ساختارت این شکلیه که همه عکسها رو تو LI اولی داری میریزی و نشون میدی!!! درسته؟
سعی کن هر LI تو جای خودش حالتش show بشه (به ترتیب پشت سر هم)

من ساختار رو گذاشتم بازم می ذارم:



<ul id="slides">
<li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/Minecraft.jpg" /></li>
<li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/2.jpg" /></li>
<li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/3.jpg" /></li>
<li style=""><img src="<?php bloginfo('template_url'); ?>/images/slider/4.jpg" /></li>
</ul>
<div id="overlay" style="background:#26292E; width:100%; height:100%; position:absolute; top:0px; right:0px; z-index:2; opacity:0.5;"></div>
<a id="right-control">&lsaquo;</a>
<a id="left-control">&rsaquo;</a>


در ضمن من یک مشکل دیگ هم پیدا کردم
الان دکمه prev هم ساختم و میزنم بره غقب به مشکل میخوره و با اون چهارثانیه که برا هر اسلاید گذاشتم تداخل داره
در صورتیکه وقتی میره عقب تازه 4 ثانیه اون اسلاید شروع بشه

- - - Updated - - -


به این دلیله که شما ساختارت این شکلیه که همه عکسها رو تو LI اولی داری میریزی و نشون میدی!!! درسته؟
سعی کن هر LI تو جای خودش حالتش show بشه (به ترتیب پشت سر هم)

من از همین کد جی کوئری استفاده کردم ولی فکر میکنم همین طور که شما می فرمایید هست ... چون هر li که میخواد نشون بده میاد اول ... این رو از کجا باید تغییر داد ؟؟ من کد دیگه ای ندارم !!
فکر کنم خود همین تابع جی کوئری این کار رو میکنه

[avaiehagh]

کسی می تونه راهنمایی کنه؟؟ هنوز منتظرم !!

[ms313]

به این یه نگاهی کنید ببتید به دردتون می خوره یا نه ؟!
http://up.vbiran.ir/uploads/26084146427867925231_slideshow-ms313.zip