The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Creating an image slider (ajax?) as seen on...
afsmith21
post Jan 30 2012, 10:34 AM
Post #1





Group: Members
Posts: 3
Joined: 30-January 12
Member No.: 16,357



Hi,

I am trying to create an image slider like the one seen in the WhiteHouse.gov Photo Gallery under the big gray image box.

http://www.whitehouse.gov/photos-and-video...-2012-photo-day

Attached Image

I need the navigation links as well. (Mouse hovering over the slider navigation links shows links to /ajax?/ so I assume they are using ajax code.)

Can someone please provide code for this?

Thanks in advance!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Frederiek
post Jan 31 2012, 04:31 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,495
Joined: 23-August 06
From: Europe
Member No.: 9



There is an image gallery slideshow (black bkg) at the top, but the OP looks for the pagination slider beneath (hence his screenshot).

Indeed, AJAX is used (among other things, such as Drupal and jQuery plugins (as seen in their long js file)). Anyway, the content is an unordered list, with a link containing the image and its caption, which changes the background color upon hover.

Try searching for "jquery ajax pagination".


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 31 2012, 10:45 AM
Post #3


.
********

Group: WDG Moderators
Posts: 6,234
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Jan 31 2012, 10:31 AM) *

the OP looks for the pagination slider beneath (hence his screenshot).

I don't see anything that slides there though, it's just a pagination of thumbnails. unsure.gif

A pagination might be done with a server-side script, if you accept loading a new web page for each pagination section. This way you can also add more pictures to a web directory and the web pages update automatically.

It can also be done with javascript, if you can't accept loading a new web page, similar to http://www.alistapart.com/d/eatcake/4.html

Ajax seems like overkill, unless you need the javascript solution and there are too many images to load on a single page.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
afsmith21
post Jan 31 2012, 02:34 PM
Post #4





Group: Members
Posts: 3
Joined: 30-January 12
Member No.: 16,357



QUOTE(Christian J @ Jan 31 2012, 10:45 AM) *

QUOTE(Frederiek @ Jan 31 2012, 10:31 AM) *

the OP looks for the pagination slider beneath (hence his screenshot).

I don't see anything that slides there though, it's just a pagination of thumbnails. unsure.gif

A pagination might be done with a server-side script, if you accept loading a new web page for each pagination section. This way you can also add more pictures to a web directory and the web pages update automatically.

It can also be done with javascript, if you can't accept loading a new web page, similar to http://www.alistapart.com/d/eatcake/4.html

Ajax seems like overkill, unless you need the javascript solution and there are too many images to load on a single page.


Thanks for the reply. Right, the pagination is what I am looking for. However, I want it to behave as it does on the WH.gov page, not opening a new page for each pagination section.

So, javascript seems to be a fine solution. Can this be done easily by anyone reading?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd November 2014 - 10:04 PM