تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 4 از 4 نخستنخست 1234
نمایش نتایج: از 31 به 34 از 34

مقاله: TinySlideshow اسلاید شو با قابلیت های بالا و حجم پایین (5kl) + آموزش

    1. TinySlideshow اسلاید شو با قابلیت های بالا و حجم پایین (5kl) + آموزش »

      TinySlideshow اسلاید شو با قابلیت های بالا و حجم پایین (5kl) + آموزش

      نگارش: , by (مدیر بازنشسته)
      2012/11/14 09:08 AM
      امتیاز: 

      درود

      راستش یه تاپیک زده بودم دونبال یه اسلاید شو می گشتم که هم بتونه تصاویر رو (ه رچند تا تصویر به سلیغه خودتون) به صورت اصلاید در بیاره و این قابلیت رو داشته باشه که بشه کنار هر تصویر در مورد اون تصویر توضیحاتی رو درج کرد

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

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

      اسلاید شو رو پیوست میکنم طریقه تغییر قسمت های مختلفش رو هم نوضیح میدم:

      برای تغییر زمان بین هر عکس (زمان پیشفرض 5 ثانیه هست) فایل compressed.js رو ویرایش کنید و این قسمت رو تغییر بدید (به ثانیه) :
      کد:
      this.scrollSpeed=5
      اون 5 رو به ثانیه تغییر بدید برای مثال من به 12 تغییرش دادم در نتیجه مدت زمان نمایش هر عکس 12 ثانیه هست

      برای حذف بک گراند ، کم و زیاد کردن طول و عرض تصویر های اصلی ، بالا پایین بردن تصاویر بند انگشتی ، کم و زیاد کردن طول و عرض متن و تغییر فونت قسمت های زیر رو در فایل style.css تغییر بدید:

      کد:
      body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial}
      در کد بالا میتونید background تصویر رو حذف کنید و یا رنگش رو تغییر بدید

      کد:
      #fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
      در کد های بالا میتونید طول و عرض تصویر اصلی رو کم و زیاد کنید

      نکته: اگر شما در کد های بالا width رو زیاد کنید مسلما عرض تصویرتون بیشتر میشه ولی یه مشکل وجود داره اونم اینه که عکس از دو طرف عریض نمیشه بلکه به سمت چپ عریض میشه برای حل این مشکل میتونید به کد های بالا کد زیر رو اضافه کنید :

      کد:
      right:200px;
      با اضافه کردن این کد عکستون به سمت راست میاد و در وسط قرار میگیره که میتونید مقدار 200px رو در کد بالا تغییر بدید

      اگر هم خواستید عکستون رو به بالا ببرید کد زیر رو اضافه کنید:
      کد:
      top:-50px;
      با کد بالا عکس 50 پیکسل به بالا میره و اگر اون منفی رو بردارید 50px به پایین میاد
      در نتیجه اگر من عرض رو به 920 تغییر بدم و طول رو به 520 پیکسل کد نهایی میشه این:

      کد:
      #fullsize {position:relative; right:200px; top:-50px; width:920px; height:520px; padding:2px; border:1px solid #ccc; background:#000}
      برای کم و زیاد کردن عرض متنتون و تغییر رنگ و غیره کد زیر رو ویرایش کنید :

      کد:
      #information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; ******:alpha(opacity=70)}
      width: عرض
      height: طول
      background: رنگ پس زمینه
      color: رنگ متن

      کد زیر برای تغییر اندازه فونت متن:
      کد:
      #information h3 {padding:4px 8px 3px; font-size:14px}
      font-size: اندازه فونت
      با تغییر گزینه های 4px 8px 3px; می تونید سربرگ و قسمت های مختلف متن رو بالا پایین کنید

      با ویرایش کد زیر میتونید فاصله بین تصاویر بند اگشتی و تصاویر اصلی رو کم و زیاد کنید:
      کد:
      #thumbnails {margin-top:15px}
      نکته: اگر میخواین به بالا بره (به صمت تصویر اصلی) 15px رو منفی کنید و بلعکس

      برای کم و زیاد کردن تعداد تصاویر هم می تونید فایل index.html رو ویرایش کنید برای مثال:

      کد:
              <li>
                  <h3>TinySlideshow v1</h3>
                  <span>photos/orange-fish.jpg</span>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                  <a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
              </li>
      کد های بالا برای نمایش کامل (متن مورد نظر ، تصویر اصلی ، سر برگ متن ، تصویر بند انگشتی ) یک اسلایده شما با اضافه کردن (کپی پیست) می تونید به تعداد اسلاید ها اضافه کنید
      کد اصلی اضافه کردن هم اینه:

      کد:
              <li>
                  <h3>TITRE MATN</h3>
                  <span>MAHALE TASVIRE ASLI (LINK AKS)</span>
      <p>MATN MORED NAZAR</p>
      <img src="MAHALE TASVIRE BAND ANGOSHTI (LINK AKS BAND ANGOSHTI)" alt="" />
      </li>
      نکته: این کد برای قرار دادن تصویر بند انگشتیه:

      کد:
      <img src="MAHALE TASVIRE BAND ANGOSHTI (LINK AKS BAND ANGOSHTI)" alt="" />
      حالا اگر دوست داشتید به عکستون لینک اضافه کنید تا با کلیک بر روی تصاویر به لینک مورد نظرتون بره (مثل بنر های تبلیغاتی) میتونید کد :
      کد:
      <a href="LINK MAGHSAD">
      رو به ابتدای کد تصویر بند انگشتی اضافه کنید که کد کامل میشه این:

      کد:
      <a href="LINK MAGHSAD"><img src="MAHALE TASVIRE BAND ANGOSHTI (LINK AKS BAND ANGOSHTI)" alt="" />
      برای قرار دادن اسلاید شو فایل پیوست رو دانلود کنید و درو روت فرومتون در هاست آپلود و اکسترکت کنید

      نکته: بهتره کد های فایل index.html رو با پسوند php سیو کنید

      و با کد ifram می تونید در قالبتون قرارش بدید (مثلا بزارید انتهای قالب ناوبار) :

      کد:
      <div style="text-align:center ; "><iframe marginwidth="0" marginheight="0" scrolling="no" border="0" frameborder="5" target="_black" width="550" height="219" src="Link Indxe (FILE PHP)"></iframe></div>
      تکته: این اسلاید شو رو من طراحی نکردم بلکه از یه سایت خارجی دانلود کردم ولی زحمت تشریح و اضافه کردن کد هاش با خودمه چون این اسلاید شو ورژن 2 هم داره دیگه توضیحاتی برا این ورژن داده نشده اینم بگم که ورژن 2 رو هرکی خواست پیوست میکنم ولی فرقش با این ورژن اینه که: تصویر بند انگشتی نداره و همچنین هیچگونه متنی هم نمیتونید قرار بدید برای تصاویر یه چیز ساده هست

      شات:

      فایل پیوست 23278

      نکته: شات که در بالا قرار داده شده با تغییراتیه که روی اسلاید شو انجام شده (از همونی که تو سایتمه عکس گرفتم)
      دمو آنلاین: eMp3RoR-TeaM انجمن آریایی ایران

      من اسلاید شو رو مثل تبلیغات قالب بندی کردم (با استفاده از کلاس و کد های کلاس کادر بندی قالب vbiran8) که خیلی ساده هست

      اگر تو محل نا مناسب پست دادم اول شرمنده و بعد مدیران لطف کنن انتقال بدن
      ویرایش توسط P30ByTe : 2012/11/14 در ساعت 11:58 AM
  1. Top | #31
    کاربر سایت

    ورژن ویبولتین
    4
    نوشته ها
    119
    میزان امتیاز
    14

    پیش فرض

    کسی نبود کمک کنه




  2. گیفت کارت آیتونز

  3. Top | #32
    کاربر سایت

    ورژن ویبولتین
    4
    نوشته ها
    119
    میزان امتیاز
    14

    پیش فرض

    یکی نیست کمک کنه چه جوریه نصبش ؟؟؟؟؟؟؟

  4. Top | #33
    کاربر سایت

    ورژن ویبولتین
    4 به بالا
    نوشته ها
    429
    میزان امتیاز
    49

    پیش فرض

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

    کاربر مقابل از CDesign بابت این پست مفید تشکر کرده است:


  5. Top | #34
    پاسخگو و راهنمای سایت

    ورژن ویبولتین
    all version
    نوشته ها
    7,261
    میزان امتیاز
    917

    پیش فرض

    نقل قول نوشته اصلی توسط p22p22 نمایش پست ها
    یکی نیست کمک کنه چه جوریه نصبش ؟؟؟؟؟؟؟
    اموزش نصب و تغییرات در پست اول داده شده ، چه مشکلی دارید؟

صفحه 4 از 4 نخستنخست 1234

اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 178
    آخرين نوشته: 2016/10/20, 09:38 PM
  2. آموزش: اضافه کردن نظرات فیس بوک پایین هر تاپیک
    توسط Haji در انجمن هک و آموزش های مخصوص
    پاسخ: 9
    آخرين نوشته: 2014/12/22, 12:26 AM
  3. مشکل نمایش امار وارقام پایین سایت
    توسط omid1744 در انجمن پرسش و پاسخ
    پاسخ: 0
    آخرين نوشته: 2012/10/11, 09:09 PM
  4. پاسخ: 3
    آخرين نوشته: 2012/06/04, 12:57 AM
  5. فلش با پایینترین قیمت + آموزش
    توسط D4RK3NZZ در انجمن بازارچه
    پاسخ: 0
    آخرين نوشته: 2012/03/14, 10:51 AM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •