اسلایدشو حرفه ای Rhino Slider

دوشنبه, ۲۲ام خرداد , ۱۳۹۱ | ۳۵ دیدگاه

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

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

مرحله اول : دریافت پلاگین

اول از همه آخرین نسخه از سورس اصلی پلاگین رو دریافت کنید : لینک دریافت پلاگین

مرحله دوم : اضافه کردن فایل ها

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

اضاقه کردن استایل مورد نیاز

<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">

برای راه اندازی این پلاگین به کتابخانه جی کوئری ۱٫۴٫۲ یا بالاتر نیاز دارید

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/rhinoslider.js"></script>

مرحله سوم : فراخوانی تابع

خوب تا اینجا پلاگین رو نصب کردیم و حالا باید توی تم فراخوانی کنیم ، واسه ای کار کد زیر رو پایین فایل قالبتون قبل از بسته شدن تگ BODY قرار بدید

<script type="text/javascript">
$(document).ready(function() {
$('#your-id').rhinoslider({
 options: value
 });
});
</script>

چند تا نکته مهم :
به جای your-id آی دی DIV مورد نظر خودتون رو بزارید
به جای option می تونید از فابلیت های پلاگین استفاده کنید ، مثل کد زیر :

<script type="text/javascript">
$(document).ready(function() {
 $('#slideshow').rhinoslider({
 effect: 'transfer'
 });
});
</script>

بقیه تنظیمات پلاگین رو می تونید از اینجا ببینید یا می تونید به این صفحه برید و تنظیمات رو انجام بدید و کد رو تحویل بگیرید

Be Sociable, Share!


۳۵ دیدگاه


  1. maryam
    ۲۲ خرداد ۱۳۹۱

    salam man mikhastam addres emailetono dashte basham chon chand ta soal daram mikhastam vasam javabesho begin age mishe vasam ye email befrestef




  2. سینا
    ۲۳ خرداد ۱۳۹۱

    واقعا ممنون! این اسلایدشو دقیقا همون چیزی بود که میخواستم! یک عمر دنبال تو میگشتم!!




  3. raha
    ۲۳ خرداد ۱۳۹۱

    برای اینکه توی ie جواب بده باید چی کار کنم؟؟؟؟؟؟؟؟؟؟




  4. قاسم
    ۲۴ خرداد ۱۳۹۱

    سلام دوستان
    هر کی دوست داره که نمونه ای از این اسلایدشو رو ببینه به آدرس زیر بره :

    http://olomrayaneh.org

    البته من یه خورده دست کاریش کردم




  5. محسن
    ۲۴ خرداد ۱۳۹۱

    سلام.

    این پلاگین یه سری فایل اسکریپت دیگه هم داره:
    easing.js و mousewheel.js و rhinoslider-1.05.min.jsاینارو هم باید به فایل پروژه خودمون وارد کنیم؟




  6. بهنام
    ۹ مرداد ۱۳۹۱

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

    اگر مایل به تبادل لینک با سایت ما هستید ابتدا ما را با نام
    .: پرشین بام | دانلود بالینک مستقیم :.
    یا
    .: شبکه دانلود رایگان :.
    و با آدرس
    http://www.PersianBam.ir
    لینک کنید و به ما اطلاع دهید

    با تشکر
    مدیریت پرشین بام




  7. رویال
    ۲۰ مرداد ۱۳۹۱

    ممنون دستت درد نکنه@@



  8. […] با سلام ، بالاخره بعد از مدت ها ، یه فرصت پیش اومد تا با یک آموزش دیگه خدمت شما دوستان باشم توی این آموزش می خوام یک اسلایدشو خیلی حرفه ای و انعطاف پذیر رو بهتون معرفی کنم ، پس با من همراه باشید ! مرحله اول : دریافت پلاگین اول از همه آخرین نسخه از سورس اصلی پلاگین رو دریافت کنید : لینک دریافت پلاگین مرحله دوم :ادامه مطلب […]




  9. علی وب
    ۵ شهریور ۱۳۹۱

    خیلی ممنون . قضیه چیه که مدت هاست دیر به دیر سایت رو آپدیت می کنید ؟




  10. مجتبی
    ۶ شهریور ۱۳۹۱

    علی : فقط به علت کمبود وقت !!




  11. نگین
    ۶ شهریور ۱۳۹۱

    سلام
    من از مطلب شما استفاده کردم ولی نتونستم اسلایدی که میخام بسازم. می شه دقیق بگید چه فایلهایی رو باید داخل پروژ کپی کنم و اضافه کنم؟ کد هایی که شما دادید با چیزی که من به عنوان پلاگین گرفتم فرق داره. لطفا کمکم کنید خیلی کارم گیره




  12. مجتبی
    ۶ شهریور ۱۳۹۱

    سلام دوست عزیز
    واسه راه اندازی اولیه این پروژه ۳ تا فایل نیاز دارید
    ۱- rhinoslider.css که توی پوشه css هست
    ۲- jquery-1.7.1.min.js که توی پوشه js هست
    ۳- rhinoslider-1.05.js که توی پوشه js هست و باید اسمشو به rhinoslider.js تغییر بدید




  13. نگین
    ۷ شهریور ۱۳۹۱

    ممنون
    ولی نمیدونم کجای کدم ایراد داره که درست نمیشه
    میشه کدم رو نگاه کنید و راهنماییم کنید:

    #slideshow {
    width:400px;
    height:500px;}

    داخل body

    HTML Caption
    http://www.rhinoslider.com

    $(document).ready(function() {
    $(‘#slideshow’).rhinoslider({
    showTime: 5000,
    autoPlay: true,
    captionsFadeTime: 300,
    partDelay: 500,
    showCaptions: ‘always’,
    showBullets: ‘always’,
    changeBullets: ‘before’,
    slidePrevDirection: ‘toBottom’,
    slideNextDirection: ‘toBottom’
    });
    });

    اگه میتونید زودتر جواب بدید




  14. مجتبی
    ۷ شهریور ۱۳۹۱

    این کدها اکثرا مشکل دارن ، اگه میشه آدرسی که پلاگین رو نصب کردید بدید من چک کنم




  15. نگین
    ۸ شهریور ۱۳۹۱

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




  16. حامی
    ۱۳ مهر ۱۳۹۱

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

    ممنون میشم بگید کد آجاکس رو چطوری تغییر بدم یا فایل جی کوئری رو چطور فراخوانی کنم.

    var xmlHttp;

    function createRequest(){

    if(window.ActiveXObject){

    xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

    } else if(window.XMLHttpRequest){

    xmlHttp = new XMLHttpRequest();

    }

    }

    function ajax(url){

    createRequest();

    xmlHttp.open(“GET”, url, true);

    xmlHttp.onreadystatechange = updatepage;

    xmlHttp.send(null);

    }

    function updatepage(){

    document.getElementById(‘load_ajax’).innerHTML = “…لطفا کمی صبر کنید”;

    if(xmlHttp.readyState == 4){

    document.getElementById(‘load_ajax’).innerHTML = xmlHttp.responseText;

    }

    }

    function ajaxp(url){

    createRequest();

    xmlHttp.open(“GET”, url, true);

    xmlHttp.onreadystatechange = updatep;

    xmlHttp.send(null);

    }

    مثلا میخوام در همین صفحاتی که لود کردم از validation جی کوئری استفاده کنم.
    اما بعد از لود کار نمیکنه اما همینجوری صفحه فراخونی بشه کار میکنه.

    $.validator.addMethod(“NumbersOnly”, function(value, element) {

    return this.optional(element) || /^[0-9\-\+]+$/i.test(value);

    }, “فقط عدد وارد کنید”);

    $(“#form1”).validate();




  17. حمید
    ۱۷ مهر ۱۳۹۱

    اسلاید شوی زیبایی بود .

    http://netnic.ir
    با تشکر




  18. حمید
    ۸ دی ۱۳۹۱

    اسلاید شوی خوبیه! البته وب سایت خیلی خوبی دارین. موفق باشین.




  19. pedram
    ۲ اردیبهشت ۱۳۹۲

    سلام.ممنون از اسلاید شو.
    یه سوال.میشه کاری کرد که عکسا نسبت به اندازه خود اسلاید شو ریسایز بشه؟میخوام عکسا اگه بزرگتره از فالب نزنه بیرون و اگه کوچیتره فضای خالی نیفته تو فالب اسلاید شو.
    با سپاس.




  20. مجتبی
    ۲۶ اردیبهشت ۱۳۹۲

    پدرام : بله ، میشه ، دوتا راه داره
    ۱ – از پلاگین پی اچ پی TimThumb استفاده کنید
    ۲ – از دستورات فانکشن وردپرس استفاده کنید




  21. pedramb
    ۲ اردیبهشت ۱۳۹۲

    سلام.میشه تو این اسلاید شو زیر عکسایی که نمایش میده توضیحات نوشت؟ممنون.




  22. مجتبی
    ۲۶ اردیبهشت ۱۳۹۲

    سلام ، آره میشه ، باید یه مفداری css و Jquery بلد باشید ، حالا اگه بشه سعی می کنم آموزشش رو بزارم
    موفق باشید




  23. علی اصغر حسین زاده
    ۲۶ اردیبهشت ۱۳۹۲

    سلام دوست عزیز اگه میشه سایت من رو به ادرس
    http://www.novingamer.ir سایت خبری تحلیلی نوین گیمر
    لینک کنید به من هم خبر بدید تا من هم شما رو لینک کنم ممنون




  24. sima
    ۹ تیر ۱۳۹۲

    سلام من ۲ تا سوال دارم :
    ۱- من وقتی سایز div عکس ها و ul هارو برزگ میکنم دکمه های ۱۲۳۴ مخفی میشه یا زیر میمونه نمیدونم چیکارش کنم بیاد ؟
    ۲- caption رو کجا باید بنویسم به چه صورت تا نمایش بده ؟؟
    با تشکر




  25. مجتبی
    ۲۰ شهریور ۱۳۹۲

    سلام ،
    ۱ باید توی استایل بخش دکمه ها تغییراتی اعمال کنید
    ۲ برای caption باید یک div یا span درست کنید و به اون خصوصیت position:absolute رو بدید که روی عکس بیوفته




  26. hldk
    ۲۰ شهریور ۱۳۹۲

    دمت گرممممممممممممممممممم
    خیلی حال کردم !!!!




  27. مجتبی
    ۲۰ شهریور ۱۳۹۲

    خواهش می کنم




  28. امین
    ۱۹ اسفند ۱۳۹۲

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




  29. تازه کار
    ۱۱ مهر ۱۳۹۳

    سلام
    من کد نویسی طراحی و برنامه نویسی وب را تقریبا تا حدی که لازم دارم بلدم ولی نمیدونم چه جوری و کجا باید اون رو توی ورد پرس اعمال کنم. البته فقط با زبان جاوااسکریپت توی برنامه نویسی آشنایی دارم . منظورم اینکه توی برنامه های ویرایشگر باید این کار رو بکنم؟ یا اینکه توی خود ورد پرس توی قسمت ویرایشگرش باید اینکار رو بکنم؟ خواهش میکنم راهنماییم کنید.
    مرسی منتظر جوابتون هستم




  30. امین
    ۱ بهمن ۱۳۹۳

    چطور میشه کاری کرد که حالت پیش فرضش پلی باشه ، پازو پلیش زیاد جالب نیست راهی برای حذف پاز کردنش هست




  31. رها
    ۱ اسفند ۱۳۹۳

    ممنون تازه با سایتون اشنا شدم
    خیللی خوب بود




  32. shima
    ۲۰ خرداد ۱۳۹۴

    سلام چطوری میتونم یه اسلاید شو مثل لینک زیر رو متحرک کنم بطوری که برای حرکت عکس ها نیاز به کلیک کاربر نباشه و خودش پلی بشه
    http://www.eyecon.ro/spacegallery/#about



دیدگاه خود را بنویسید