• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

با جی کوئری اسلاید شو اختصاصی بسازیم !

19078 ۱۸ دی ۹۲
1 2

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

در این آموزش قرار نیست ما کار خیلی خاصی رو انجام بدیم شما با دنبال کردن سری آموزشی جی کوئری وب سایت سون لرن می تونید به راحتی کد های این آموزش رو متوجه بشید.

خوب در ابتدای امر باید این توضیح رو بدم که ما چند تا تصویر داریم که میخوایم این تصاویر پشت سر هم با یه افکت مشخص (fade) و با یه فاصله زمانی مشخص نمایش داده بشن.

کدهای html اسلایدشو

اول از همه قسمت html خودمون رو به این صورت طراحی میکینم.

اول یه تگ نگهدارنده و بعدشم یه تگ div با آیدی slideshow که محتوای اصلی در این تگ قرار میگیره و بعدشم یه لیست نامرتب و در ادامه هم تعداد دلخواهی تصویر در بین تگ های li و a قرار داده شده. در کنار هر a که لینک تصویر رو مشخص میکنه ما یه تگ p هم قرار دادیم این تگ p متن دلخواه در مورد اسلاید رو برای ما نمایش میده (عنوان مطلب).

کدهای CSS اسلایدشو

در ادامه آموزش ما قسمت css رو به این صورت نوشتیم.

تا قسمت wrapper توضیحات خاصی نداره اما خوب بعد از اون رو باید توضیح بدیم؛برا قسمت slideshow ما خاصیت position رو به صورت relative تعریف کردیم که باعث میشه دستمون در جابه حای عناصر داخل تگ باز باشه خاصیت width و height رو مشخص کردیم  و بعدشم خاصیت margin رو بر روی auto قرار دادیم تا دقیقا در وسط عنصر والد خودش قرار بگیره و در نهایت هم کمی افکت سایه.

برای تگ های li زیر مجموعه slideshow ما اومدیم و خاصیت position رو بر روی absolute تنظیم کردیم و این باعث میشه چینش این عناصر از حالت عادی خارج بشه حالا اگه عنصر والد دارای position با مقدار relative باشه میتونیم نسبت به عنصیر والد و در هر مکانی خواستیم قرارشون بدیم حالا اگه نداشته باشه چی ؟ خوب اونوقت نسبت به عنصر اصلی(body و html) چینش پیدا میکنه.خوب خاصیت z-index با مقداری مشخص باعث میشه در محور z کمی جلوتر باشن و همچنین خاصیت opacity رو روی صفر تنظیم کردیم که باعث میشه فعلا هیچ کدموشون نمایش داده نشن.با خاصیت overflow هم مشخص میکنیم که هیچی چیزی از این تگ li بیرون نره.

بعد از این می رسیم به کلاس active برای تگ li از اسمش پیداست یعنی عنصری که الان در حال نمایشه و خوب پس opacity رو برابر 1 قرار دادیم و z-index و هم کمی آوردیم بالاتر.خوب حالا کلاس last-active یعنی اونی که قبلا active بوده و اینجا z-index رو یکی کمتر از حالت active براش قرارمیدیم تا دقیقا مشخص بشه که پشت سر active قرار گرفته.برای تگ p که قرار مطلب رو نشون بده هم کلاس title رو در نظر گرفتیم که استایلش مشخصه.

خوب در صفحه بعد کدهای جاوااسکریپت رو تکمیل میکنیم.

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 33 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    بسیار عالی و مفید بود سپاس از شما

  • ‏‏

    ممنون از سایت خوب شما
    من یک قالب وردپرس با آموزشهای شما ایجاد کردم که الان روی دامنه modposh.ir نصب شده
    2 روز هست که همه افزونه های اسلاید شو را امتحان کردم مثل Cyclone Slider 2 ولی تو همه اونها تصاویر ثابت بود و علت را نفهمیدم
    تا اینکه امروز عضو سایت شما شدم و در حال استفاده از آموزش اسلاید شو شما هستم مطمئن هستم مثل بقیه آموزش های شما مفید و کاربردی و قابل استفاده هست
    فقط اگر امکان داشت و اینجا جای مناسبی بود بفرمایید چرا قالب من از افزونه هایی مثل Cyclone Slider 2 پشتیبانی نمیکنه و تصاویر را ثابت و در جا نشون میده
    با تشکر

    • ‏‏
      لقمان آوند(۱۲ اسفند ۱۳۹۲)

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

  • ‏‏

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

    با تشکر

    • ‏‏
      کیوان علی محمدی(۱۷ فروردین ۱۳۹۳)

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

      • ‏‏

        با سلام
        جناب علی محمدی دقیفا میتونین با کد توضیح بدین این کار رو چطوری میشه انجام داد

        • ‏‏
          کیوان علی محمدی(۱۴ مرداد ۱۳۹۳)

          سلام متاسفانه این کار کمی وقت گیر هستش.

  • ‏‏
    nasrin rafati(۸ تیر ۱۳۹۳)


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

    • ‏‏
      کیوان علی محمدی(۸ تیر ۱۳۹۳)

      وقتی کدهای ما رو کپی می کنید درسته پس حتما کدهای خودتون یه مشکلی داره،خط به خط چک کنید.

  • ‏‏

    برای اعضا عادی هم این آموزش را بزارید خدا را خوش میاد

  • ‏‏

    ای کاش برای دکمه جلو و عقب هم براش میگذاشتی…

  • ‏‏

    با سلام و تشکر لینک های دانلود کار نمی کنه امکانش باشه اصلاحش کنید.

  • ‏‏
    حسین میراحمدی(۱۴ مرداد ۱۳۹۵)

    سلام لینک دانلود 400 Bad Request میده لطفا اصلاح کنید .

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram