JavaScriptの練習：Photo Gallery
MDNに沿ったJavaSCriptの練習を継続してます。ようやく、JavaScriptの構成要素の最後まで到着しました。
成果物はこちらです。
結論的には、thumb-barに画像を設定するまではできましたが、関数まで設定することはできませんでした。回答ではforの中に、function(e)が入っていますが、VS Codeでは、これはお勧めできないという警告が出てきます。でも、じゃぁ、どうすればいいのか対応までは教えてくれていないので、いくつか試してみましたが、いずれも動かず・・・・、結局、回答そのままにしています。
なお、electronによるアプリ化は簡単にできました。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="images/mountain6.jpg" width="640px">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script src="script.js"></script>
</body>
</html>
script.js
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
for (var i=0; i<5; i++){
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/mountain' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = function(e) {
console.log(e);
var imgSrc = e.target.getAttribute('src');
displayImage(imgSrc);
}
}
function displayImage(fileName){
displayedImage.setAttribute('src', fileName);
}
/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
var btnClass = btn.getAttribute('class');
if(btnClass === 'dark') {
btn.setAttribute('class','light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
} else {
btn.setAttribute('class','dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
}
}
style.css
h1 {
font-family: helvetica, arial, sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
background-color: black;
color: white;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0,0,0,0);
}
button {
border: 0;
background: rgba(150,150,150,0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
electronでアプリ化するには、「npm init -y」したあと、
package.json
{
"name": "photo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^2.0.5"
}
}
main.js
'use strict';
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
// ブラウザ(Chromium)の起動, 初期画面のロード
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});