I am trying to create a photo galley, I had added the picture in list and on thumbnail picture click I want to show the big image blurring the background and displayed in the center. I am able to create a dynamic div and display big image but it is always coming below the list. Please find my code at following address: https://github.com/sanjana-1604/BirthDay-.git
Please check my code and let me know what to do to get div properly
Ok, I downloaded your code and a had look over it. Although you should have shared a snippet.
I deeply appreciate your effort towards programming.
function changeBackgroundColor(image, image_src, color) {
if (image === 'no') {
document.body.style.background = "red";
} else {
document.body.style.backgroundImage = "url('Img/bg.png')";
}
}
var imageCount = 01;
total = 20;
function slide(x) {
var image = document.getElementsByClassName('image');
imageCount = imageCount + x;
if (imageCount > total) {
imageCount = 01;
}
if (imageCount < 1) {
imageCount = total;
}
image.src = "Img/big_pics" + imageCount + ".jpg";
}
/////////////////////////////////////////////////////
/////////Code Written by me starts here//////////////
/////////////////////////////////////////////////////
window.addEventListener("load", function() { //The code inside this block must be executed only after the complete page is loaded,
var createBackgroundFader = function(imgNumber) {
var fader = document.createElement("div");
fader.classList.add("fader", "hidden");
fader.id = "bigImageViewer" + imgNumber;
fader.addEventListener("click", function(event) { //This block of code will enable you to click on the empty space of fader to hide it
if (event.target === this) {
this.classList.toggle("hidden");
}
});
return fader;
};
var createBigImageViewer = function(imgNumber) {
var img = document.createElement("img");
var fader = createBackgroundFader(imgNumber);
img.classList.add("bigImg");
img.src = "Img/big_pics/" + imgNumber + ".jpg";
fader.appendChild(img);
return fader;
};
var createListItem = function(imgNumber) { //In javascript you can create functions like this as well...
var li = document.createElement("li");
var img = document.createElement("img");
//Preparing img element
img.setAttribute("src", "Img/Thumbnail/" + imgNumber + ".jpg");
img.setAttribute("alt", "thumbnail image");
img.dataset.imgNumber = imgNumber;
img.classList.add("image", "thumbnail");
img.addEventListener("click", function() {
var bigImageViewer = document.getElementById("bigImageViewer" + this.dataset.imgNumber);
bigImageViewer.classList.toggle("hidden"); //Look up dictionary to know the meaning of toggle...
});
//Appending img element to li
li.appendChild(img);
//Lastly return li
return li;
};
var photoList = document.getElementById("photoList");
for (var i = 0; i < 20; i++) {
photoList.appendChild(createListItem(i + 1)); //Appending the freshly cooked li element to photoList
document.body.appendChild(createBigImageViewer(i + 1)); //Appending bigImageViewer to body but you can't see because they are hidden by default. Click on a thumbnail to view the BigImage
}
});
/////////////////////////////////////////////////////
///////////Code Written by me ends here//////////////
/////////////////////////////////////////////////////article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
font-size: 100%;
}
/*title "1 year june"*/
.title_h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1.5em;
background: white;
width: auto;
text-align: center;
border-radius: 0.2em;
/*to make border rounded*/
display: inline;
position: absolute;
top: 5%;
left: 10%;
}
/* --------------------------------------------------------------------------------------------------- */
/*main menu */
.main_menu
/*main menu*/
{
list-style-type: none;
/* to avoid bullets in the list items */
display: inline;
position: absolute;
top: 5%;
left: 20%;
}
.main_menu li {
display: inline;
/* to display horizontally */
}
/* --------------------------------------------------------------------------------------------------------------*/
/* main white div */
.main_div
/*class to draw main div*/
{
position: absolute;
/*positioned relative to body*/
top: 18%;
left: 15%;
width: 65%;
background: white;
padding: 5px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#welcome_note {
border: 2px solid rgb(0, 0, 0);
border-radius: 0.2em;
width: 15em;
height: 16em;
background: white;
padding: 2px;
display: inline-block;
margin: 5px;
}
#welcome_note h3 {
text-align: center;
}
.mainpage_header {
height: 15em;
background: #ff8566;
position: relative;
/*positioned relative to main div*/
top: 20px;
left: 10px;
width: 80%;
}
#DP_img {
border: 2px solid black;
width: 10em;
height: 10em;
}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* PHOTO PAGE */
/* --------------------------------------------------------------------------------------------------------------*/
.Photo_main_div {
position: absolute;
/*positioned relative to body*/
top: 18%;
left: 15%;
width: 80%;
background: white;
padding: 5px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#photo_page_outline {
width: 90%;
margin-left: auto;
margin-right: auto;
border: 1px dashed black;
border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#photo_page_header {
width: 100%;
text-align: center;
background: rgb(251, 130, 184);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#photo_page_footer {
width: 100%;
text-align: center;
background: rgb(251, 130, 184);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
clear: both;
}
/* --------------------------------------------------------------------------------------------------------------*/
#content {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------------------------------------------*/
#content ul {
list-style: none;
}
/* --------------------------------------------------------------------------------------------------------------*/
#content li {
width: 14em;
float: left;
}
#content img {
-webkit-webkit-transition: all 1s ease;
-moz-webkit-transition: all 1s ease;
-ms-webkit-transition: all 1s ease;
-o-webkit-transition: all 1s ease;
transition: all 1s ease;
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
border: 1px solid #000000;
}
#content img:hover {
-webkit-webkit-transition: all 1s ease;
-moz-webkit-transition: all 1s ease;
-ms-webkit-transition: all 1s ease;
-o-webkit-transition: all 1s ease;
transition: all 1s ease;
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
transform: translateZ(25px) rotate(3deg);
border: 1px solid #000000;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
/*/////////////////////////////////////////////////////
/////////Code Written by me starts here////////////////
/////////////////////////////////////////////////////*/
li .thumbnail {
height: 120px;
width: 200px;
}
.fader {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
text-align: center;
padding-top: 100px;
}
div .bigImg {
max-width: 70%;
max-height: 70%;
border: solid white 8px;
box-sizing: border-box;
box-shadow: 10px 30px 50px 0px;
}
.hidden {
visibility: hidden;
}
/*/////////////////////////////////////////////////////
///////////Code Written by me ends here////////////////
/////////////////////////////////////////////////////*/<!-- No Changes were made in this file except commenting all li elements.
li elements can easily be added to the ul through javascript from inside a loop
Kindly see from line number 80 in javascript to understand the logic.
-->
<!DOCTYPE html>
<html>
<head>
<script src="myJavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="myCSS.css">
</head>
<body onload="changeBackgroundColor('yes')">
<h1 class="title_h1">
1 year June
</h1>
<ul class="main_menu">
<li><a href="Photos.html">Photos</a>
</li>
<li>Stroy</li>
</ul>
<div class=" Photo_main_div">
<div id="photo_page_outline">
<div id="content">
<header id="photo_page_header">
PHOTOS
</header>
<ul id="photoList">
<!-- <li onclick="slide(1)"><img src="Img/Thumbnail/1.jpg" width="200" height = "120" alt="thumbnail image" class = "image"></li>
<li><img src="Img\Thumbnail\2.jpg" width="200" height = "120" alt="thumbnail image" onClick="slide(2)" class = "image"></li>
<li><img src="Img\Thumbnail\3.jpg" width="200" height = "120" alt="thumbnail image" onclick="slide(3)"></li>
<li><img src="Img\Thumbnail\4.jpg" width="200" height = "120" alt="thumbnail image" onclick="slide(4)"></li>
<li><img src="Img\Thumbnail\5.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\6.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\7.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\8.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\9.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\10.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\11.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\12.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\13.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\14.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\15.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\16.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\17.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\18.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\19.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\20.jpg" width="200" height = "120" alt="thumbnail image"></li>-->
</ul>
<footer id="photo_page_footer">
My Album
</footer>
</div>
</div>
</div>
</body>
</html>Alternatively you may download the solved project from this link https://www.dropbox.com/s/eqqktw9y8u97zsf/BirthDay--master.zip?dl=1
I hope this would solve your problem.
Note: In your big_pics folder, kindly change file names from 01.jpg through 09.jpg to 1.jpg through 9.jpg
References: Read about the following on MDN (Mozilla Developer Network) to more know about how your problem was solved...
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments