Project Name:- Replace Broken Images Using jQuery
Solution
- 2 files + 1 Folder with some images
- filename: index.php, own.js and some CDN like like bootstrap & jQuery
Index.php/Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Auto Load Submenu - By Hindialerts.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="imgcontainer"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="own.js"></script>
</body>
</html>
Own.js
$(document).ready(function () {
let images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
let image_html = '';
$.each(images, (key, value) => {
image_html += '<img src="img/' + value + '"/>';
});
$('#imgcontainer').html(image_html);
$('img').on('error', function () {
$(this).replaceWith('<img src="img/no-photo.jpg"/>');
});
});
This is only for learning purpose that you can understand easily. If you get any error or want to something new to learn share details below.
Other Important Topics
- Simple Google Suggestion Box Using jQuery, Ajax, PHP & MySQL
- [Free] Simple PHP OOP Job Posting Website Template
- Call Flipkart API with PHP Code Example
- [Project File] PayuMoney PHP Scripts
- [Project File] Send SMS Using PHP
- How To Make a Breadcrumb Navigation using PHP?
- [Project File] Simple Chat System in PHP
- Verification Account on Website by Email using PHP
Leave a Reply