Creating an image slider (ajax?) as seen on... |
Creating an image slider (ajax?) as seen on... |
afsmith21 |
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 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! |
pandy |
Jan 30 2012, 11:30 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Have you searched the script sites, for example http://hotscripts.com ? Or googled?
|
afsmith21 |
Jan 30 2012, 01:29 PM
Post
#3
|
Group: Members Posts: 3 Joined: 30-January 12 Member No.: 16,357 |
Yes I've tried searching script sites and I have posted a script request at HotScripts. I have googled but haven't found anything like the slider I'm looking for. |
Christian J |
Jan 30 2012, 02:35 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
Frederiek |
Jan 31 2012, 04:31 AM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 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". |
Christian J |
Jan 31 2012, 10:45 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. 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. |
afsmith21 |
Jan 31 2012, 02:34 PM
Post
#7
|
Group: Members Posts: 3 Joined: 30-January 12 Member No.: 16,357 |
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. 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? |
Christian J |
Jan 31 2012, 03:47 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I wouldn't say it's easy.
I googled for "thumbnail pagination" and similar but didn't find much. Are there perhaps other terms describing this kind of thing? |
Frederiek |
Feb 1 2012, 03:13 AM
Post
#9
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
As far as I can tell, the white house site uses the jQuery Cycle plugin ( http://jquery.malsup.com/cycle/ ) in combination with some (ajax and/or json(?)) pagination mechanism.
It looks like a simple slideshow, that doesn't autostart, similar to http://www.stunicholls.com/gallery/jquery-photo-slide.html or http://www.stunicholls.com/various/jquery-info-slide.html . I also tried quite a few search strings. I just tried "content slider with pagination". That seems to show some interesting results, such as (to name just a few) : Easy Slider 1.7 - Numeric Navigation jQuery Slider from CSS Globe or Virtual Pagination script v2.1 from Dynamicdrive. Maybe these will help you to get on the right track. |
Lo-Fi Version | Time is now: 23rd April 2024 - 04:28 PM |