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

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

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

    پیش فرض

    یه سوال کوچولو کدهای css رو باید کجا بریزم؟

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




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

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

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

    پیش فرض

    درود

    یه سوال کوچولو کدهای css رو باید کجا بریزم؟
    کد های css رو ته قالب additional.css قرار بدید - ادمین سی پی> استایل ها و قالب ها> جست و جو در قالب ها> سرچ کنید: additional.css

    و چطوری باید کاری کنم که فقط همون صفحه اصلی انجمن نمایش بده قسمت های دیگه انجمن نمایش نده؟
    مجموعه کامل دستورات شرطی مورد استفاده در قالب های ویبولتین نسخه 4

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

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


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

    ورژن ویبولتین
    4.1.7
    نوشته ها
    234
    میزان امتیاز
    28

    پیش فرض

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

    این کد هست :

    کد HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JavaScript Slideshow - TinySlideshow</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <ul id="slideshow">
            <li>
                             <a href="http://www.iranufc.biz/forum.php"><h3>معرفی یو اف سی 172</h3>
                <span>http://upcity.ir/images2/05692096421280842062.jpg</span>
                <p> معرفی یو اف سی 172</p>
                <img  src="http://upcity.ir/index.php?module=thumbnail&file=08462052314646529000.jpg"  alt="ایران یو اف سی" width="125" height="75" /></a>
            </li>
            <li>
                <a href="http://www.iranufc.biz/forum.php"><h3>انلود یو اف سی 171+لینک مستقیم</h3>
                <span>http://upcity.ir/images2/40850619994582896178.jpg</span>
                <p> دانلود یو اف سی 171</p>
                <img  src="http://upcity.ir/index.php?module=thumbnail&file=40850619994582896178.jpg"  alt="دانلود یو اف سی 171+لینک مستقیم" width="125" height="75"  /></a>
            </li>
            <li>
                <a href="http://www.iranufc.biz/forum.php"><h3>دانلود یو اف سی 169+لینک مستقیم</h3>
                <span>http://upcity.ir/images2/23424265241190536111.jpg</span>
                <p> دانلود یو اف سی 169</p>
                <img  src="http://upcity.ir/index.php?module=thumbnail&file=23424265241190536111.jpg"  alt="دانلود یو اف سی 169+لینک مستقیم" width="125" height="75"  /></a>
            </li>
            <li>
                <a href="http://www.iranufc.biz/forum.php"><h3>تاریخچه ی یو اف سی</h3>
                <span>http://upcity.ir/images2/40850619994582896178.jpg</span>
                <p> تاریخچه ی یو اف سی</p>
                <img  src="http://upcity.ir/index.php?module=thumbnail&file=39810610743832001780.jpg"  alt="تاریخچه ی یو اف سی" width="125" height="75" /></a>
            </li>
            <li>
                <a href="http://www.iranufc.biz/forum.php"><h3>قوانین و مقررات یو اف سی</h3>
                <span>http://upcity.ir/images2/65713983474884130061.jpg</span>
                <p> قوانین و مقررات یو اف سی</p>
                <img  src="http://upcity.ir/index.php?module=thumbnail&file=65713983474884130061.jpg"  alt="قوانین و مقررات یو اف سی" width="125" height="75" /></a>
            </li>
        </ul>
        <div id="wrapper">
            <div id="fullsize">
                <div id="imgprev" class="imgnav" title="Previous Image"></div>
                <div id="imglink"></div>
                <div id="imgnext" class="imgnav" title="Next Image"></div>
                <div id="image"></div>
                <div id="information">
                    <h3></h3>
                    <p></p>
                </div>
            </div>
            <div id="thumbnails">
                <div id="slideleft" title="Slide Left"></div>
                <div id="slidearea">
                    <div id="slider"></div>
                </div>
                <div id="slideright" title="Slide Right"></div>
            </div>
        </div>
    <script type="text/javascript" src="compressed.js"></script>
    <script type="text/javascript">
        $('slideshow').style.display='none';
        $('wrapper').style.display='block';
        var slideshow=new TINY.slideshow("slideshow");
        window.onload=function(){
            slideshow.auto=true;
            slideshow.speed=5;
            slideshow.link="linkhover";
            slideshow.info="information";
            slideshow.thumbs="slider";
            slideshow.left="slideleft";
            slideshow.right="slideright";
            slideshow.scrollSpeed=4;
            slideshow.spacing=5;
            slideshow.active="#fff";
            slideshow.init("slideshow","image","imgprev","imgnext","imglink");
        }
    </script>
    </body>
    </html>
    انجمن ایران یو اف سی


    نکته :الان اسلاید شو که در سایت دارم این کدِش نیست ربطی به این نداره

    ممنون میمش این کد رو مشکلِش رو حل کنین

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

    ورژن ویبولتین
    اخریش
    نوشته ها
    320
    میزان امتیاز
    41

    پیش فرض

    عزیز تو تگ های a اینو بزار
    کد PHP:
    target="_blank" 

  6. Top | #25
    کاربر سایت

    ورژن ویبولتین
    4.1.7
    نوشته ها
    234
    میزان امتیاز
    28

    پیش فرض

    میشه کاملتر توضیح بدین قرار دادم بازم نشد...

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

    ورژن ویبولتین
    4.1.7
    نوشته ها
    234
    میزان امتیاز
    28

    پیش فرض

    اپ

  8. Top | #27
    کاربر مفید و فعال

    ورژن ویبولتین
    4.2
    نوشته ها
    1,446
    میزان امتیاز
    169

    پیش فرض

    هرجا این نماد رو دیدید
    کد HTML:
    <a
    بعدش این رو بزارید
    کد HTML:
    target="_blank"

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

    ورژن ویبولتین
    اخریش
    نوشته ها
    320
    میزان امتیاز
    41

    پیش فرض

    اپ
    نقل قول نوشته اصلی توسط AvinMusic نمایش پست ها
    هرجا این نماد رو دیدید
    کد HTML:
    <a
    بعدش این رو بزارید
    کد HTML:
    target="_blank"
    درود
    تایپک ساخت اسلایدر به صورت رایگان
    بودرود

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


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

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

    پیش فرض

    برادر من که نمیدونم این رو چطور استفاده کنم
    کدوم کدشو بردارم و کجای وبلاگ بزارم1!!
    لطفا راهنمایی کن

  11. Top | #30
    کاربر سایت

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

    پیش فرض

    لطفا یکی راهنمایی کنه این اسلاید شو چه جوری باید نصب بشه رو انجمن وی بی

    کد ها باید کجا قرار بگیره



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

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

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