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

یکشنبه, ۲۷ام تیر , ۱۳۸۹ | ۳۷ دیدگاه

این روزها برای ساخت انیمیشن و حرکت در وب کمتر سراغ فش میرویم و سعی میکنیم با جاوا اسکریپت پویای را به سایت خود هدیه کنیم و زمانی که صحبت از جاوا اسکریپت میشود کمتر طراحان سرغ نوشتن اختصاصی جاوااسکریپت میروند و سعی میکنند از نمونه کدهای آماده کتابخانه های بسیار معتبری مانند Jquery و mototools استفاده کنند. فواید استفاده از این کتابخانه ها باعث گسترده تر شدن و تمرکزی بیشتری رو این کتابخانه ها شده است . ولی یک راه دیگر هم وجود دارد و آن نوشتن اختصاصی جاوااسکریپت است !

می توان حدس زد که بسیاری از ما برای این کار زمانی نداریم یا این که چرا زمان بگذاریم وقتی قبلا اشخاص دیگری زمان گذاشته اند، اما این را فراموش نکنید که طراحی موفق تر است که ایده های جدیدتری داشته باشد.

من (بهزاد علی بیگی) در بسیاری از کارهای خودم از کتابخانه ها استفاده می کنم ولی در جایی که زمان کافی برای اسکریپت نویسی دارم ، این کار رو انجام میدهم . حالا واقعا چرا ؟

فرض کنید شما تنها به یک اسلاید شو در وب سایتتان نیاز دارید و جاوا اسکریپت دیگری نیاز ندارید حالا باید هسته جی کوئری با حجم ۶۰ کیلو بایت و یا ۳۰ کیلو بایت (در صورت استفاده از CDN google ) و یک کد معمولا ۲ کیلویی را در وب سایتتان قرار دهید . حالا اگر بدانید یک کد جاوااسکریپت وجود دارد که تنها ۲ کیلو بایت یا ۳ کیلو بایت است و همان اسلاید شو را برای شما ایجاد میکند ، کدامیک را انتخاب میکنید ؟

خوب این فقط یک انتخاب است و می توانید در بخش نظرات ، انتخاب خود را بیان نمایید .

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

<div class="eq_slideshow">
            <div class="parent_sliding">
                <ul id="eqSliding" class="eqAutoSliding">
                    <li>
                        <img src="01.jpg" alt="img1" />
                    </li>
                    <li>
                        <img src="02.jpg" alt="img1" />
                    </li>
                    <li>
                        <img src="03.jpg" alt="img1" />
                    </li>
                    <li>
                        <img src="04.jpg" alt="img1" />
                    </li>
                </ul>
            </div>
            <a id="eq-next" class="eq-next" href="javascript:void(0)"></a>
            <a id="eq-play" class="eq-pause" href="javascript:void(0)"></a>
            <a id="eq-prev" class="eq-prev" href="javascript:void(0)"></a>
        </div>

نام تمامی کلاس ها را می توان تغییر داد به شرطی که در css هم اعمال شود تنها id=”eqSliding” باید ثابت باشد.
داخل عنصر li میتوانید عکس متن و یا ترکیبی از عناصر گوناگون را داشته باشید.

    <style type="text/css">
        body
        {
            background-color: #fff;
            direction: rtl;
        }
        .eq_slideshow  /* main div contain all elements */
        {
            width: 700px; /*equal width li */
            height: 345px;
            margin: 0 auto;
        }
        .parent_sliding
        {
            width: 700px; /*equal width li */
            height: 300px; /*equal height li */
            position: relative;
            overflow: hidden;
            border-bottom: solid 2px #9bc250;
        }
        .eqAutoSliding
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 300px;
            padding:0;
            margin:0;
            list-style-type:none;
        }
        .eqAutoSliding li
        {
            height: 300px; /*equal height parent_sliding */
            width: 700px; /*equal width parent_sliding */
            float: left;
            overflow:hidden;
        }
        .eqAutoSliding li img
        {
            height: 300px;
            width: 700px;
        }
        a.eq-next, a.eq-play, a.eq-pause, a.eq-prev
        {
            margin: 10px 10px 0 0;
            height: 25px;
            width: 25px;
            display: block;
            float: right;
            background-image: url(  'play_pause.gif' );
        }
        a.eq-next
        {
            background-position: -50px 0;
        }
        a.eq-next:hover
        {
            background-position: -50px -25px;
        }
        a.eq-prev
        {
            background-position: -75px 0;
        }
        a.eq-prev:hover
        {
            background-position: -75px -25px;
        }
        a.eq-play
        {
            background-position: -25px 0;
        }
        a.eq-play:hover
        {
            background-position: -25px -25px;
        }
        a.eq-pause
        {
            background-position: 0 0;
        }
        a.eq-pause:hover
        {
            background-position: 0 -25px;
        }
    </style>

درج تصویر زیر در جایی که با css آدر س می دهید

و لینک جاوا اسکریپت زیر در تگ HEAD:

<script src="slidshow.js" type="text/javascript"></script>

در جاوااسکریپت می توانید زمان تعویض اسلایها را به میلی ثانیه با متغیر timer تعیین نمایید و همچنین می توانید رویدادهای احتمالی آنلود دیگری تعریف نمایید. اگر در این اسلاید شو ایرادی دیدید بسیار خوشحال خواهم شد که در بخش کامنت ها عنوان نمایید و به یاد داشته باشید jquery وتمام کتابخانه ها هم از جاوااسکریپت هستند پس از خلق آن ها هراسی نداشته باشید. اگر این مقاله مورد استبال قرار گیرد کامپوننت های دیگری را هم برای استفاده خواهم گذاشت .

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

Be Sociable, Share!


۳۷ دیدگاه


  1. Hesam
    ۲۷ تیر ۱۳۸۹

    آموزش خیلی عالیی بود




  2. حسين
    ۲۷ تیر ۱۳۸۹

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




  3. رضا دی وی دی
    ۲۷ تیر ۱۳۸۹

    سلام. واقعاً آموزش خیلی خوب و مفیدی بود.
    کمتر کسی پیدا میشه که حاضر باشه همچین آموزش هایی رو به صورت رایگان در سایت های آموزشی قرار بده.
    خیلی ممنون از وقتی که گذاشتید




  4. فرشته
    ۲۸ تیر ۱۳۸۹

    ۲۰




  5. سید
    ۲۸ تیر ۱۳۸۹

    مرسیکم الله
    جدا مفید بود




  6. محسن
    ۲۸ تیر ۱۳۸۹

    خیلی خوب بود.
    خوبتر اینکه تجربیات و دانش به رایگان در اختیار عموم قرار میگیره.

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




  7. نام (لازم)
    ۲۸ تیر ۱۳۸۹

    جدا باید به نویسنده این مطلب تبریک گفت
    من واقعا لذت بردم
    تشکر




  8. یک دانشجوی آی تی
    ۳۱ تیر ۱۳۸۹

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

    موفق باشی

    لینک قالب : http://persiangraphic.com/view.php?file=http://www.persiangraphic.com/originals/__2/__283/template_big_20100718_1491816571.jpg




  9. *
    ۳۱ تیر ۱۳۸۹

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




  10. کاوه
    ۱۴ مرداد ۱۳۸۹

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




  11. zashesh
    ۳۱ مرداد ۱۳۸۹

    مرسی
    عالی بود




  12. Sm2
    ۱۴ مهر ۱۳۸۹

    سلام خسته نباشید
    آموزش خوبی بود
    مرسی
    فقط یه چیزی
    این بعد از گذشت ۵ ثانیه با سرعت بالایی به اسلاید بعدی میره
    میشه سرعتش رو کم تر کرد ؟؟
    ممنون




  13. بهزاد علی بیگی
    ۳۰ مهر ۱۳۸۹

    ممنونم از همه نظرات به زودی کامپوننت های دیگری را آموزش خواهم داد
    @sm2
    بله در نوع پیشرفته تر سرعت گذشت به اسلاید بعدی قابل تنطیم می باشد




  14. kingnothing
    ۸ آبان ۱۳۸۹

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




  15. فروغ
    ۳ آذر ۱۳۸۹

    واقعا خوب بود مرسی
    منم مثل بقیه منتظرم!!!




  16. myblue
    ۱۵ آذر ۱۳۸۹

    سلام

    کسی هست کمک کنه من یک اسلاید شو همانند این که قابلیت تغییر طول و عرض داره، توی صفحه وبم بذارم؟
    ممنون میشم راهنمایی کنید…

    با تشکر




  17. بهزاد علی بیگی
    ۱۸ آذر ۱۳۸۹

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




  18. myblue
    ۱۹ آذر ۱۳۸۹

    ممنونم از پاسختون، براتون ایمیل گذاشتم.




  19. دنی
    ۱۷ اسفند ۱۳۸۹

    عالیه ممنون
    ببخشید میتونم بپرسم همین وبسایت خودتون رو با چی ساختید خیلی ازش خوشم اومده




  20. دنی
    ۱۷ اسفند ۱۳۸۹

    فکر کنم با ورد پرس ساختید!!!




  21. بهزاد علی بیگی
    ۱۷ اسفند ۱۳۸۹

    نه دوست عزیز ،
    این کد نوشته شده در ضمن بحث ورد پرس از جاوا اسکریپت جداست .
    ولی نمونه این اسلاید شو با کتابخانه های جاوا اسکریپت که در سی ام اس ها قابل استفاده باشد فراوان است .




  22. دنی
    ۱۷ اسفند ۱۳۸۹

    نه منظور من همین وبسایت خودتونه یعنیittutorial.ir
    فکر کنم با وردپرس ساختیدش




  23. inception
    ۲۴ فروردین ۱۳۹۰

    سلام

    عالی بود

    بی صبرانه منتظر آموزشهای بعدی هستیم




  24. احسان سجادی
    ۲۶ فروردین ۱۳۹۰

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

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

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

    اندازه ها قابل تغییر هستند؟

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




  25. بهزاد علی بیگی
    ۲۷ فروردین ۱۳۹۰

    بله با تغییر در سی اس اس بالا می توانید به تمامی مواردی که بیان کردید برسید.

    ققط در زمان تغییر سایز به کامنت های نوشته شده دقت کنید



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