Basic jQuery Slider – Simple slideshows for Image


<link type=”text/css” rel=”stylesheet” href=”slider.css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script&gt;
<script type=”text/javascript” src=”slider.js”></script>
<script type=”text/javascript” >
    $(window).load(
        AutoSlideTimer = 1000,        //Auto Slise Timer etc.(100 = 1s)
        AnimateSpeed = 700            //Animate Speed etc.(100 = 1s)
    )
</script>

<div id=”sliderblock”>
    <ul class=”sliderul”>
        <li><a href=”#” title=””><img src=”images/banner.jpg” /></a></li>
        <li><a href=”#” title=””><img src=”images/FathersDay.jpg” /></a></li>
        <li><a href=”#” title=””><img src=”images/FathersDay.jpg” /></a></li>
    </ul>
</div>

Slider.CSS

#sliderblock{width:720px; height:315px; position:relative; overflow:hidden;}
#sliderblock .sliderul{position:absolute; }
#sliderblock .sliderul li{float:left;}
#sliderblock .pagenav{clear:both; float:left; position:absolute; left:25px; bottom:5px; text-align:center;}
#sliderblock .pagenav li{display:inline; font-size:12px; padding:0 2px}
#sliderblock .pagenav li span{padding:0 7px; line-height:20px; font-weight:bold; display:inline-block; background:url(images/inic-nav-bg.jpg) repeat-x; color:#000; cursor:pointer;}
#sliderblock .pagenav li img { border:none;}
#sliderblock .pagenav li span.select{background:url(images/inic-nav-selected-bg.jpg) repeat-x; color:#fff; cursor:default;}
#sliderblock .next{position:absolute; right:25px; bottom:5px; background:url(images/np.jpg) no-repeat right 0; width:20px; height:20px; float:left;}
#sliderblock .prev{position:absolute; right:71px; bottom:5px; background:url(images/np.jpg) no-repeat left 0; width:20px; height:20px; float:left;}
#sliderblock .play{position:absolute; right:48px; bottom:5px; background:url(images/pp.jpg) no-repeat right 0; width:20px; height:20px; float:left;}
#sliderblock .pause{position:absolute; right:48px; bottom:5px; background:url(images/pp.jpg) no-repeat left 0; width:20px; height:20px; float:left;}

Slider.js

$(document).ready(function(){
    i=0;
    pp = 0;  
    imgsize = $(“.sliderul li img”).size();            //images calqulet
    slide = $(“#sliderblock”).width();                            //li width
    slide2 = slide*(imgsize-1)                            //prev last left pogetion
    imgpadding = $(“.sliderul li”).innerWidth();         //li width with padding
    imgmargin = $(“.sliderul li”).outerWidth()         //li width with margin
    //ul width
    $(“.sliderul”).width(slide*imgsize);  
    //Timer
    timer = window.setInterval(autoslide, AutoSlideTimer);
    $(“#sliderblock”).mouseenter(function(){
        clearInterval(timer);
    });
    $(“#sliderblock”).mouseleave(function(){
        if(pp == 0){
            timer = window.setInterval(autoslide, AutoSlideTimer);
        }
        else{
            clearInterval(timer);
        }
    });
    //next prev play pause
    $(“#sliderblock”).append(“<div class=’next’></div>”);
    $(“#sliderblock”).append(“<div class=’prev’></div>”);
    $(“#sliderblock”).append(“<div class=’play pp’></div>”);
    $(“#sliderblock”).append(“<div class=’pause pp’></div>”);
    $(“#sliderblock .pause”).css(“display”,”none”);
   
    $(“#sliderblock .pp”).click(function(){
        if(pp == 1){
            pp = 0;
            $(“#sliderblock .play”).css(“display”,”block”);
            $(“#sliderblock .pause”).css(“display”,”none”);
        }
        else{
            pp = 1;
            $(“#sliderblock .pause”).css(“display”,”block”);
            $(“#sliderblock .play”).css(“display”,”none”);
        }      
    });
    $(“#sliderblock .next”).click(function(){
        i = $(“#sliderblock .pagenav li .select”).attr(‘id’);
        ++i;
        $(“#sliderblock .pagenav li span”).removeClass(“select”);
        if(i == (imgsize+1)){
            i=1;
            $(“.sliderul”).animate({
                left: 0
                }, AnimateSpeed);
        }else{
            $(“.sliderul”).animate({
                left: ‘-=’+slide
                }, AnimateSpeed);
            }
        $(“#sliderblock .pagenav li span#”+i).addClass(“select”);
      
    });
   
    $(“#sliderblock .prev”).click(function(){
        i = $(“#sliderblock .pagenav li .select”).attr(‘id’);
        –i;
        $(“#sliderblock .pagenav li span”).removeClass(“select”);
        if(i == 0){
            i = imgsize;
            $(“.sliderul”).animate({
                left: -slide2
                }, AnimateSpeed);
        }else{
            $(“.sliderul”).animate({
                left: ‘+=’+slide
                }, AnimateSpeed);
            }
        $(“#sliderblock .pagenav li span#”+i).addClass(“select”);
      
    });
    //pagenav
    $(“#sliderblock”).append(“<ul class=’pagenav’></ul>”);
    for (b=1;b<=imgsize;b++){
        if(b==1){$(“#sliderblock .pagenav”).append(“<li><span class=’select’ id='”+b+”‘>”+b+”</span></li>”);}
        else{$(“#sliderblock .pagenav”).append(“<li><span id='”+b+”‘>”+b+”</span></li>”);}
    }
    $(“#sliderblock .pagenav li span”).click(function(){
        navid = $(this).attr(‘id’);
        //i = navid-1;
        $(“#sliderblock .pagenav li span”).removeClass(“select”);
        $(this).addClass(“select”);
        i = navid-1;
        navslider = (navid-1)*slide
        $(“.sliderul”).animate({
            left: -navslider
            }, AnimateSpeed);
        
    });
    //Auto slide
    function autoslide(){
        i = $(“#sliderblock .pagenav li .select”).attr(‘id’);
        ++i;
        $(“#sliderblock .pagenav li span”).removeClass(“select”);
        if(i == (imgsize+1)){
            i=1;
            $(“.sliderul”).animate({
            left: 0
            }, AnimateSpeed);      
        }
        else{
            $(“.sliderul”).animate({
                left: ‘-=’+slide
                }, AnimateSpeed);
        }
        $(“#sliderblock .pagenav li span#”+i).addClass(“select”)
    }
});
 

Advertisements

Posts Template for Twenty Ten WordPress Default Templete


        $args=array(
          ‘post_type’ => ‘post’,
          ‘post_status’ => ‘publish’,
          ‘paged’ => $paged,
          ‘posts_per_page’ => 5,
          ‘caller_get_posts’=> 1
        );
        $temp = $wp_query;
        $wp_query = null;
        $wp_query = new WP_Query($args);
        get_template_part( ‘loop’, ‘index’ );

My First Ajax Program | jQuery Ajax calls in your WordPress blog


<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script&gt;
<script type=”text/javascript”>
    $(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(“#recordtab li a”).click(function(){
        var post_id = $(this).attr(“rel”)
        $(“#recordcontent”).html(“loading…”);
        $(“#recordcontent”).load(“http://localhost/indianic/triqui-ajax?id=&#8221; + post_id);
        return false;
    });
});
</script>
<ul id=”recordtab”>
<?php
    global $wpdb;
    $table_name = $wpdb->prefix . “testimonials”;
    $sqls = “SELECT DISTINCT company FROM $table_name Order by company”;
    $tstlist = $wpdb->get_results($sqls);
    foreach ($tstlist as $tstlist2) {
        echo ‘<li><a href=”#” rel=”‘ . $tstlist2->company . ‘”>’ . $tstlist2->company . ‘</a></li>’;
        echo “<br>”;
    }
 ?>
 </ul>
<div id=”recordcontent”>
   
</div>

External File : triqui-ajax

Ex : http://localhost/indianic/triqui-ajax

<div class=”record”>
<?php
    $recordid = $_GET[‘id’];
 ?>
<?php
    global $wpdb;
    $table_name = $wpdb->prefix . “testimonials”;
    $sqls = “SELECT * FROM $table_name where company = ‘$recordid’ “;
    $tstlist = $wpdb->get_results($sqls);
    foreach ($tstlist as $tstlist2) {
        echo $tstlist2->testid;
        echo $tstlist2->text_short ;
        echo $tstlist2->text_full ;
        echo $tstlist2->clientname ;
        echo $tstlist2->company;
        echo $tstlist2->homepage;
        echo “<br>”;
    }
 ?>
 </div>