JQuery Easing Slider

#1 creativejunk

Forum Newcomer

Group: Members
Posts: 99
Joined: 22-October 08
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 04 January 2010 - 12:00 PM

Hi there,

I'm fairly new to using jQuery and I'd like to achieve the following effect of having a content div sliding:

http://www.rehabstud...work/thumbnails

I've had a look around and found this slider plugin: http://bxslider.com/demos.php

Although I've read on a few sites that I need to have an easing plugin installed to get the effect I am looking for, but I'm struggling to get my head around how exactly I would set this up.

Any help appreciated, thanks!

#2 Faevilangel

Wordpress Ninja.....

Group: Members
Posts: 1,166
Joined: 11-May 09
Reputation: 57
Gender:Male
Experience:Advanced
Area of Expertise:Web Developer

Posted 04 January 2010 - 12:50 PM

creativejunk, on 04 January 2010 - 12:00 PM, said:

Jquery easing plugin - http://gsgd.co.uk/sa.../jquery/easing/

Lots of popular sliders / plugins use this plugin.

#3 Sinero Web Design

Dedicated Member

Group: Members
Posts: 114
Joined: 25-October 09
Reputation: 8
Gender:Male
Location:Northwest , Manchester
Experience:Advanced
Area of Expertise:Web Developer

Posted 04 January 2010 - 02:20 PM

You will be amazed how easy it is to implement Jquery in to your web development's and to be honest the demonstrations online are not that easy to follow. Take a look at this

http://malsup.com/jquery/cycle/

This is the cycle function which has many effects and methods of displaying either photos , or content on your pages without spending hours in flash.

-

Unfortunately I don't have the time to write you full beginner tutorial on how to implement this but a few tips which will help you :

1. Your Photos need to be in a <div> layer with the class set to default <div class"slideshow"> Insert Image </div>
2. You need to include Jquery JavaScript Script in your <HEAD> Tags
3. Add the Cycle JavaScript settings such as method and speed just after the </SCRIPT>

that's it really , you might need to create a DIV ID in your CSS to position your content <DIV> Tags and if you have layers set the zindex levels to -1 or something.

Hope this helps and good luck.

* Also attempt this in a empty html file before inserting it into an existing project , just to find out how it works.