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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 4 نخستنخست 1234 آخرینآخرین
نمایش نتایج: از 11 به 20 از 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 | #11
    کاربر سایت

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

    پیش فرض

    با سلام!
    من میخوام همین رو به وسط ببرم اما نه با right:200px بلکه با تگ center یا align="center" ولی متاسفانه به هم می خوره با right:200px فقط از سمت راست فاصله میگیره! و به وسط نمیره که تو مانتور های مختلف به هم میریزه اگه میشه کمک کنید




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

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

    ورژن ویبولتین
    4.2
    نوشته ها
    332
    میزان امتیاز
    43

    پیش فرض

    اقا میشه این رو تو وردپرس استفاده کنیم !؟

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

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

    پیش فرض

    درود

    چون هک نیست فکر نمیکنم مشکلی داشته باشه حتی در قالب های وبلاگ

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

  5. Top | #14
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    17
    میزان امتیاز
    0

    پیش فرض

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

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

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

    پیش فرض

    درود

    باید از بی بی کد آی فریم استفاده کنید و این صفحه html رو با استفاده از اون بی بی کد در پست مورد نظرتون قرار بدید

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

    ورژن ویبولتین
    4.2
    نوشته ها
    17
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط Morstua _V!tamea نمایش پست ها
    درود

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

  8. Top | #17
    مدیر بازنشته

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

    پیش فرض

    ببینید این کد آی فریم هست:

    کد:
    <iframe src="LINK FILE E HTML"  frame height="265px" width="60%"></iframe>
    از این کد برای قرار دادن صفحات HTML در سایت ها استفاده میکنن به نوعی کد فراخوای هستش همونطور که در پست اول هم توضیح دادم

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

    در همین انجمن سرچ کنید : بی بی کد آی فریم و یا بی بی کد IFRAM

    قبلا قرار داده شده

    البته پیشنهاد میکنم در پست ها از بی بی کد هایی برای فراخوانی html استفاده نکنید چرا که میزان هک شدن با backconnect و ... بالا میره

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

    ورژن ویبولتین
    4.2
    نوشته ها
    17
    میزان امتیاز
    0

    پیش فرض

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

  10. Top | #19
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    344
    میزان امتیاز
    41

    پیش فرض

    درود
    آقا من دقیقا می خوام مثل مال خودت بشه همینی که گذاشتی به عنوان شات
    اگه میشه همین رو با فایلای اصلاخ شده خودتون بهم بدید ممنون میشم

  11. Top | #20
    مدیر بازنشته

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

    پیش فرض

    درود

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

    کد:
    .slider {
    background: white;
    background: -moz-linear-gradient(top, white 0%, #F1F1F1 50%, #E1E1E1 51%, #F6F6F6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(50%,#F1F1F1), color-stop(51%,#E1E1E1), color-stop(100%,#F6F6F6));
    background: -webkit-linear-gradient(top, white 0%,#F1F1F1 50%,#E1E1E1 51%,#F6F6F6 100%);
    background: -o-linear-gradient(top, white 0%,#F1F1F1 50%,#E1E1E1 51%,#F6F6F6 100%);
    background: -ms-linear-gradient(top, white 0%,#F1F1F1 50%,#E1E1E1 51%,#F6F6F6 100%);
    background: linear-gradient(top, white 0%,#F1F1F1 50%,#E1E1E1 51%,#F6F6F6 100%);
    ######: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    border-right: 2px solid #259ce8;
    border-left: 2px solid #259ce8;
    border-top: 2px solid #E81ABF;
    border-bottom: 2px solid #E81ABF;
    padding: 8px;
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: #b2b2b2 0 0 7px;
    -moz-box-shadow: #b2b2b2 0 0 7px;
    -webkit-box-shadow: #b2b2b2 0 0 7px;
    }
    این کل محتویات اسلاید شو که داخل هاست خودم بود:

    لینک دانلود

    اینم ifram برای قرار دادن در هر قالبی که خواستید:

    کد:
     <div class="slider">
    <center>
    <div style="text-align: center; "><iframe marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" target="_blank" width="960" height="630"src="ADDRESS FILE PHP INJA"></iframe></center></div>
    در پوشه thumbnails تصاویر بند انگشتی قرار میگیره

    در پوشه photos تصاویر اصلی

    برای ویرایش اطلاعات و آدرس تصاویر جدید هم باید فایل slider.php رو ویرایش کنید

    در کد های css کلمه f i l t e r به صروت ###### در اومده چون در وی بی ایارن شیلچره خودتون قرار بدید و فاصله بین حروف رو هم حذف کنید در این کلمه بنده فاصله انداختم که شیلچر نشه

    پایدار و سربلند باشید

    2 تشکر توسط:


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

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

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