Create a web page and images. include plugins for displaying images in light Box and...

Question

Question

Create a web page and images. include plugins for displaying images in light Box and...

Create a web page and images. include plugins for displaying images in light Box and Color Box.

Create data validation form and include the following HTML 5 controls for input data: email, url, date. Your data validation will include name, email, date of birth and website.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Qo.

ANS:

1) Webpage with images and jQuery LightBox

HTML/JQ/CSS Code:

HTML CODE

<!DOCTYPE html>
<html>
   <head>
       <title>Basic WebPage with JS Lightbox Gallery Example</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="lightbox.css">
       <script src="lightbox.js" type="text/javascript"></script>
   </head>
<body>
   <h2>Webpage with Gallery Lightbox</h2>
   <div class="myrow">
   <div class="mycolumn">
       <img src="images/1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
   </div>
   <div class="mycolumn">
       <img src="images/2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
   </div>
   <div class="mycolumn">
       <img src="images/3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
   </div>
   <div class="mycolumn">
       <img src="images/4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
   </div>
   </div>
   <div id="myModal" class="modal">
   <span class="close cursor" onclick="closeModal()">×</span>
   <div class="modal-content">
       <div class="slides">
       <div class="subslides">1 of 4</div>
       <img src="images/1.jpg"/>
       </div>
       <div class="slides">
       <div class="subslides">2 of 4</div>
       <img src="images/2.jpg"/>
       </div>
       <div class="slides">
       <div class="subslides">3 of 4</div>
       <img src="images/3.jpg"/>
       </div>
       <div class="slides">
       <div class="subslides">4 of 4</div>
       <img src="images/4.jpg"/>
       </div>
       <a class="previous" onclick="changeSlides(-1)">❮</a>
       <a class="next" onclick="changeSlides(1)">❯</a>
       <div class="mycolumn">
       <img class="check cursor" src="images/1.jpg" onclick="currentSlide(1)" >
       </div>
       <div class="mycolumn">
       <img class="check cursor" src="images/2.jpg" onclick="currentSlide(2)" >
       </div>
       <div class="mycolumn">
       <img class="check cursor" src="images/3.jpg" onclick="currentSlide(3)" >
       </div>
       <div class="mycolumn">
       <img class="check cursor" src="images/4.jpg" onclick="currentSlide(4)" >
       </div>
   </div>
   </div>
</body>
</html>

CSS CODE:

img{
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.myrow:after {
content: "";
display: table;
clear: both;
}

.myrow > .mycolumn {
padding: 50px 5px;
}

.mycolumn {
float: left;
width: 25%;
}

.mycolumn img{
   height: 100px;
}
.slides img{
   height: 300px;
   border: 2px solid #000;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

.slides {
display: none;
}

.cursor {
cursor: pointer;
}
.previous,
.next {
cursor: pointer;
user-select: none;
position: absolute;
top: 50%;
width: auto;
padding: 10px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 25px;
-webkit-user-select: none;
}
.next {
right: 0;
}
.previous:hover,
.next:hover {
background-color: #0000ff;
}
.subslides {
font-size: 20px;
padding: 10px 12px;
position: absolute;
top: 0;
}
.check {
opacity: 0.6;
}
.active,
.check:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.5s;
}
.hover-shadow:hover {
box-shadow: 2px 4px 8px 0 #c0c0c0, 2px 6px 20px 0 #408080;
}

JS CODE:

function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
mySlides(slideIndex);

function changeSlides(n) {
mySlides(slideIndex += n);
}

function currentSlide(n) {
mySlides(slideIndex = n);
}

Output Image:

IMG2:

2) SImple Js Validation with required input fields

HTML/JS CODE:

<html>
<head>
<title> form validation </title>
<script>
var x=true;
function form_validate()
{
z1.innerHTML="";
z2.innerHTML="";
z3.innerHTML="";
if(!user.value)
{
z1.innerHTML="Enter the User Name";
return false;
}

if(!email.value)
{
z2.innerHTML="Please Enter The Email";
return false;
}
if(!dob.value)
{
var dob = dob.value;
var pattern = /^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;
if (dob == null|| dob=="" || !pattern.test(dob)) {
z3.innerHTML= "Invalid date of birth\n";
return false;
}
}

if(!url.value)
{
regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
if (regexp.test(url.value))
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return form_validate()">
<label for="name">Name</label>
<input type="text" placeholder="User Name" id="user"><span id="z1" style="color:Red;"> </span><br/><br/>
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" id="email"><span id="z2" style="color:Red;"></span><br/><br/>
<label for="dob">Date Of Birth</label>
<input type="date" id="dob"><span id="z3" style="color:Red;"></span><br/><br/>
<label for="website">Website URL</label>
<input type="url" id="webUrl"><span id="z4" style="color:Red;"></span><br/><br/>
<button> Submit </button>
</body></html>

Ouput Image:

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

THANKS!!

Add a comment

Answer 2

Create a web page and images. include plugins for displaying images in light Box and...

Homework Answers

Add Answer to:
Create a web page and images. include plugins for displaying images in light Box and...

Post as a guest

Earn Coins

PHP Create an HTML Form that asks for a series of personal information from the user,...

Create two web pages as follows: Page 1: An html page with a form that will...

HTML/HTML5 script: Create a form as shown below: Present it as close as you see it...

HTML Web Page project: Need help to create a web page exactly as the example below...

9. Create a web page about your favorite musical group. Include the name of the group,...

i need help with this web page project and i need the code too for this web page Include two or three HTML features that...

// I need help in creating and publishing a website with two pages for this assignment,...

a company. needs you to create an HTML5 page that contains a form with the following...

Create web pages for your database using PHP. You should have one page that will return...

You are planning to build a Web Site for a fictitious local organization or charity. The...

Create a web page and images. include plugins for displaying images in light Box and...

Homework Answers

Add Answer to: Create a web page and images. include plugins for displaying images in light Box and...

Post as a guest

Earn Coins

Add Answer to:
Create a web page and images. include plugins for displaying images in light Box and...