Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up How to mix jQuery Features and JavaScript ..

    Hello, I created this basic slideshow in JavaScript. That can go next, previous, first and last.

    Now, its pretty simple and there is no animation.

    Could I use jQuery features like fadein and so on in my current script?

    Code:
    // Slide Show Previous, Next , First & Last
    
    var min = 1;
    var last = 5;
    
    var current = min;
    
    function moveSlide(moveMe) {
    	if (moveMe == 0) {
    		current = min;
    	}
    	current = current + moveMe;
    	if (moveMe == "end") {
    		current = last;
    	}
    	if (current > last) {
    		current = min
    	} else if (current < min) {
    		current = last;
    	}
    	document.getElementById("img1").src = "images/slide" + current + ".png";
    }
    Do I need to add the jQuery Lib in this current custom.js file?

    Thanks in advance
    Last edited by Vrutin; 12-12-2012 at 11:07 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Fading is not specific to jQuery, you can create your own fade animation (you just have to kinda reinvent the wheel). Basically you set up an interval (setInterval()) during which you decrease and increase the opacity of the image sequentially. But of course, you could just add jQuery and use that one. After all, jQuery is just JavaScript, too.

    Note, however, that with your current set-up you can only fade out and in subsequently, not simultaneously/seamlessly since you’re just changing one image’s source attribute value. You need to fade out the image, change the src value and then fade in again.

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's how I am thinking to do this:

    When the slider area loads, it fades into first image..

    Then every time there is a click on next || previous || first || last..

    it fades into that image...

    that would create the fade in effect ..

    Please correct my understanding if I am thinking wrong.

    Thanks

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am just playing with the ideas.. However, the following code is not executing.. any reasons why?

    Code:
    // left is the division where the slideshow resides
    $("#left").ready( function() {
    	
    	$("#1").show("fade", 1000); // 1 is the image ID
    	
    });
    Thanks

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by VIPStephan View Post
    Fading is not specific to jQuery, you can create your own fade animation (you just have to kinda reinvent the wheel).
    You don't even need to do that.Just go to http://www.brothercake.com/site/reso...s/transitions/ and grab the transitions JavaScript library from there. It has all sorts of different fades built in.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •