So here it is… <\/p>\r\n\r\n
The demo<\/h3>\r\n\r\n\r\n\t\t![\"Dingle](\"\/demos\/images\/img1.jpg\")
\r\n\t\tDingle Peninsula, County Kerry, looking northward from Clogher Head<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t![\"Sunset](\"\/demos\/images\/img4.jpg\")
\r\n\t\t
Sunset on the waves, near Fanore, County Clare<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t![\"Bee\"](\"\/demos\/images\/img2.jpg\")
\r\n\t\t
A bee.<\/p>\r\n
Managed to get the focus just right on the wing and head.<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t![\"Sparrowhawk\"](\"\/demos\/images\/img3.jpg\")
\r\n\t\t
A sparrowhawk in our front garden.<\/p>\r\n\t\t
Just out of shot is the racing pigeon she’s just caught and killed.<\/p>\r\n\t\t<\/div>\r\n\t\t\r\n\r\n\t\t\r\n\t\t![\"St](\"\/demos\/images\/img5.jpg\")
\r\n\t\t
Sunset over St Ives, Cornwall<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t![\"Frog\"](\"\/demos\/images\/img6.jpg\")
\r\n\t\t
A frog in our garden pond.<\/p>\r\n\t\t<\/div>\r\n<\/div>\r\n
Here is a standalone demo<\/a> too.<\/p>\r\nThe code<\/h3>\r\n
This needs a fair amount of css, in part to make sure the page displays OK in the absence of javascript. Amend the width and heights to suit your own images.<\/p>\r\n
#slider{position:relative;padding:10px;height:150px;width:760px}\r\n#slider img,#slider div{display:none}\r\n#slider img.active,#slider #slider_box{display:block;position:absolute;left:10px;top:10px;width:500px;height:150px}\r\n#slider div.active, #slider #caption_box{display:block;position:absolute;left:560px;top:10px;width:170px;height:150px;}\r\n#slider img{position:absolute;}\r\n.caption p{margin-top:0}\r\n\r\n#slider #slider_box{overflow:hidden}\r\n#slider #slider_images{position:absolute;left:0;top:0;display:block}\r\n#slider_images img{display:block}\r\n\r\n#slider #caption_box{overflow:hidden}\r\n#slider #slider_captions{display:block;position:absolute;left:0;top:0}\r\n#slider #slider_captions div{display:block;height:150px}<\/pre>\r\n\r\nAnd here’s the javascript. With a lot of images, you could call this using $(window).load()<\/code> just to make sure all the images have loaded before the first animation occurs, but with a few small images it should be OK anyway.<\/p>\r\n\r\n\r\nvar imageWidth = $('#slider img:first').width();\r\nvar captionHeight = $('#slider img:first').height();\r\n\r\n\/\/wrap the first image in divs for the slider\r\n<\/span>$('#slider img:first').wrap('<div id=\"slider_box\"><div id=\"slider_images\">').removeClass('active');\r\nvar countImages = 1;\/\/initialise an image counter\r\n<\/span>\/\/for each remaining image, move it into the slider_images div, stacked up left to right, and unhide it\r\n<\/span>$('#slider > img').each(function(){\r\n\t$(this).insertAfter('#slider_images img:last').css({'left':imageWidth*countImages+'px'}).show();\r\n\tcountImages++;\r\n});\t\r\n\/\/clone the last image and put it at the front\r\n<\/span>$('#slider_images img:last').clone().prependTo('#slider_images').css({'left':-1*imageWidth+'px'});\r\n\/\/clone the first image (now the second image after the previous operation) and put it at the end\r\n<\/span>$('#slider_images img:first').next().clone().appendTo('#slider_images').css({'left':countImages*imageWidth+'px'});\r\n\r\n\/\/wrap all the captions into divs for the slider - use wrapAll now as the captions are now adjacent in the DOM\r\n<\/span>\/\/we don't need to position the captions absolutely as they'll naturally stack up vertically\r\n<\/span>$('.caption').wrapAll('<div id=\"caption_box\"><div id=\"slider_captions\">');\r\n$('div').removeClass('active');\r\n\/\/clone the last caption and put it at the front\r\n<\/span>$('#slider_captions .caption:last').clone().prependTo('#slider_captions');\r\n\/\/move the slider_captions div up so that the first caption is still visible\r\n<\/span>$('#slider_captions').css({'top':-1*captionHeight+'px'});\r\n\/\/clone the first caption (now the second after the previous operation) and put it at the end \r\n<\/span>$('#slider_captions .caption:first').next().clone().appendTo('#slider_captions');\r\n\r\n\/\/find the height of the content of each caption and apply a top padding to the first element so the caption is vertically centred\r\n<\/span>$('.caption').each(function(){\r\n\tvar contentHeight=0;\r\n\t$(this).children().each(function(){\r\n\t\tcontentHeight += $(this).outerHeight(true);\r\n\t});\r\n\t$(this).children().first().css({'paddingTop':0.5*(captionHeight-contentHeight)+'px'});\r\n});\t\r\n\r\ndoSlide = function(){\/\/recursive function that carries out the animation\r\n<\/span>\t\r\n\tvar newLeft = $('#slider_images').position().left-(1*imageWidth);\/\/calculate the new position which is the current position minus the width of one image\r\n<\/span>\t$('#slider_images').animate({'left':newLeft+'px'},'slow',function(){\/\/slide to the new position...\r\n<\/span>\t if (Math.abs(newLeft) == ((countImages)*imageWidth)) \/\/...and if the slider is displaying the last image, which is the clone of the first image...\r\n<\/span>\t\t{\r\n\t\t$('#slider_images').css({'left':0});\/\/...reset the slider back to the first image without animating \r\n<\/span>\t\t}\r\n\t });\r\n\t \r\n\tvar newTop = $('#slider_captions').position().top-(1*captionHeight);\/\/calculate the new position which is the current position minus the height of one caption\r\n<\/span>\t$('#slider_captions').animate({'top':newTop+'px'},'slow',function(){\/\/slide to the new position...\r\n<\/span>\t if (Math.abs(newTop) == ((countImages+1)*captionHeight)) \/\/...and if the slider is displaying the last caption, which is the clone of the first image...\r\n<\/span>\t\t{\r\n\t\t$('#slider_captions').css({'top':-1*captionHeight+'px'});\/\/...reset the slider back to the first caption without animating \r\n<\/span>\t\t}\r\n\t });\t\t \r\n\tsetTimeout(doSlide,4000);\t\r\n};\r\n\r\nsetTimeout(doSlide,4000);\r\n\t\r\n<\/pre>\r\nThe logic<\/h3>\r\n
On load, only the image and the caption with class of active<\/code> are displayed. Then I’m starting the code off by manipulating the html to stack all the images in a div, absolutely positioned so that they display in a horizontal row, and similarly with the captions to stack them in a column. Then I’m cloning the first and last images and the first and last captions and adding them back in to the html so that both appear to slide endlessly – I’ve used precisely the same approach as in the basic endless slider<\/a> . Then I’m simply animating both the image and the caption via setTimeout<\/code><\/p>\r\nI’ve tested in FF3\/5\/7, Opera 11, Chrome, Safari 5 and IE6\/7\/8\/9, all on Windows 7.<\/p>\r\n
Can I use this on my site?<\/h3>\r\n
Probably. See my policies on using code from this site<\/a>.<\/p>\r\n\r\n
\r\n\t\tDingle Peninsula, County Kerry, looking northward from Clogher Head<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t\r\n\t\t
Sunset on the waves, near Fanore, County Clare<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t\r\n\t\t
A bee.<\/p>\r\n
Managed to get the focus just right on the wing and head.<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t\r\n\t\t
A sparrowhawk in our front garden.<\/p>\r\n\t\t
Just out of shot is the racing pigeon she’s just caught and killed.<\/p>\r\n\t\t<\/div>\r\n\t\t\r\n\r\n\t\t\r\n\t\t\r\n\t\t
Sunset over St Ives, Cornwall<\/p>\r\n\t\t<\/div>\r\n\r\n\t\t\r\n\t\t
A frog in our garden pond.<\/p>\r\n\t\t<\/div>\r\n<\/div>\r\n
Here is a standalone demo<\/a> too.<\/p>\r\n This needs a fair amount of css, in part to make sure the page displays OK in the absence of javascript. Amend the width and heights to suit your own images.<\/p>\r\n And here’s the javascript. With a lot of images, you could call this using On load, only the image and the caption with class of I’ve tested in FF3\/5\/7, Opera 11, Chrome, Safari 5 and IE6\/7\/8\/9, all on Windows 7.<\/p>\r\n Probably. See my policies on using code from this site<\/a>.<\/p>\r\n\r\nThe code<\/h3>\r\n
#slider{position:relative;padding:10px;height:150px;width:760px}\r\n#slider img,#slider div{display:none}\r\n#slider img.active,#slider #slider_box{display:block;position:absolute;left:10px;top:10px;width:500px;height:150px}\r\n#slider div.active, #slider #caption_box{display:block;position:absolute;left:560px;top:10px;width:170px;height:150px;}\r\n#slider img{position:absolute;}\r\n.caption p{margin-top:0}\r\n\r\n#slider #slider_box{overflow:hidden}\r\n#slider #slider_images{position:absolute;left:0;top:0;display:block}\r\n#slider_images img{display:block}\r\n\r\n#slider #caption_box{overflow:hidden}\r\n#slider #slider_captions{display:block;position:absolute;left:0;top:0}\r\n#slider #slider_captions div{display:block;height:150px}<\/pre>\r\n\r\n$(window).load()<\/code> just to make sure all the images have loaded before the first animation occurs, but with a few small images it should be OK anyway.<\/p>\r\n\r\n\r\nvar imageWidth = $('#slider img:first').width();\r\nvar captionHeight = $('#slider img:first').height();\r\n\r\n\/\/wrap the first image in divs for the slider\r\n<\/span>$('#slider img:first').wrap('<div id=\"slider_box\"><div id=\"slider_images\">').removeClass('active');\r\nvar countImages = 1;\/\/initialise an image counter\r\n<\/span>\/\/for each remaining image, move it into the slider_images div, stacked up left to right, and unhide it\r\n<\/span>$('#slider > img').each(function(){\r\n\t$(this).insertAfter('#slider_images img:last').css({'left':imageWidth*countImages+'px'}).show();\r\n\tcountImages++;\r\n});\t\r\n\/\/clone the last image and put it at the front\r\n<\/span>$('#slider_images img:last').clone().prependTo('#slider_images').css({'left':-1*imageWidth+'px'});\r\n\/\/clone the first image (now the second image after the previous operation) and put it at the end\r\n<\/span>$('#slider_images img:first').next().clone().appendTo('#slider_images').css({'left':countImages*imageWidth+'px'});\r\n\r\n\/\/wrap all the captions into divs for the slider - use wrapAll now as the captions are now adjacent in the DOM\r\n<\/span>\/\/we don't need to position the captions absolutely as they'll naturally stack up vertically\r\n<\/span>$('.caption').wrapAll('<div id=\"caption_box\"><div id=\"slider_captions\">');\r\n$('div').removeClass('active');\r\n\/\/clone the last caption and put it at the front\r\n<\/span>$('#slider_captions .caption:last').clone().prependTo('#slider_captions');\r\n\/\/move the slider_captions div up so that the first caption is still visible\r\n<\/span>$('#slider_captions').css({'top':-1*captionHeight+'px'});\r\n\/\/clone the first caption (now the second after the previous operation) and put it at the end \r\n<\/span>$('#slider_captions .caption:first').next().clone().appendTo('#slider_captions');\r\n\r\n\/\/find the height of the content of each caption and apply a top padding to the first element so the caption is vertically centred\r\n<\/span>$('.caption').each(function(){\r\n\tvar contentHeight=0;\r\n\t$(this).children().each(function(){\r\n\t\tcontentHeight += $(this).outerHeight(true);\r\n\t});\r\n\t$(this).children().first().css({'paddingTop':0.5*(captionHeight-contentHeight)+'px'});\r\n});\t\r\n\r\ndoSlide = function(){\/\/recursive function that carries out the animation\r\n<\/span>\t\r\n\tvar newLeft = $('#slider_images').position().left-(1*imageWidth);\/\/calculate the new position which is the current position minus the width of one image\r\n<\/span>\t$('#slider_images').animate({'left':newLeft+'px'},'slow',function(){\/\/slide to the new position...\r\n<\/span>\t if (Math.abs(newLeft) == ((countImages)*imageWidth)) \/\/...and if the slider is displaying the last image, which is the clone of the first image...\r\n<\/span>\t\t{\r\n\t\t$('#slider_images').css({'left':0});\/\/...reset the slider back to the first image without animating \r\n<\/span>\t\t}\r\n\t });\r\n\t \r\n\tvar newTop = $('#slider_captions').position().top-(1*captionHeight);\/\/calculate the new position which is the current position minus the height of one caption\r\n<\/span>\t$('#slider_captions').animate({'top':newTop+'px'},'slow',function(){\/\/slide to the new position...\r\n<\/span>\t if (Math.abs(newTop) == ((countImages+1)*captionHeight)) \/\/...and if the slider is displaying the last caption, which is the clone of the first image...\r\n<\/span>\t\t{\r\n\t\t$('#slider_captions').css({'top':-1*captionHeight+'px'});\/\/...reset the slider back to the first caption without animating \r\n<\/span>\t\t}\r\n\t });\t\t \r\n\tsetTimeout(doSlide,4000);\t\r\n};\r\n\r\nsetTimeout(doSlide,4000);\r\n\t\r\n<\/pre>\r\nThe logic<\/h3>\r\n
active<\/code> are displayed. Then I’m starting the code off by manipulating the html to stack all the images in a div, absolutely positioned so that they display in a horizontal row, and similarly with the captions to stack them in a column. Then I’m cloning the first and last images and the first and last captions and adding them back in to the html so that both appear to slide endlessly – I’ve used precisely the same approach as in the basic endless slider<\/a> . Then I’m simply animating both the image and the caption via setTimeout<\/code><\/p>\r\nCan I use this on my site?<\/h3>\r\n