javascriptimagescaling

Fix blank space at the top of image (JS)


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

blankspace

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();
}


Solution

  • 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,
    };