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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 4 1234 آخرینآخرین
نمایش نتایج: از 1 به 10 از 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 رو هرکی خواست پیوست میکنم ولی فرقش با این ورژن اینه که: تصویر بند انگشتی نداره و همچنین هیچگونه متنی هم نمیتونید قرار بدید برای تصاویر یه چیز ساده هست

      شات:

      i1s3awnzf0zrp11v3eg7.png

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

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

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

  2. Top | #3

  3. Top | #4
    مدیر بازنشته

    ورژن ویبولتین
    6 ;)
    نوشته ها
    1,725
    میزان امتیاز
    208

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    دوست عزیز یه شاتی هم میذاشتی قبل از نصب بدونم چیه و چه شکلیه
    من عضو انجمن شما شدم ولی تاپیکی پیدا نکردم که بشه توش اسلاید شو رو دید
    درود

    یعنی واقعا اسلاید شو به اون بزرگی رو ندیدید

    برای گروه کاربری میهمان هم قابل مشاهده هست تو سایتم (الته میتونید کلاس تعریف کنید که برای میهمان نشون نده) در تمام صفحات قرار می گیره چه صفحه اصلی انجمن چه تو تاپیک ها و غیره اندازش هم 960x630 گذاشتم

    در هر صورت شات اضافه شد

  4. Top | #5

    پیش فرض

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



  5. Top | #6
    مدیر بازنشته

    ورژن ویبولتین
    6 ;)
    نوشته ها
    1,725
    میزان امتیاز
    208

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    آب در کوزه و ما تشنه لبان میگردیم
    من نمیخوام بیاد صفحه اصلی ، میخوام عکس های داخل تاپیک رو اینطوری نشون بده ، یعنی با کلیک روی عکس ها این اسلاید شو بیاد
    باید کد رو کجای قالب بذارم ؟


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

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

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

    ولی به نظرم اسلاید کردن تصاویر داخل هر تاپیک باید یه کدی داشته باشه سرچ میکنم بود قرار میدم

  6. Top | #7
    کاربر اخراجی

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,123
    میزان امتیاز
    0

    پیش فرض

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

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


  7. Top | #8
    کاربر سایت

    ورژن ویبولتین
    3.8.6
    نوشته ها
    120
    میزان امتیاز
    18

    پیش فرض

    این رو برای و بی 3 هم میشه استفاده کرد ؟

  8. Top | #9
    کاربر سایت

    ورژن ویبولتین
    54
    نوشته ها
    1
    میزان امتیاز
    0

    پیش فرض

    age gesmate thumbnail ro nakhaym bayad chi kar konim?

  9. Top | #10
    مدیر بازنشته

    ورژن ویبولتین
    6 ;)
    نوشته ها
    1,725
    میزان امتیاز
    208

    پیش فرض

    @sasan2 بله این چون هک نیست حتی با کمی دقت رو وبلاگ هم میتونید استفاده کنید @zener باید در کد ها تغییر ایجاد کنید style.css را باز کنید کد های آن را با کد های زیر عوض کنید:
    کد:
     body {margin:0;; padding:5px; font:11px Verdana,Arial} #slideshow {list-style:none; color:#fff} #slideshow span {display:none} #wrapper {width:506px; margin:50px auto; display:none} #wrapper * {margin:0; padding:0} #fullsize {position:relative; right:200px; top:-50px; width:930px; height:530px; padding:2px; border:0px solid #ccc; background:#000} #information {position:absolute; bottom:0; width:800px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; ######:alpha(opacity=70)} #information h3 {padding:4px 8px 3px; font-size:14px} #information h3 {padding:12px 12px 15px; font-size:14px} #image {width:500px} #image img {position:absolute; z-index:25; width:auto} .imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150} #imgprev {left:0; background:url(images/left.gif) left center no-repeat} #imgnext {right:0; background:url(images/right.gif) right center no-repeat} #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; ######:alpha(opacity=40)} .linkhover {background:url(images/link.gif) center center no-repeat} #slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden} #slider {position:absolute; left:0; height:81px} #slider img {cursor:pointer; border:1px solid #666; padding:2px}
    سپس فایل index.html را باز کنید و خط زیر رو از تمامی کد های حذف کنید:
    کد:
     
    یعنی برای مثال در فایل index.html تعداد زیادی از کد های زیر است:
    کد:
     Call of Duty: Modern Warfare 3 			http://www.p30byte.com/sshow/photos/mw3-3.jpg 			.از قابلیت های این بازی می توان به داستان خوب بازی و همچنین قدرت تخریب بازی اشاره کرد که نسبت به نسخه های قبلی پیشرفت چشمگیری داشته است. البته در این سبک از بازی می توان به رقیب قدرتمند این بازی یعنی بتل فیلد 3 (میدان نبرد 3) اشاره کرد که هر دو بازی را می توان جزو برترین بازی های سال 2011 نام برد. در این بازی سعی شده است که تمام حرکات طبیعی به نظر برسد
     			
    که شما باید خط مربوط به آدرس thumbnail رو حذف کنید یعنی کد های بالا باید به صورت کد های زیر در آیند:
    کد:
     Call of Duty: Modern Warfare 3 			http://www.p30byte.com/sshow/photos/mw3-3.jpg 			.از قابلیت های این بازی می توان به داستان خوب بازی و همچنین قدرت تخریب بازی اشاره کرد که نسبت به نسخه های قبلی پیشرفت چشمگیری داشته است. البته در این سبک از بازی می توان به رقیب قدرتمند این بازی یعنی بتل فیلد 3 (میدان نبرد 3) اشاره کرد که هر دو بازی را می توان جزو برترین بازی های سال 2011 نام برد. در این بازی سعی شده است که تمام حرکات طبیعی به نظر برسد
    @zener در ضمن منبعد در انجمن فارسی تایپ کنید

صفحه 1 از 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)

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

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