Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 12th, 2016
How to make an "image presentation" in JQuery?

First tip: you need to understand the basics about the following programming languages before you even want to start with jQuery:
* HTML
* JavaScript

HTML

Why should I know the basics about HTML? If you want to make an application with jQuery you will always see that you need HTML to support jQuery. HTML got some cool tricks what you can use to make jQuery easier.

JavaScript

Why should I know the basics about JavaScript? I think you should learn the basics about JavaScript before you even want to start with jQuery just because you need to understand what the jQuery functions do and how you should use those functions correctly.

jQuery, how to use it

I hear you thinking “but what is jQuery?”. jQuery is a JavaScript library with built-in functions like: animate(), hide(),

  • You need to download the jQuery library
  • Make a VAR “projects”(“chose your own VAR name”) which knows the class + all the images.
  • Set the “projects” on hidden.
  • Take the first “project” and show it.
  • We make a function that sets the interval of the images.
  • Make a VAR ”cur” (“chose your own VAR name”) this knows the class and his children and filters it with :visible.
  • Make the “current” image hidden.
  • Make a VAR “next” (“chose your own VAR name”) this asks if you can show the next image or otherwise set back the first image so it starts over again.
  • Then you can animate the show() with an animation and set a time(in milliseconds)
  • Then close your set interval function and give the function an amount of running time.
        $(document).ready(function() { // Loads the library

            var projects = $(".slideshow").children();
        //I made the class "slideshow" in HTML with  all his children(images).
            projects.hide();
        //This hides all project if you start the website.
            projects.first().show();
        //This shows the first image in the class "slideshow"


            setInterval (function(){
            var cur = $(".slideshow").children().filter(":visible");
        // var "current" = class "slideshow" + children + filter(:visible).
            cur.hide();
        //var cur becomes hidden.


            var next = cur.next().length ? cur.next() : projects.first();
        // var next = take the next of current if it is posible to do next... do next if
        its not possible to show the next... show the first.

            next.fadeIn(2000);
        //This shows the next "project" with an animation with 2000 milliseconds.

        },3000//3000 milliseconds);

        });

Why should you use jQuery?

Why should I use jQuery? jQuery is the most popular JavaScript library, because jQuery knows everything about the difference between browser such as: Chrome and Mozilla-Firefox. Other JavaScript libraries got problems with the difference between browser
(this does not mean that all the other libraries are bad!).

My personal experience with jQuery

I personally never worked with jQuery until I had to make my portfolio and wanted an “image presentation” so i searched “slide show” on google (because google is my friend) and I saw “jQuery” I never heard of that before and I decided to learn my self the basics of”jQuery” before I wanted to start with the “image presentation”. I did the turtorial on the jQuery site. This taught me the basics of jQuery and brought me to a whole new level of codes. jQuery is fun and easy to write if you understand the basics. After all I think jQuery is awwsome!

Posted by Geert Heemskerk

Leave a Reply

Your email address will not be published. Required fields are marked *