Blog: R6D76: #100DaysOfCode (More Posts)
One of my pet projects for this year is that I’m trying to teach myself to make a Photo Viewer App where I page through a set of photos and it displays the data about that image. Things like the ISO, Aperture and Shutter speed settings. This is to try and help me with my other interest, Photography.
https://landing.jonniegrieve.co.uk/photo_viewer_2/
I’m following this tutorial to try and do it.
There’s an issue here with the event object
jQuery(function(){
let imageList = [
[
//photo 1
[“img/IMG_0010.JPG”], [“ISO 300”], [“1/200”], [“f/4.5”], [“35mm”], [“alt text 1”], [“description text 1”] ], [ [“img/IMG_0048.jpg”], [“ISO 400”], [“1/250”], [“f/5.5”], [“55mm”], [“alt text 2”], [“description text 2”] ], [ [“img/IMG_0329.JPG”], [“ISO 700”], [“1/2000”], [“f/6.5”], [“300mm”], [“alt text 3”], [“description text 3”] ] ];
$storage = $(‘.storage’); $viewer = $(‘.viewer’); $data = $(‘.data’); $index = 0; for(let i=0; i < imageList.length; i++) { $storage.append(“
”); //image slide list $viewer.append(``) } $main_view = $(“.main_viewer”); $store_image = $(“.storage img”); $(document).on(“keydown”, () =>{ $main_view.css(“display”, “none”); show(); }); function show($index, event){ //console.log(event.keyCode); if( event.keyCode == 39 ) { $index++; } if( event.keyCode == 37 ) { $index–; } return $index; } //Append Image Data Table $data.append(`
Image Data
| ISO: | ${imageList[0][0]} | Shutter Speed: | ${imageList[0][1]} | Aperture: | ${imageList[0][2]} | Focal Length: | ${imageList[0][3]} | Alt Text: | ${imageList[0][4]} | Description: | ${imageList[0][5]} |
ISO: ${imageList[0][1]}
Shutter Speed: ${imageList[0][2]}
` ); });
But this returns the following exception.
Uncaught TypeError: Cannot read property 'keyCode' of undefined
app.js:46 Uncaught TypeError: Cannot read property 'keyCode' of undefined
at show (app.js:46)
at HTMLDocument.<anonymous> (app.js:40)
at HTMLDocument.dispatch (jquery-3.6.0.min.js:2)
at HTMLDocument.v.handle (jquery-3.6.0.min.js:2)
It seems to be a problem with events. Was the use of event here recently deprecated?
The idea is to eventually be able to click on the image thumbnails to open the image. But for now to use the arrow keys to cycle through them. What really obvious thing am I missing here? I’m looking for answers.