۱۳۹۲ فروردین ۲۴, شنبه

آموزش ایجاد اسلاید شو برای بلاگر

شاید در سایت های مختلفی گشته اید و مشاهده کرده اید که این سایتها تعدادی از مطالب خود را بصورت اسلاید شو با تصویر در بالا و قسمت هایی از وبلاگ خود به نمایش می گذارند و مایل بوده اید این طرح را روی وبلاگ خود در بلاگ و یا سایر سیستم ها پیاده کنید.در سایتهای مختلف سرویس های مختلفی از ایجاد اسلاید شو ارائه می شود که گاهی نیز بروی بعضی از سایتها به خوبی پیاده نمی شود در این پست به معرفی یکی از این کد ها برای ایجاد اسلاید شو می پردازیم.که در دو وبلاگ دیگر ما در این صفحه و در این صفحه پیاده شده است.
برای استفاده از این کد ابتدا کد را از کادر زیر کپی کنید.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
 s3Slider

 Developped By: Boban Karišik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
 Version: 1.0

 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
برای افزایش سرعت عوض شدن اسلاید ها عدد 4000 کد را به کمتر از 4000 و برای کاهش سرعت اسلاید شو عدد 4000 را به بیشتر از آن تغیر دهید همچنین کادر اسلاید شو خود را نیز می توانید با توجه به وبلاگ خود از طریق اعدادی که زیر تگ style type="text/css در کدها قید شده است عوض کنید سعی کنید بقیه قسمت های کد را دستکاری نکنید.سپس وارد قسمت ویرایش کدهای خود در سرویس مورد نظر خود شوید مثلا در بلاگر به این صورت:
حال در پنجره زیر که باز شده کد خود را قبل از تگ <head> کپی کرده و دگمه ذخیره الگو را بزنید.
سپس از قسمت ویرایش الگو وارد قسمت چیدمان شوید و افزودن یک ابزار را اتتخاب کنید.
حال در پنجره باز شده ابزار مشخص شده را انتخاب کنید و کدی که در کادر زیر قرار گرفته را پس از تغیرات در آن وارد نمایید و در صفحه جدید ریخته و سیو نمایید.
کدر را از این قسمت کپی کنید
<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>

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


  • <li class="s3sliderImage"><a href="آدرس لینک شما"><img style="width:550px;height:200px;" src="آدرس تصویر" /><span>Crysis :توضیحات و عنوان لینک Version</span></a></li>
    همچنین طول و عرض تصویر خود را نیز می توانید با اعداد مقابل height و width تغیر دهید و با اندازه کادر خود تطبیق دهید.همچنین اگر می خواهید تصاویر بیشتر قرار دهید کدهای قید شده در بالا را زیر کدهای قبلی یک بار دیگر کپی کنید و مطابق دستور دوباره آنها را تغیر دهید.
  • هیچ نظری موجود نیست:

    ارسال یک نظر