HTML5 Reader for Electric Zine Maker
A web and mobile friendly way to show off your Electric Zine Maker zines on itch.io.
- Radical 3D page flipping action
- Keyboard and mouse/touch input
- Web and mobile friendly
- Compatible with all EZM templates as of August 2021, but Fancy templates are not (yet) fancy.
- Will continue to update when new EZM templates are introduced, I promise.
Turn pages with arrow keys or A/D, or click/tap on page edges.
Download EZMreader.zip, drag your EZM save file PNGs into the pages folder, and follow the instructions in the readme.
The older turn.js version is still available for download, but be aware that it's not mobile friendly and does not have keyboard support.
Code available on GitHub under the MIT license.
Check out this collection of zines using the Reader. Hit me up wherever to get added to the list!
╔═══━━━─── • ───━━━═══╗
Made with love just for you.
Find me on Twitter.
╚═══━━━─── • ───━━━═══╝
|Tags||electric-zine-maker, html5, zine, zine-maker|
|Code license||MIT License|
|Average session||A few seconds|
|Inputs||Keyboard, Mouse, Touchscreen, Smartphone|
Click download now to get access to the following files:
EZMreader.zip 5 kB
OLD EZMreader20.zip 4 kB
OLD ezm turnjs.zip 291 kB
- Even smaller updateSep 08, 2021
- Small updateAug 30, 2021
- Accessibility and usability updateMar 10, 2021
- Big Update and the Magic of Open SourceJan 11, 2021
- Big 2020 UpdateAug 01, 2020
- Tiny updateAug 19, 2019
- Reader updatedAug 15, 2019
Log in with itch.io to leave a comment.
This is awesome!
yewr so rad dude. thanks so much fr making this so i can have cool zines on my site.
I just get a script error when trying to start the app, line 19 char 1... anyone know of a fix?
Ah I see thanks
terrific to see you've added the ability to have an arbitrary amount of cards to this wonderful little tool! I remember fooling around with adding extra pages once and realizing how tedious it would be for more than just a few. thanks and congrats on all your work on this
hello ^^ I once edited the code to input my own resolution for images; but i forgot how to do it x_x I'm using the reader to have an online version of my highschool sketchbook; so I have 146 images (counting front, inner, and back) and I've made the 8th template look like this;
However it still hasn't let me see the final product. I remember last time; I had to set the image resolution myself, however that doesn't seem to be the case this time.
Hi, what exactly is the problem you're having? The pages aren't showing at all? I believe this iteration of the reader automatically sets the resolution to the resolution of the images themselves. 146 images is a lot for the browser to load all at once, so maybe that's causing issues as well?
hi Jeremy, I fixed my original issue by changing the code to match my file type. They load very slowly because of what you mentioned in this comment just now. Now the only issue is that the script doesn't work for me on Google chrome currently; it also doesn't work with AdBlock extensions sometimes. You can view the project at https:/)ophanim.neocities.org/content/sketchbook/index.html
Is there some way I can use this to host a zine on a website other than this one? Like a Neocities website?
Absolutely! You'd need to read up on how iframes work in HTML, but that's how itch.io does it so there's no reason you can't either. There might be other ways to do it too, but unfortunately, as much as I was able to make this, my actual knowledge of HTML and CSS is quite bare bones.
Hello ! What a great tool, that's super awesome ! By any chance, would it be possible to add an audio file to the zine so it can play at the same time you read it ? Thanks in advance. :)
I suppose that would be possible with HTML but personally I don't exactly know how
hi there—you can check out this post for adding audio!
Thank you so much, it works so well :')
What do you open this with? I try opening the file but it wont let me.
Any kind of notepad style program should work, though I would recommend something a little more feature rich like Notepad++ or even Visual Studio Code
Hello, It seems I keep getting the "Something went wrong! Make sure your images are in the pages folder! See console for details." I'm sure I put png files in the pages folder. Do I need to number it a specific way or link it to the original file some how? I have exactly 8 pages, changed settings to template 1, and my pngs are 421x595px. Is there anything I'm doing blatantly wrong with what I've described?
Sorry to hear you're having trouble. Are your png files titled the same as they were in the folder where Electric Zine Maker saved? It should be FRONT.png, INNERFRONT.png, BACK.png, and however many numbers are left.
hello! i’ve made a short little guide-zine on how to hack this tool to use custom page sizes and numbers. the reader is a great tool and i’m really happy it’s so versatile and easy to adjust :)
this is great! Thank you very much for making this!
Hi Jeremy. I'm grateful that you made and shared the EZM reader. Thanks! One thing I'm noticing is that the zines are inverted when viewed in Safari or Chrome. Viewing in Firefox works perfectly, however. Are others also experiencing this? Is there a way around this or a solution? Thanks again!
Would you mind please adding my new zine uploaded with EZM reader to your collection? Thanks a lot.
Hi, this is only the second I've heard of this problem occurring. Could you tell me what platform you are using because I am unable to reproduce it. Also, are you embedding it on itch.io or using it on your own webpage?
Hi Jeremy, thanks for your reply. I'm using macOS and embedding it on itch.io.
It's not just my own zines. It happens to when I view your zine in Safari or Chrome. In both cases it's inverted. When I view it in Firefox it works perfectly. Thanks a lot!
Thanks for the info. I'll be looking into this.
Thank you! I just checked Chrome and it works now. The issue only seems to be with Safari.
Hey I just came to report this as well. Sadly its still mirrored in safari :/
I follow the instructions but when I upload I get an error that says ''Something went wrong! Make sure your images are in the pages folder! See console for details.'' I've checked and they're definitely in there, what do I do
Are you sure you followed the instructions exactly? Did leave the file names as they were? This error should only appear if the images can't be found for some reason.
HEY!!! First off, I love this!!!!!!! THANK U!!! A pal and I are using it to embed our zine on our webzone: https://imaginaryresidency.com/
I noticed a bug tho on iOS (only mobile device i tested) that the pages are inverted and backwards? It's very cool, tbh, but not readable. Any ideas on how to fix it? I can do a bit of code, maybe I can help? （*＾ワ＾*）
That's a strange bug indeed! I don't have access to an iOS device, so I can't test it myself, but you could open an issue on the GitHub Page and maybe we can get some people in the community to take a look at it and get it sorted.
Mine says "There doesn't appear to be anything here..."
when I upload, I believe I've followed all the instruction. Any help appreciated :)
In your itch.io project settings, under Kind of project, have you set it to HTML?
Ah that seems to have fixed it for itch.io! I was actually just testing on itch.io though because it also wasn't working on Hicetnunc. I was planning to release it as a free zine this weekend to help get more switched over to a cleaner NFT platform. On there I get the error:
Something went wrong! Make sure your images are in the pages folder! See console for details.
Might just upload as a pdf though, hate to ask you to troubleshoot for some some other random site lol. Thanks for your help :)
My eyes... They won't stop bleeding... 10/10 would read again!
thank you for this cool tool <3
thank you! so good now I've got it working, I was confused about the dimensions when uploading to itch but all done x
i use this for all of the zines i make with EZM. i love it! thanks for making it <3
Thanks a lot! People can read my zini https://angela-quidam.itch.io/bayardt and I'm pretty proud to now know how to make documents readable on the navigator.
Is it possible to do the same in a devlog? So I could add another readable version of this zini? (another language)
I'm not sure if itch.io lets you run an html project in a devlog like that. I doubt it. I think the best thing to do would to just create a new page for the other language, and have the two pages link to each other.
thank you for the advice, it's a really small project I didn't want to create 2 pages but I'll do it
everytime i try to upload it it says missing index.html in the zip, what should i do?
are you sure index.html is in the zip? Remember, you need to zip up the entire folder, not just the Pages folder.
Hey! I tried it and all the pages are black, even if I play it on an itch.io test page! Not sure what I am doing wrong :/ Cheers!
Testing with the latest version and everything is working as it should. Maybe you missed a step in the instructions? If there's any part of the instructions that's confusing, please let me know!
I fixed it! Was a problem on my end with the PNG format. After that was fixed everything worked out! Thanks for the quick reply :)
Hey what do you mean with the PNG formating? As I am having this same issue but am struggling to fix it. Thanks!
You need to have each page separate, instead of the big pdf it gives at first! Then it should work.
Must be something else, gonna redo the code must've missed a step!
Thanks for the quick reply!
Hello! I love this concept, but when I downloaded and followed the instructions in the readme, this happened:
Is this my end, or yours?
Hi, I believe you're trying to open the file in Windows directly. Try opening it with Notepad, that should allow you to edit it. If you have something like a code editor or Notepad++ that would be even better.
Thanks for bringing this to my attention, I'll add a clarification to the instructions
Wow okay thank you - that probably would have been obvious to most others (I have very little experience using js) but I really appreciate the clarification!
Hello, I am new to this stuff and am finding this quite difficult to follow. Is this the only way to get the zine so it can be read/viewed online properly? Not trying to be critical or anything like that, just honestly kinda lost here.
Hi, Electric Zine Maker allows you to export as a PDF, which is great for sharing person to person but not as easy to host online etc. I made this so you can just drop in your saved images from EZM and have a nice looking and feeling digital booklet anyone can read. It's not exclusive or anything. Anyone is free to make their own app or website or whatever to show off their zines however they please. If you have any questions, I'll be happy to help.
i copied over my pages without changing the file name and the reader is still blank? i checked the script and the page names match the ones in the ezmreader file but im not sure why they're not showing up
-update- i downloaded the older script and the old one works, but for the new one all the pages seem to be blank
Hi, I tested it on the most recent version of EZM and everything still seems to be working as it should. Are you testing it on your local machine? Modern browsers don't let you load local resources such as images for security reasons. Have you tried uploading the project to an itch.io test page to see if it works there?
Using the older script was also my only way of getting this to work also, if anyone else is having issues.