jQuery Info-Slide

4th March 2009

Image Number One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra libero nec diam. Nam convallis viverra massa. Pellentesque blandit condimentum orci. Quisque sem nisi, iaculis in, lacinia ultricies, scelerisque non, lacus. Proin dolor nisi, consectetur a, faucibus id, egestas semper, libero. Sed dui. Sed porta tincidunt dui. Duis lacus elit, ultrices in, euismod a, ultrices id, eros. Suspendisse mattis libero quis arcu. Aliquam imperdiet dignissim dui. In leo. Maecenas suscipit eros vel diam. Suspendisse potenti. Maecenas tellus. Pellentesque sapien nibh, lobortis non, sollicitudin sit amet, imperdiet vehicula, orci. Mauris tellus diam, vulputate vel, sodales eget, rutrum at, dolor.

more information...

Image Number Two

Morbi commodo. Praesent feugiat massa non mi. Duis imperdiet elit sit amet turpis. Suspendisse potenti. Mauris nec nisl vel nunc congue laoreet. Pellentesque convallis magna gravida elit. Duis non purus. Suspendisse rhoncus, erat et congue pharetra, leo tellus mollis dui, sit amet sollicitudin nisi leo quis metus. Proin ac massa in magna ullamcorper viverra. Nunc pulvinar malesuada justo.

more information...

Image Number Three

Donec sodales diam sit amet libero. Vestibulum posuere dignissim est. Aliquam erat volutpat. Praesent et mi. Nulla facilisi. Nunc id eros nec felis eleifend imperdiet. Curabitur purus. Etiam egestas. Donec accumsan. Suspendisse tempor libero. Proin vel tellus. Sed suscipit lacus vitae risus. Curabitur vulputate. Ut dapibus arcu quis metus. Donec metus sem, placerat in, fermentum vestibulum, hendrerit in, dolor. Vivamus luctus metus fringilla augue. Proin sollicitudin condimentum nisi. Curabitur interdum metus ut neque. Ut et nibh. Duis laoreet enim id leo.

more information...

Image Number Four

Nulla velit erat, congue at, tincidunt ac, aliquam facilisis, nisl. Phasellus a risus sed velit aliquam vestibulum. Quisque nec diam at lectus suscipit condimentum. Sed volutpat, lacus vel tempor consequat, magna enim mollis lorem, vel semper odio tellus tempus urna. Nullam dictum augue quis enim. Nulla elementum. Aliquam ullamcorper justo. Maecenas urna lacus, porttitor id, commodo et, dictum ac, nulla. Praesent egestas, nibh ac eleifend vestibulum, magna est tristique nibh, quis ornare ipsum diam non purus. In ut libero. Maecenas accumsan turpis id nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras posuere nunc vel purus.

more information...

Image Number Five

Sed arcu. Proin eleifend, arcu vitae adipiscing dignissim, metus nisi suscipit dui, sit amet laoreet nibh nibh vel nisl. Nunc dui libero, varius in, vulputate eget, euismod sit amet, mi. Proin tempus lacinia metus. Ut purus diam, luctus suscipit, sodales nec, tincidunt ac, lorem. Etiam rutrum libero. Etiam sit amet quam eget odio pretium ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet neque. Sed leo mi, fermentum eget, tempus ut, imperdiet quis, metus. Pellentesque vel risus eu orci dictum consectetur.

more information...

Image Number Six

Maecenas lacinia elit. Pellentesque magna. Fusce ut ligula non ipsum tincidunt dapibus. Mauris dui nisi, iaculis id, malesuada et, ornare sit amet, sapien. Praesent quis quam non massa consectetur pretium. Suspendisse et enim. Aliquam scelerisque, massa at tincidunt rutrum, dui diam luctus neque, eget placerat risus metus blandit ipsum. Integer elementum aliquam magna. Etiam bibendum, sapien at molestie ultrices, leo dui porttitor est, non aliquet massa ipsum et dolor. Phasellus consectetur nisl in metus. In nec est sit amet lacus sagittis gravida. Maecenas vel diam quis elit interdum consectetur. Curabitur fermentum, velit at cursus dictum, dolor tellus elementum sapien, luctus facilisis quam dui eu felis.

more information...

Image Number Seven

Aenean congue dolor ac orci. Donec ullamcorper nulla et leo. Vestibulum risus augue, vulputate ac, pellentesque ac, viverra in, orci. Aliquam erat volutpat. Mauris rutrum lacinia nisi. Curabitur pellentesque. Curabitur id ante. Duis suscipit, orci id tincidunt sollicitudin, risus nibh blandit dolor, vel tempus enim leo ut ipsum. Phasellus posuere. Ut nunc mi, molestie quis, sodales nec, condimentum quis, dolor. Sed a urna nec lorem sagittis bibendum. Sed congue velit in diam. In hac habitasse platea dictumst. Donec ut augue id massa dapibus eleifend. Nullam pretium orci quis risus. Donec fermentum dignissim nunc.

more information...

Image Number Eight

Vivamus sed risus eu urna accumsan varius. In augue. Mauris in orci a mauris sodales semper. In hac habitasse platea dictumst. Vivamus mauris. Pellentesque ipsum neque, condimentum sit amet, faucibus vitae, iaculis et, dolor. Aliquam erat. Nunc adipiscing dolor eget eros. Nunc in lectus. Pellentesque magna quam, molestie non, facilisis nec, condimentum in, turpis. Etiam molestie ante non nulla iaculis dapibus. Cras non arcu.

more information...

Image Number Nine

Sed hendrerit, massa malesuada molestie consectetur, tortor lacus mollis odio, gravida laoreet risus quam in nulla. Duis nulla ante, vehicula eget, dapibus vitae, mollis vitae, sapien. Maecenas placerat egestas lorem. Donec tincidunt mollis lorem. Proin auctor lobortis mi. Nullam vestibulum dui. Aenean suscipit neque sit amet nunc. Nam ut odio. Nullam pulvinar tristique enim. Curabitur at lectus eget lorem semper aliquam. Curabitur sodales. Duis nec ligula. Proin rhoncus lacinia erat. Nulla vel lectus ut lacus volutpat consectetur. Suspendisse interdum dapibus mauris. Praesent at nisl. Etiam elementum luctus nulla.

more information...

Image Number Ten

Nulla facilisi. Ut in sem ac ante sodales porta. Donec nec sapien. Pellentesque molestie enim ac nibh. Nulla facilisi. Donec feugiat condimentum elit. Donec eget sem sed diam mollis hendrerit. Cras pellentesque libero a augue. Maecenas a tellus. Donec dictum.

more information...
1
2
3
4
5
6
7
8
9
10

Next Demonstration

Previous Demonstration

Information

Following on from my Photo-Slide gallery and just to show how versatile this is I have produced this demo of a sliding set of information pages.

To get from one info page to another you only get one page movement. In other words if you move from page 1 to page 3 you do not have to move through page 2, and similarly if you move from page 10 to page 1 using the left/right buttons you do not fly back to image 1. This way there is no flying backwards and forwards to see your pages just a single move left or right.

You are also not limited to using exactly 10 pages, it is just a case of setting the jQuery variable for the number of pages and then adding or removing pages and corresponding number buttons.

Similarly with the page width. This is set up in the jQuery as a variable and you will also need to set the #slide width in the stylesheet.

The picture frame is just a styled div so this can be made any size you like to fit any page height.

Finally, the pages can contain any information you like as these are held in divs.

You will need a copy of jQuery to be able to use this slideshow.

If you would like a copy of this demonstration then please email me and make a donation to support stunicholls.com. A donation is required for the use of this demo and every little helps to keep this site up and running.