CodingForums.com - jQuery How to mix jQuery Features and JavaScript ..

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - jQuery How to mix jQuery Features and JavaScript .. (http://www.codingforums.com/showthread.php?t=284058)

Vrutin

12-12-2012 11:03 PM

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

VIPStephan

12-12-2012 11:45 PM

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.

Vrutin

12-12-2012 11:58 PM

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

Vrutin

12-13-2012 12:28 AM

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

felgall

12-13-2012 01:04 AM

Quote:

Originally Posted by VIPStephan (Post 1299485)

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.

All times are GMT +1. The time now is 04:19 PM.