>>> Programming >> JQuery > Jquery Image Scroller (This page has been seen 749 times)
Image scroller with text, that gets the data via JQuery and Ajax
THIS IS MY OLD VERSION. THE NEW VERSION IN COMING SOON AND IS 100% BETTER :)
I have made an image scroller with JQuery, it is fully customizeable. It gets the images, and text for each image from a php file with Ajax. It also uses JQuery Easing methods for a nice animation between images
Everytime the ImageScroller is finished, it looks up the PHP file again, and reloads it. This is usefull especially if the data in the PHP file is dynamically and is being pulled from a database.
Click here to view an example. Feel free to use the code if you like.
Click here to get the full source code.
You call my function like this:
TC_Scroll("Container","125px","125px","Up","easeOutBounce","Right","/tcscroll/images.php","",4000,1000,2000);
Parameters
"Container" The id of the DIV
"125px" Width of the image
"125px" Height of the image
"Up" DIRECTION can be, Up Down Left Right
"easeOutBounce" EASING function in JQuery
"Right" PlaceTxt can be Left Right
"/tcscroll/images.php" URL to load the php file from
"" PARAMETERS to send to the php file. You send them like myvar=var1&myvar2=var2 etc.
4000 ImgChangeSpeed Define when the next image will show in milliseconds
1000 Animation speed of EASING of the image
2000 Final Animation Speed of EASING of all the images
You will have to create an empty div and give it a name like Container. JQuery will then attach the elements to that div. You can have multiple TC_Scrolls in use on one page. And they can all have different speed settings, load different php files, and have different EASING functions attached
The DIV can animate Up, Down, Left or Right, and have text on either left, or right side of the image. In a future version you will be able to place the text on top or below of the image as well
I have tested it in Explorer 7, Firefox > 2, Opera, Safari, Chrome and it works perfectly
Enjoy :)
I have made an image scroller with JQuery, it is fully customizeable. It gets the images, and text for each image from a php file with Ajax. It also uses JQuery Easing methods for a nice animation between images
Everytime the ImageScroller is finished, it looks up the PHP file again, and reloads it. This is usefull especially if the data in the PHP file is dynamically and is being pulled from a database.
Click here to view an example. Feel free to use the code if you like.
Click here to get the full source code.
You call my function like this:
TC_Scroll("Container","125px","125px","Up","easeOutBounce","Right","/tcscroll/images.php","",4000,1000,2000);
Parameters
"Container" The id of the DIV
"125px" Width of the image
"125px" Height of the image
"Up" DIRECTION can be, Up Down Left Right
"easeOutBounce" EASING function in JQuery
"Right" PlaceTxt can be Left Right
"/tcscroll/images.php" URL to load the php file from
"" PARAMETERS to send to the php file. You send them like myvar=var1&myvar2=var2 etc.
4000 ImgChangeSpeed Define when the next image will show in milliseconds
1000 Animation speed of EASING of the image
2000 Final Animation Speed of EASING of all the images
You will have to create an empty div and give it a name like Container. JQuery will then attach the elements to that div. You can have multiple TC_Scrolls in use on one page. And they can all have different speed settings, load different php files, and have different EASING functions attached
The DIV can animate Up, Down, Left or Right, and have text on either left, or right side of the image. In a future version you will be able to place the text on top or below of the image as well
I have tested it in Explorer 7, Firefox > 2, Opera, Safari, Chrome and it works perfectly
Enjoy :)
Like
Dislike
Keywords for this article:
JQuery || Imagescroll || Carousel || Ajax || PHP || JQuery Animation || JQuery Easing
Advertisement by Google
Comment:
Code Language:
Code:
Here you can paste a code example. It will then be processed by SyntaxHighlighter and formatted for easier readability.
Please remember to select the correct Code Language in the select above so the SyntaxHighlighter can highlight the code properly.
Code:
Please enter the code you see above
What is 4 + 9 =