Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj29.12.2011, 16:05 (UTC)    
Mesaj konusu: Sitenize Slider Manset Haber

Görünüm: Sorunsuz bir şekilde çalışmaktadır sizler sadece sitenize göre boyutlarıyla oynayabilirsiniz veya resimleri değiştirebilirsiniz


Kod:
<style type="text/css" media="screen">
 #slider {
     width: 410px; /* important to be same as image width */
     height: 300px; /* important to be same as image height */
     position: relative; /* important */
     overflow: hidden; /* important */
 }
 #sliderContent {
     width: 410px; /* important to be same as image width or wider */
     position: absolute;
     top: 0;
     margin-left: 0;
 }
 .sliderImage {
     float: left;
     position: relative;
     display: none;
 }
 .sliderImage span {
     position: absolute;
     font: 10px/15px Arial, Helvetica, sans-serif;
     padding: 10px 13px;
     width: 384px;
     background-color: #000;
     filter: alpha(opacity=70);
     -moz-opacity: 0.7;
     -khtml-opacity: 0.7;
     opacity: 0.7;
     color: #fff;
     display: none;
 }
 .clear {
     clear: both;
 }
 .sliderImage span strong {
     font-size: 14px;
 }
 .top {
     top: 0;
     left: 0;
 }
 .bottom {
     bottom: 0;
     left: 0;
 }
 ul { list-style-type: none;}
 </style><!-- JavaScripts--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">

(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() {
         $('#slider').s3Slider({
             timeOut: 3000
         });
     });
 </script>
<div id="slider">
<ul id="sliderContent">
    <li class="sliderImage"><a href=""><img alt="1" src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/1.jpg" /></a> <span class="top"><strong>Title text 1</strong><br />
    Content text...</span></li>
    <li class="sliderImage"><a href=""><img alt="2" src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" /></a> <span class="top"><strong>Title text 2</strong><br />
    Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li>
    <li class="sliderImage"><img alt="3" src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/3.jpg" /> <span class="bottom"><strong>Title text 2</strong><br />
    Content text...</span></li>
    <li class="sliderImage"><img alt="4" src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/4.jpg" /> <span class="bottom"><strong>Title text 2</strong><br />
    Content text...</span></li>
    <li class="sliderImage"><img alt="5" src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/5.jpg" /> <span class="top"><strong>Title text 2</strong><br />
    Content text...</span>
    <div class="clear sliderImage">&nbsp;</div>
    </li>
</ul>
</div>
<!-- // slider -->
Mesaj29.12.2011, 16:16 (UTC)    
Mesaj konusu:

Güzel paylaşım teşekkürler.... Very Happy
______________
Mesaj29.12.2011, 16:17 (UTC)    
Mesaj konusu:

baktım forumda pek paylaşan olmamış ve ihtiyacı olan arkadaşlara da faydamız olsun dedim Wink
Mesaj25.01.2012, 21:09 (UTC)    
Mesaj konusu:

kontrol edilmiştir kodlar çaışmaktadır, güzel bir manşet haber sitenize Wink
______________
=> Şimdi aşağıdaki [ Link ] tıkladığınızda [ Sıkça Sorulan Sorular ] adlı alt forumumuza yöneleceksiniz ve umarım sorunlarınıza cevap bulabilirsiniz.
=> http://www.bedava-sitem.com/forum/viewforum.php?f=37
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu