Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page\/element, and will automatically resize as the window\/element size changes.<\/p>\n
There are a couple of examples included with this package, or feel free to check it out live on the project page itself.<\/p>\n
Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):<\/p>\n
\n\n\n \/\/ To attach Backstrech as the body's background\n $.backstretch(\"path\/to\/image.jpg\");\n\n \/\/ You may also attach Backstretch to a block-level element\n $(\".foo\").backstretch(\"path\/to\/image.jpg\");\n\n \/\/ Or, to start a slideshow, just pass in an array of images\n $(\".foo\").backstretch([\n \"path\/to\/image.jpg\",\n \"path\/to\/image2.jpg\",\n \"path\/to\/image3.jpg\" \n ], {duration: 4000});\n\n<\/code><\/pre>\nOptions<\/h2>\n
\n\nName<\/th>\n Description<\/th>\n Type<\/th>\n Default<\/th>\n<\/tr>\n \ncenteredX<\/code><\/td>\nThe ratio of the width\/height of the image doesn\u2019t always jive with the width\/height of the window. This parameter controls whether or not we center the image on the X axis to account for the discrepancy.<\/td>\n Boolean<\/td>\n true<\/td>\n<\/tr>\n \ncenteredY<\/code><\/td>\nThis parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy.<\/td>\n Boolean<\/td>\n true<\/td>\n<\/tr>\n \nfade<\/code><\/td>\nThis is the speed at which the image will fade in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast).<\/td>\n Integer or String<\/td>\n 0<\/td>\n<\/tr>\n \nduration<\/code><\/td>\nThe amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds.<\/td>\n Integer<\/td>\n 5000<\/td>\n<\/tr>\n<\/table>\nSlideshow API<\/h2>\n
Once you\u2019ve instantiated a Backstretch slideshow, there are many actions that you can perform it:<\/p>\n
\/\/ Start a slideshow\n$('.foo').backstretch([\n 'path\/to\/image.jpg',\n 'path\/to\/image2.jpg',\n 'path\/to\/image3.jpg'\n]);\n\n\/\/ Pause the slideshow\n$('.foo').backstretch(\"pause\");\n\n\/\/ Advance to the next slide\n$('.foo').backstretch(\"next\");\n<\/code><\/pre>\n\n\nMethod<\/th>\n Description<\/th>\n<\/tr>\n \n.backstretch(\"show\", n)<\/code><\/td>\nJump to the slide at a given index, where n is the number of the image that you\u2019d like to display. Slide number starts at 0.<\/td>\n<\/tr>\n \n.backstretch(\"prev\")<\/code><\/td>\nDisplay the previous image in a slideshow.<\/td>\n<\/tr>\n \n.backstretch(\"next\")<\/code><\/td>\nAdvance to the next image in a slideshow.<\/td>\n<\/tr>\n \n.backstretch(\"pause\")<\/code><\/td>\nPause the slideshow.<\/td>\n<\/tr>\n \n.backstretch(\"resume\")<\/code><\/td>\nResume a paused slideshow.<\/td>\n<\/tr>\n \n.backstretch(\"destroy\", preserveBackground)<\/code><\/td>\nDestroy the Backstretch instance. Optionally, you can pass in a Boolean parameter, preserveBackground, to determine whether or not you\u2019d like to keep the current image stretched as the background image.<\/td>\n<\/tr>\n \n.backstretch(\"resize\")<\/code><\/td>\nThis method is called automatically when the container (window or block-level element) is resized, however you can always call this manually if needed.<\/td>\n<\/tr>\n<\/table>\nPublic Variables<\/h2>\n
Sometimes, you\u2019ll want to access Backstretch\u2019s images after you\u2019ve instantiated the plugin. For example, perhaps you\u2019d like to be able add more images to a slideshow. Doing so is easy. You can access the images array as follows:<\/p>\n
$('.foo').backstretch([\n 'path\/to\/image.jpg',\n 'path\/to\/image2.jpg',\n 'path\/to\/image3.jpg'\n]);\n\n\/\/ Access the instance\nvar instance = $('.foo').data('backstretch');\n\n\/\/ Then, you can manipulate the images array directly\ninstance.images.push('path\/to\/image4.jpg')\n<\/code><\/pre>\nAdditionally, the current index of a slideshow is available through the instance as well:<\/p>\n
$(\"body\").data(\"backstretch\").index;\n<\/code><\/pre>\nEvents<\/h2>\nbackstretch.before<\/h3>\n
Backstretch will fire a \u201cbackstretch.before\u201d event before a new image loads, triggering a function that is passed the event, Backstretch instance, and index of the image that will be displayed. If you listen for that event, you can, for example, coordinate other changes to coincide with your slideshow.<\/p>\n
$(window).on(\"backstretch.before\", function (e, instance, index) {\n \/\/ If we wanted to stop the slideshow after it reached the end\n if (index === instance.images.length - 1) {\n instance.pause();\n };\n});\n<\/code><\/pre>\nbackstretch.after<\/h3>\n
Backstretch will also fire a \u201cbackstretch.after\u201d event after the new images has completed loading.<\/p>\n
$(window).on(\"backstretch.after\", function (e, instance, index) {\n \/\/ Do something\n});\n<\/code><\/pre>\nChangelog<\/h2>\nVersion 2.0<\/h3>\n\n- Now accepts an array of images to create a slideshow<\/li>\n
- Can attach Backstretch to any block-level element, not just the body<\/li>\n
- Deprecated \u201cspeed\u201d option in favor of \u201cfade\u201d for fadeIn timing<\/li>\n
- Added \u201cduration\u201d option, and Slideshow API<\/li>\n<\/ul>\n
Version 1.2<\/h3>\n\n- You can now called backstretch twice, and it will replace the existing image.<\/li>\n<\/ul>\n
Version 1.1<\/h3>\n\n- Added \u2018centeredX\u2019 and \u2018centeredY\u2019 options.<\/li>\n
- Removed \u2018hideUntilReady\u2019 option. It looks pretty bad if you don\u2019t hide the image until it\u2019s fully loaded.<\/li>\n
- Fixed IE img onload bug.<\/li>\n
- Now supports iPhone\/iPad orientation changes.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page\/element, and will automatically resize as the window\/element size changes. Demo There are a couple of examples included with this package, or feel free to check it […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7611","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7611"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7611\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}