Skip to main content

JQuery image cycler example

By
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>jQuery Image Cycler</title>
 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
 <script src="../../jquery-1.9.1.js"></script>
 <script src="../../ui/jquery.ui.core.js"></script>
 <script src="../../ui/jquery.ui.widget.js"></script>
 <script src="../../ui/jquery.ui.position.js"></script>
 <link rel="stylesheet" href="../demos.css">
 <style>
 body {
  margin: 0;
 }
 #container {
  overflow: hidden;
  position: relative;
  height: 400px;
 }
 img {
  position: absolute;
 }
 </style>
 <script>
 $(function() {
  $.fn.left = function( using ) {
   return this.position({
    my: "right middle",
    at: "left+25 middle",
    of: "#container",
    collision: "none",
    using: using
   });
  };
  $.fn.right = function( using ) {
   return this.position({
    my: "left middle",
    at: "right-25 middle",
    of: "#container",
    collision: "none",
    using: using
   });
  };
  $.fn.center = function( using ) {
   return this.position({
    my: "center middle",
    at: "center middle",
    of: "#container",
    using: using
   });
  };
  $( "img:eq(0)" ).left();
  $( "img:eq(1)" ).center();
  $( "img:eq(2)" ).right();
  function animate( to ) {
   $( this ).stop( true, false ).animate( to );
  }
  function next( event ) {
   event.preventDefault();
   $( "img:eq(2)" ).center( animate );
   $( "img:eq(1)" ).left( animate )
   $( "img:eq(0)" ).right().appendTo( "#container" );
  }
  function previous( event ) {
   event.preventDefault();
   $( "img:eq(0)" ).center( animate );
   $( "img:eq(1)" ).right( animate );
   $( "img:eq(2)" ).left().prependTo( "#container" );
  }
  $( "#previous" ).click( previous );
  $( "#next" ).click( next );
  $( "img" ).click(function( event ) {
   $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
  });
  $( window ).resize(function() {
   $( "img:eq(0)" ).left( animate );
   $( "img:eq(1)" ).center( animate );
   $( "img:eq(2)" ).right( animate );
  });
 });
 </script>
</head>
<body>
<div id="container">
 <img src="images/earth.jpg" width="458" height="308" alt="earth">
 <img src="images/flight.jpg" width="512" height="307" alt="flight">
 <img src="images/rocket.jpg" width="300" height="353" alt="rocket">
 <a id="previous" href="#">Previous</a>
 <a id="next" href="#">Next</a>
</div>
<div class="demo-description">
<p>A photoviewer prototype using Position to place images at the center, left and right and cycle them.
<br>Use the links at the top to cycle, or click on the images on the left and right.
<br>Note how the images are repositioned when resizing the window.
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Java Program to calculate the Run Rate per over in a cricket match

By
import java.io.*; import java.util.*; public class RunRate{     Scanner scan=new Scanner(System.in);     int runs, balls;     float runRate;     public void input(){         try{             System.out.println("Enter Runs Scored: ");             runs=scan.nextInt();             System.out.println("Enter Balls Delivered: ");             balls=scan.nextInt();         }         catch(NumberFormatException e){             System.out.println("Error Code: "+e);             System.exit(0);   ...
Post a Comment
Read more

Vanilla Javascript each()

By
JQuery's each() is very useful when iterating through elements. But you don't want to use JQuery in your project you can simply add the following javascript code which works somewhat similar to the JQuery's each function. Here the fnc parameter is the function string which is converted to a valid function call replacing all the $(this) with this /**  * This function binds a particular function to every element with the specified selector. It is somewhat same as JQuery's each() with less functionality  * @param {String|DOMElement} selector  * @param {Function} fnc  */ function each(selector, fnc) {     var elem;     if (typeof selector === "string") {         elem = $_(selector);     } else {         elem = selector;     }     fnc = (fnc.toString().replace("$(this)", "elem") + "();").replace("function () {", "").replac...
Post a Comment
Read more

Java Program to display Welcome Message

By
import java.io.*;// I/O package imported. public class Welcome{        //class name is "Welcome"     public Welcome(){      //constructor declaired to print the message.         System.out.println("Welcome to Java Programming Language!");/* System.out.println is used for output. Welcome Message is written within " ".*/     }//display() closes here.     public static void main(String[] args){        //main() is declaired to declair an object in it.         Welcome obj=new Welcome();  //Object "Obj" is bean created.     }//main() closes. }//class "Welcome" ends here. Above program displays the message which is written by you in " ".  In programs "/*" and "*/" are use for multiple line comment(s) and "//" is use for single line comment. Code line "Welc...
Post a Comment
Read more