{"id":13546889,"url":"https://github.com/rewish/jquery-bgswitcher","last_synced_at":"2025-04-02T19:31:57.464Z","repository":{"id":1079995,"uuid":"924933","full_name":"rewish/jquery-bgswitcher","owner":"rewish","description":"Switch the background-image with using effect.","archived":false,"fork":false,"pushed_at":"2019-10-31T03:23:45.000Z","size":1026,"stargazers_count":194,"open_issues_count":17,"forks_count":75,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-11-03T15:38:14.869Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://rewish.github.io/jquery-bgswitcher/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rewish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-09-20T13:43:46.000Z","updated_at":"2024-07-10T07:01:58.000Z","dependencies_parsed_at":"2022-07-06T06:01:29.814Z","dependency_job_id":null,"html_url":"https://github.com/rewish/jquery-bgswitcher","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewish%2Fjquery-bgswitcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewish%2Fjquery-bgswitcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewish%2Fjquery-bgswitcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewish%2Fjquery-bgswitcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rewish","download_url":"https://codeload.github.com/rewish/jquery-bgswitcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880083,"owners_count":20848807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:00:47.222Z","updated_at":"2025-04-02T19:31:56.932Z","avatar_url":"https://github.com/rewish.png","language":"JavaScript","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Image Effect"],"readme":"jQuery.BgSwitcher [![Build Status](https://travis-ci.org/rewish/jquery-bgswitcher.png?branch=master)](https://travis-ci.org/rewish/jquery-bgswitcher)\n=========================\n\nSwitch the background image with using effect.\n\nDemo\n-------------------------\n\nhttp://rewish.github.io/jquery-bgswitcher/\n\nUsage\n-------------------------\n\n```html\n\u003cdiv class=\"box\"\u003e\n  \u003cp\u003eLorem ipsum dolor sit amet.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n```js\n$(\".box\").bgswitcher({\n  images: [\"pic1.jpg\", \"pic2.jpg\", \"pic3.jpg\"],\n  ... Something Config ...\n});\n```\n\nFor example, if you want to disable the loop of switching:\n\n```js\n$(\".box\").bgswitcher({\n  images: [\"pic1.jpg\", \"pic2.jpg\", \"pic3.jpg\"],\n  loop: false\n});\n```\n\nConfigs\n-------------------------\n\n| Key      | Type    | Default | Description |\n| -------- | ------- | ------- | ------------|\n| images   | array   | []      | Background images |\n| interval | number  | 5000    | Interval of switching |\n| start    | boolean | true    | Start the switch on after initialization ([Calling the Methods](#calling-the-methods)) |\n| loop     | boolean | true    | Loop the switch |\n| shuffle  | boolean | false   | Shuffle the image order |\n| effect   | string  | fade    | Effect type ([Built-In effect types](#built-in-effect-types)) |\n| duration | number  | 1000    | Effect duration |\n| easing   | string  | swing   | Effect easing |\n\nEffect Types\n-------------------------\n\n### Built-In effect types\n\n* fade\n* blind\n* clip\n* slide\n* drop\n* hide (No effect)\n\n### Adding the effect type\n\nFirst, define effect with using the `$.BgSwitcher.defineEffect()`.\n\n```js\n$.BgSwitcher.defineEffect(\"extraSlide\", function($el) {\n  $el.animate({left: $el.width()}, this.config.duration, this.config.easing);\n});\n```\n\nThen, specify the effect name that you added.\n\n```js\n$(\".box\").bgswitcher({\n  images: [\"pic1.jpg\", \"pic2.jpg\", \"pic3.jpg\"],\n  effect: \"extraSlide\"\n});\n```\n\nCalling the Methods\n-------------------------\n\nSupport the method calls like jQuery UI Widget.\n\n```js\n$(\".box\").bgswitcher(\"method name\");\n```\n\nYou can call various methods, For example:\n\nName    | Description\n------- | -----------------------------\nstart   | Start the switching\nstop    | Stop the switching\ntoggle  | Toggle between start/stop\nreset   | Return to the first switching\nselect  | Select the switching at index\nnext    | Go to the next switching\nprev    | Go to the previous switching\ndestroy | !!Destroy BgSwitcher!!\n\nExample for `select` with button:\n\n```js\nvar $el = $(\".box\").bgswitcher({\n  images: [\"foo.jpg\", \"bar.jpg\", \"baz.jpg\"]\n});\n\n$(\"button\").on(\"click\", function() {\n  $el.bgswitcher(\"select\", 1); // bar.jpg\n});\n```\n\nDependencies\n-------------------------\n\nRequires jQuery 1.7.x or higher.\n\nSupport browsers\n-------------------------\n\n* IE7+\n* and modern browsers\n* Mobile Safari\n\nRunning the Tests\n-------------------------\n\nSetup the modules required for testing.\n\n```sh\ngit submodule update --init --recursive\n```\n\nYou can testing in two ways:\n\n* Open the `test/index.html` in the Web browser\n* Command Line Testing with the PhantomJS\n\n```sh\nphantomjs lib/mocha-phantomjs/lib/mocha-phantomjs.coffee test/index.html\n```\n\nLicense\n-------------------------\n\nThe [MIT License](https://github.com/rewish/jquery-bgswitcher/blob/master/LICENSE.md), Copyright (c) 2009-2014 [@rewish](https://github.com/rewish).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frewish%2Fjquery-bgswitcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frewish%2Fjquery-bgswitcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frewish%2Fjquery-bgswitcher/lists"}