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”)
    }
});
 

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>

Useful jQuery Image Sliders and Galleries Tutorials


Uses of image sliding for website designing are increasing every moment. To customize the sites especially to showcase featured articles and products in the front page, image sliders are just what the designer’s need. Search online and you will get a list of stunning jOuery image sliders and tutorials for creating your own. jQuery has certain highlighted features that are to be highly esteemed. Easy to use, jQuery sliders also provide few easy to download plugins. jQuery image tutorials are professionally designed and with time you can improve your knowledge.

jQuery image tutorials will help you to learn creating beautiful and stunning images for your WebPages. With few lines of codes designers can showcase any image make the page unique. From the jQuery image tutorials, users are supposed to learn the transition. Compatible with more different browsers like internet explorer, Google chrome, Opera, Firefox, Safari the tutorials help you to learn maximum designing at minimum time. jQuery image sliders use CSS that gains it more popularity than any other image slider tutorials. Some of the jQuery image sliders are free to use under MIT license.

However, these are very few among the thousand collections of jQuery image sliders. Different tutorials have something different to offer to expertise the designers in slide showing. Slide show his the most popular way presenting information. jQuery technology has opened a new horizon for the designers, especially who have an urge to deliver a better slide show. Without spending mush, you will get thousand jQuery image sliders. With minimum technical knowledge you can use all the programs. Slide showing is the first thing to learn from the jQuery image sliders, along with navigating a document, develop Ajax applications and select DOM elements.

27 Best Websites For Free jQuery Tutorials


jQuery is a lightweight, cross-browser compliant, and extremely powerful JavaScript framework. jQuery enables you to add interactivity and increased functionality to your website., jQuery is much useful because it can help you to create animations and interactions. jQuery has provided the necessary tools to create stunning websites without having to much worry about accessibility issues.

Due to its compatibility, cross browser support and light weight it is one the most popular JavaScript framework, leaving behind Mootools, Scriptaculous, Prototypejs etc.

For keeping up with jQuery, we present 27 Best Websites For Free jQuery Tutorials that have been providing some astonishing demos and step by step guidelines, such that a beginner can master his skills of jQuery easily.

Following are the Websites that will provide you tutorials which will cover the fundamentals of the jQuery library which you apply with ease.

Don’t forget to Follow us on Twitter follow us on Twitter for recent updates.

1) jQuery.com

2) Catswhocode.com

3) Css-tricks.com

4) LearningjQuery.com

5) DavidWalsh.name

6) WebDeveloperjuice.com

7) Tutorialzine.com

8 ) Prodevtips.com

9) Codrops

10) Hv-designs.co.uk

11) jQueryfordesigners.com

12) Marcgrabanski.com

13) Net.tutplus.com

14) Buildinternet.com

15) Sohtanaka.com

16) W3schools.com

17) JQuery Howto

18) Roseindia.net

19) Webdeveloperplus.com

20) Coldfusionjedi.com

21) Designzzz.com

22) Yensdesign.com

23) 15daysofjquery.com

24) Woork

25) Aext.net

26) Viralpatel.net

27) Gayadesign.com

I hope these sites will be helpful for you to master your jQuery skills. If you know other jQuery tutorials sites other than these, please be kind and share with us in the comments with the link.

Source :http://resources.savedelete.com/