I'm using the Internet Archive BookReader> https://github.com/internetarchive/bookreader I've set up a book using images but at the top there is always a blank space
This is controlled by JS file that has the following (screenshot is from images 1 and 2):
I had the same problem with the bottom and was able to properly scale it by adjusting the height to 1130 but can't get rid of the extra space above.
This uses some CSS but for what I understand the pages are controlled by the JS file i shared
// Create the BookReader object
function instantiateBookReader(selector, extraOptions) {
selector = selector || '#BookReader';
extraOptions = extraOptions || {};
var options = {
ppi: 100,
data: [
[{
width: 800,
height: 800,
uri: '/assets/images/Chiloe/Lomo.png'
}, ],
[{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/Portada Frente.png'
}, ],
[{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/1.CanaldeChacao.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/2.CerroMirador.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/3.Museo de las Iglesias.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/4.Islotes.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/5.Quemchi.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/6.Aucar.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/7.Dalcahue.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/8.Castro.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/9.Cucao.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/10.Muelle.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/11.Gruta.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/12.Puqueldón.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/13.Chonchi.png'
},
{
width: 800,
height: 1130,
uri: '/assets/images/Chiloe/Portada Trasera.png'
},
]
],
// Book title and the URL used for the book title link
bookTitle: 'Cartografía poética de Chiloé',
// thumbnail is optional, but it is used in the info dialog
thumbnail: '/assets/images/Chiloe/Portada Frente.png',
// Metadata is optional, but it is used in the info dialog
metadata: [{
label: 'Title',
value: 'Cartografía Poética de Chiloé'
},
{
label: 'Author',
value: 'Jairo Manzur'
},
{
label: 'Demo Info',
value: ' Este poemario fue escrito en el 2020 y representa visualmente los diferentes lugares en los que estuve en la isla de Chiloé.'
},
],
// Override the path used to find UI images
imagesBaseURL: '../assets/images/',
ui: 'full', // embed, full (responsive)
el: selector,
};
$.extend(options, extraOptions);
var br = new BookReader(options);
br.init();
}
That's the toolbar. It looks like you've removed everything from it, but hiding it requires you add the option showToolbar: false
var options = {
...
ui: 'full', // embed, full (responsive)
showToolbar: false,
el: selector,
};