hiveblocks
#### What Will I Learn?
- You will learn how to install jQuery-Backstretch Plugin
- You will learn how to use jQuery-Backstretch Plugin
- You will learn how to call image using Backstretch Plugin
#### Requirements
- Basic Knowledges about HTML
- Basic Knowledges about jQuery
- Provide some images for sample
- You have to install or host the jQuery file, You can add jQuery CDN if you don't want to install or host it
- You have to install or host the about hideshowpassword plugin, You can get it on github : https://github.com/jquery-backstretch/jquery-backstretch
#### Difficulty
- Basic
#### Tutorial Contents
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[[source](https://github.com/jquery-backstretch/jquery-backstretch)]
Here the simple steps to create background slider using jQuery-Backstretch Plugin:
##### &Download and host the jQuery-Backstretch Plugin
- Download the jQuery-Backstretch Plugin on github : https://github.com/jquery-backstretch/jquery-backstretch or in its official web :
http://www.jquery-backstretch.com
- Open the download folder, Move all jQuery-Backstretch file and save it on Webserver. Save it in Xampp/htdocs/ if you use XAMPP. While you use Linux create it at var/www.
##### &Adding Some Images
- Add same images you will slide it on background and save it in the same folder of Backstretch Plugin.
##### &Creating PHP file.
- Open your text editor.
- Create new file and save as `index.php`. Save it on the Backstretch folder.
- Add the HTML element as usual.
```
<html>
<head>
<title>Background Slider</title>
</head>
<body>
</body>
</html>
```
- Create some content in the page for example
```
<h2 style="color:red">BACKGROUND SLIDER</h2>
<p style="color:white">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>
```
- Because the jQuery-Backstretch Plugin is part of jQuery so to use it we need to host jquery also or you can add the CDN of jQuery if you don't want to host it. For more Detail you can visit [jquery official web](https://code.jquery.com/). In this tutorial I use Google CDN. Add the CDN in `<head>` element.
``` language
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
```
- Include the jQuery-Backstretch Plugin
```
<script src="jquery.backstretch.min.js"></script>
```
##### &Start code JS Script
- To write the jQuery Script we should open `<script>` tag. You can put it in `,head>` element or in `<body>` element.
``` language
<script></script>
```
- To add Backstretch Plugin just open backstretch() function with the parameter is the images, the duration and the fade of slide. Here the format
```
$.backstretch(["img (1).jpg","img (2).jpg","img (3).jpg","img (4).jpg"], {duration: 1500, fade: 800});
```
##### &Testing
- Save the file and run it on your localhost in browser.
##### &Full Code
``` language
<html>
<head>
<title>Background Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
</head>
<body>
<center>
<h2 style="color:red">BACKGROUND SLIDER</h2>
<p style="color:white">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>
</center>
<script>
$.backstretch(["img (1).jpg","img (2).jpg","img (3).jpg","img (4).jpg"], {duration: 1500, fade: 800});
</script>
</body>
</html>
```
## <center>[Download Full File in GDrive](https://drive.google.com/open?id=1-rlUTLfEqdvL_YRN-9TF5rJ7ZxY5Tntt)</center>
#### Curriculum
- [How to create Password Strength Checker in Sigup form using jQuery](https://utopian.io/utopian-io/@sogata/how-to-create-password-strength-checker-in-sigup-form-using-jquery)
- [How to add Rows in Table element using jQuery](https://utopian.io/utopian-io/@sogata/how-to-add-rows-in-table-element-using-jquery)
- [How to insert data to MySql from PHP using jQuery AJAX](https://utopian.io/utopian-io/@sogata/how-to-insert-data-to-mysql-from-php-using-jquery-ajax)
- [Auto-Refresh Specific HTML element Without Reloading page Using jQuery](https://utopian.io/utopian-io/@sogata/auto-refresh-specific-html-element-without-reloading-page-using-jquery)
- [How to create a toggle button to show and hide an element](https://utopian.io/utopian-io/@sogata/how-to-create-a-toggle-button-to-show-and-hide-an-element)
- [How to Create Filter Lists using jQuery](https://utopian.io/utopian-io/@sogata/how-to-create-filter-lists-using-jquery)
- [How to Create Filter Tables using jQuery](https://utopian.io/utopian-io/@sogata/how-to-create-filter-tables-using-jquery)
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sogata/how-to-slide-the-background-using-jquery-backstretch-plugin">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>| author | sogata | ||||||
|---|---|---|---|---|---|---|---|
| permlink | how-to-slide-the-background-using-jquery-backstretch-plugin | ||||||
| category | utopian-io | ||||||
| json_metadata | {"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":440647,"name":"jquery-backstretch","full_name":"jquery-backstretch/jquery-backstretch","html_url":"https://github.com/jquery-backstretch/jquery-backstretch","fork":false,"owner":{"login":"jquery-backstretch"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","tutorials","opensource","jquery","aceh"],"users":["sogata"],"links":["https://github.com/jquery-backstretch/jquery-backstretch","https://code.jquery.com/","https://res.cloudinary.com/hpiynhbhq/image/upload/v1517648576/wd9suzepktvir0yngybw.png","https://drive.google.com/open?id=1-rlUTLfEqdvL_YRN-9TF5rJ7ZxY5Tntt","https://utopian.io/utopian-io/@sogata/how-to-create-password-strength-checker-in-sigup-form-using-jquery","https://utopian.io/utopian-io/@sogata/how-to-add-rows-in-table-element-using-jquery","https://utopian.io/utopian-io/@sogata/how-to-insert-data-to-mysql-from-php-using-jquery-ajax","https://utopian.io/utopian-io/@sogata/auto-refresh-specific-html-element-without-reloading-page-using-jquery","https://utopian.io/utopian-io/@sogata/how-to-create-a-toggle-button-to-show-and-hide-an-element","https://utopian.io/utopian-io/@sogata/how-to-create-filter-lists-using-jquery","https://utopian.io/utopian-io/@sogata/how-to-create-filter-tables-using-jquery"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1517648576/wd9suzepktvir0yngybw.png"],"moderator":{"account":"flauwy","time":"2018-02-04T16:47:42.510Z","reviewed":true,"pending":false,"flagged":false}} | ||||||
| created | 2018-02-03 09:14:21 | ||||||
| last_update | 2018-02-04 16:47:42 | ||||||
| depth | 0 | ||||||
| children | 5 | ||||||
| last_payout | 2018-02-10 09:14:21 | ||||||
| cashout_time | 1969-12-31 23:59:59 | ||||||
| total_payout_value | 11.282 HBD | ||||||
| curator_payout_value | 4.762 HBD | ||||||
| pending_payout_value | 0.000 HBD | ||||||
| promoted | 0.000 HBD | ||||||
| body_length | 5,471 | ||||||
| author_reputation | 6,963,584,854,647 | ||||||
| root_title | "How to Slide the background using jQuery-Backstretch Plugin" | ||||||
| beneficiaries |
| ||||||
| max_accepted_payout | 1,000,000.000 HBD | ||||||
| percent_hbd | 10,000 | ||||||
| post_id | 34,600,306 | ||||||
| net_rshares | 3,015,639,997,237 | ||||||
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| rejacole | 0 | 19,308,110,049 | 100% | ||
| ashirkev | 0 | 102,445,494 | 100% | ||
| sogata | 0 | 19,443,108,463 | 100% | ||
| saifulyukache | 0 | 200,342,593 | 100% | ||
| cifer | 0 | 2,086,395,986 | 80% | ||
| mungprik | 0 | 533,648,143 | 100% | ||
| messwir | 0 | 174,219,604 | 100% | ||
| utopian-io | 0 | 2,967,300,447,262 | 1.97% | ||
| rajamalikulfajar | 0 | 460,414,227 | 100% | ||
| steemitstats | 0 | 2,066,422,395 | 5% | ||
| nasrulnazar95 | 0 | 603,178,405 | 100% | ||
| tdre | 0 | 606,030,813 | 100% | ||
| iskandarr | 0 | 197,181,809 | 100% | ||
| mdnazmulhasan | 0 | 295,618,914 | 100% | ||
| rizallipoo | 0 | 439,348,453 | 100% | ||
| rafael98 | 0 | 578,792,534 | 100% | ||
| muhammadfarhanza | 0 | 562,238,401 | 100% | ||
| tarjulfuzary | 0 | 494,642,576 | 100% | ||
| andioeng | 0 | 187,411,116 | 100% |
Thank you for the contribution. It has been approved. You can contact us on [Discord](https://discord.gg/uTyJkNm). **[[utopian-moderator]](https://utopian.io/moderators)**
| author | flauwy |
|---|---|
| permlink | re-sogata-how-to-slide-the-background-using-jquery-backstretch-plugin-20180204t164746278z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"} |
| created | 2018-02-04 16:47:54 |
| last_update | 2018-02-04 16:47:54 |
| depth | 1 |
| children | 0 |
| last_payout | 2018-02-11 16:47:54 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 172 |
| author_reputation | 296,259,911,900,510 |
| root_title | "How to Slide the background using jQuery-Backstretch Plugin" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 34,929,678 |
| net_rshares | 0 |
Akhi ne follow ata Lon beuh dan vote hehh
| author | rafael98 | ||||||
|---|---|---|---|---|---|---|---|
| permlink | re-sogata-201824t311554z | ||||||
| category | utopian-io | ||||||
| json_metadata | {"tags":["utopian-io","tutorials","opensource","jquery","aceh"],"app":"esteem/1.5.1","format":"markdown+html","community":"esteem"} | ||||||
| created | 2018-02-03 20:01:03 | ||||||
| last_update | 2018-02-03 20:01:03 | ||||||
| depth | 1 | ||||||
| children | 0 | ||||||
| last_payout | 2018-02-10 20:01:03 | ||||||
| cashout_time | 1969-12-31 23:59:59 | ||||||
| total_payout_value | 0.112 HBD | ||||||
| curator_payout_value | 0.038 HBD | ||||||
| pending_payout_value | 0.000 HBD | ||||||
| promoted | 0.000 HBD | ||||||
| body_length | 41 | ||||||
| author_reputation | 88,933,109,989 | ||||||
| root_title | "How to Slide the background using jQuery-Backstretch Plugin" | ||||||
| beneficiaries |
| ||||||
| max_accepted_payout | 1,000,000.000 HBD | ||||||
| percent_hbd | 10,000 | ||||||
| post_id | 34,720,974 | ||||||
| net_rshares | 24,280,946,051 | ||||||
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| sogata | 0 | 24,280,946,051 | 100% |
@sogata sungguh indah gambar di atas 👍👍👍
| author | rolemodels |
|---|---|
| permlink | re-sogata-how-to-slide-the-background-using-jquery-backstretch-plugin-20180205t055649396z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"users":["sogata"],"app":"steemit/0.1"} |
| created | 2018-02-05 05:56:57 |
| last_update | 2018-02-05 05:56:57 |
| depth | 1 |
| children | 0 |
| last_payout | 2018-02-12 05:56:57 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 40 |
| author_reputation | 7,355,592,086 |
| root_title | "How to Slide the background using jQuery-Backstretch Plugin" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 35,064,975 |
| net_rshares | 0 |
@sogata, I always try to support who contribute to open source project, upvote you.
| author | steemitstats |
|---|---|
| permlink | 20180203t091557712z-post |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"]} |
| created | 2018-02-03 09:15:03 |
| last_update | 2018-02-03 09:15:03 |
| depth | 1 |
| children | 0 |
| last_payout | 2018-02-10 09:15:03 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 83 |
| author_reputation | 351,882,871,185 |
| root_title | "How to Slide the background using jQuery-Backstretch Plugin" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 34,600,405 |
| net_rshares | 0 |
### Hey @sogata I am @utopian-io. I have just upvoted you! #### Achievements - Seems like you contribute quite often. AMAZING! #### Suggestions - Contribute more often to get higher and higher rewards. I wish to see you often! - Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck! #### Get Noticed! - Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions! #### Community-Driven Witness! I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER! - <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a> - <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a> - Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a> [](https://steemit.com/~witnesses) **Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
| author | utopian-io |
|---|---|
| permlink | re-sogata-how-to-slide-the-background-using-jquery-backstretch-plugin-20180204t192403362z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"} |
| created | 2018-02-04 19:24:03 |
| last_update | 2018-02-04 19:24:03 |
| depth | 1 |
| children | 0 |
| last_payout | 2018-02-11 19:24:03 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 1,426 |
| author_reputation | 152,955,367,999,756 |
| root_title | "How to Slide the background using jQuery-Backstretch Plugin" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 34,960,362 |
| net_rshares | 0 |