-->
سلايد شو شرح تركيب سلايدر شو في أي مكان في السيد بار

شرح تركيب سلايدر شو في أي مكان في السيد بار

سلايد شو

-----------------------------------------------



-----------------------------------------------


طريقة التركيب:

    1.  توجه الى القالب ثم تحرير html
    2.  ابحث عن </body> وضع فوقه الكود التالي

<script type='text/javascript'>

//<![CDATA[


jQuery(document).ready(function() { 

//Set Default State of each portfolio piece


 $(".paging a:first").addClass("active");

$(".paging").show();



 //Get size of images, how many there are, then determin the size of the image reel.

var imageWidth = $(".sompret").width();
 var imageSum = $(".image_reel img").size();


 $(".image_reel").css({'width' : imageReelWidth});

var imageReelWidth = imageWidth * imageSum;
 
 //Adjust the image reel to its new size

 //Paging + Slider Function


     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

rotate = function(){ 
     var triggerID = $active.attr("rel") - 1; //Get number of times to slide
 


     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

$(".paging a").removeClass('active'); //Remove all active class
    
  $(".crott").stop(true,true).slideUp('slow');
  


     }, 500 );

$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
  
     //Slider Animation
     $(".image_reel").animate({
         left: -image_reelPosition
 
  
 };



     play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds

//Rotation + Timing Event
 rotateSwitch = function(){ 
 $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
         $active = $('.paging a.active').next();


     }, 10000); //Timer speed in milliseconds (3 seconds) 

if ( $active.length === 0) { //If paging reaches the end...
             $active = $('.paging a:first'); //go back to first
         }
         rotate(); //Trigger the paging and slider function
 
 };
 


        rotate(); //Trigger rotation immediately

rotateSwitch(); //Run function on launch

 //On Click
    $(".paging a").click(function() {   
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation


imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHFFVUJm0LoemKB3QAfU6RYYHnwyBe2jn-kuWgeKiGSp2jeiSAIUH13EVh6vzuO8tGVtkCxmrssA8dRIZjuwxypq6WlOjuz7487LMEQpkwj__Ztbllk_EMVpkiERRlNUhOwOlJLPCpbVo/s1600/no+image.jpg";

rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });   

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
showRandomImg = true;
aBold = true;
summaryPost1 = 80;


    s =  s.join("");

summaryTitle = 20;
numposts1 = 4;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }


     var posttitle = entry.title.$t;

s = s.substring(0,chop-1);
    return s;
}

function showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    
   for (var i = 0; i < numposts1; i++) {
     var entry = json.feed.entry[i];
  var pcm;


  for (var k = 0; k < entry.link.length; k++) {

var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  


     if ("summary" in entry) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
        var postcontent = entry.summary.$t;}


 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

else var postcontent = "";
     
     postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;





  if(parseInt(m)==month[u2]) {

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){


 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

m = month2[u2] ; break;
  }
 }

 var daystr = m+ ' ' + day + ' ' + y ;
 
 var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';     
  document.write(trtd);     
    
     j++;
 }
 
}

function showrecentposts2(json) {
 img  = new Array();
  


        }

for (var i = 0; i < numposts1 ; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
     }
  


        var postcontent = entry.summary.$t;}

for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
     else var postcontent = "";
     


 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];



</script>

var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
  document.write(trtd);     
    
     j++;
 }
 
}


 //]]>

      1.  ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    
    /* sidebar slider */
    

    

    


    



    

    
.sompret-wrapper {float:right;    z-index: 99; position: relative;    margin: 2px 0 20px 0px;    border: 9px solid white;}
    


    

    


    

    
.sompret { overflow: hidden; position: relative; width:300px; height:274px;}
    
.image_reel { position: absolute; top: 0; left: 0; }

    

    
.paging {background:#34495e;padding: 4px 0 2px; text-align: center;z-index: 100; }
    

    

    


    

    
.image_reel img {overflow: hidden;float: left;width:300px; height:220px;}
    

    

    


    



    

    
.paging a:hover {font-weight: bold; border:none; outline:none;}
    


    

    


    

    
.paging a { text-indent:-9999px; background:#fff; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
    
.paging a.active { background:#00a8ab; border:none; outline:none;}

    

    
.crott{text-align: center}
    

    

    


    

    
.crott {display: none; position:absolute;bottom: 0; left: 0; background:#00a8ab;padding:5px 10px;  }
    
.crott a{color: #fff;}

    

    
.crott p{color: #fff; text-align: center; padding-right: 10px;}

        1. ثم ابحث عن div class='sidebar وضع الكود التالي اسفله
      
 <div class='sompret-wrapper'>
      
<div class='sompret'>

      
<script>
      
<div class='image_reel'>

      
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/قوالب?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
      
      </script>
</div>
<div class='description'>
<script>         

      
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/قوالب?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
      
      </script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
</div>

      
</div>

         اللون الاحمر : التسميات



        ليست هناك تعليقات:

        نموذج الاتصال

        الاسم

        بريد إلكتروني *

        رسالة *