Dharma Records

A record of Ānandajoti’s publication work.

Menu
  • Notices
  • Talks
  • Texts
  • Audio
  • Video
  • Photos
  • Ecology
  • Culture
  • Archives
  • About
Menu

Resize images to Fit Browser Window

Posted on January 7, 2013January 2, 2013 by Ānandajoti

Yesterday I mentioned that I had just introduced the WOW-slider to my Photo Dharma website. From a developer’s point of view there is one big drawback with it, which is that you must fix the size of the photo first (e.g. 800px x 600px). The problem with that is we don’t know the size of the browser window people will be using, so it may be too small, or too big.

To get round that problem I wrote a new and fairly simple function, which first looks at the viewport, and then resizes the photograph to find the best fit for the screen. This is the javascript code for it, which I have annotated in the hope that it may help someone else.

Note that the script will only work if all the photos are the same aspect ratio. The ratio presumed here is 4×3 (1.33:1). The code can be adjusted for other ratios easy enough.

unction getViewport() {
// set aspect ratios here
    var lengthRatio = 2.12 // i.e 212 divided by 100
    var widthRatio = .4717 // i.e 100 divided by 212
// leave this as it is
    var viewPortHeight;
    var viewPortWidth;
// first get viewport width and height
    if (typeof window.innerWidth != 'undefined') {
      viewPortHeight = window.innerHeight;
      viewPortWidth = window.innerWidth;
// working with the aspect ratio (here 2.12:1) work out whether 
// it is better to work with the width or height
      if (viewPortHeight * lengthRatio < viewPortWidth) {
// if height if better, give a small margin at the bottom (here -30)
        viewPortHeight = window.innerHeight - 30;
        viewPortWidth = viewPortHeight * lengthRatio;
// updates some styles and center it, I don't know why but setting left and right to auto doesn't work
       document.getElementById('wowslider-container').style.position = "absolute";
      document.getElementById('wowslider-container').style.left = "7.5%";
      document.getElementById('wowslider-container').style.right = "7.5%";
      } else {
// if width is better
        viewPortWidth = window.innerWidth;
        viewPortHeight = viewPortWidth * widthRatio;
// updates some styles and center it
      document.getElementById('wowslider-container').style.position = "absolute";
      document.getElementById('wowslider-container').style.left = "0";
      }
// update the sizes, position and visibility now
      document.getElementById('wowslider-container').style.height = viewPortHeight + "px";
      document.getElementById('wowslider-container').style.width = viewPortWidth + "px";
      document.getElementById('wowslider-container').style.visibility = "visible";
}
  }

It is then possible to run the function with a call from body onload:

<body onload="getViewport()">

Examples can be seen here (click on Play Moving Slideshow):

  • Best of Cambodia
  • Best of Indonesia
  • Best of Malaysia
  • Best of Myanmar
  • Best of Thailand

another implementation which is particularly effective is on wide angle landscapes like these:

  • Landscapes and Skyscapes
  • The Lake Gardens

where the ratio of the photographs is 212:100

I hope this will help someone else out there who is grappling with the same problem.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

QR code

SHORTLINK

RSS Feeds

  • All Posts
  • Texts
  • Photos

Donations

there are many expenses involved in the making of this website. Even a small donation really helps to maintain and expand the site.

choose amount:

Recent Posts

  • Two Innovative Temples in Petchabun
  • Two Photo Albums from Phimai Published
  • Photographs from Prasat Phanom Rung
  • Publication of the Introduction to the Jataka Stories
  • A Revised Presentation of the Jātaka Commentary
  • Comparative Dhammapada Table
  • Suttapitaka Index, with links to Pali Text and Translations
  • Karmavibhanga Stories Published in Hard Copy
  • Publication of The Theravāda Lineage (Nikāya Sangrahaya)
  • Paintings from the Thousand Buddhas Caves Published

Top 10 Tags

  • Books
  • Buddha
  • Dhamma
  • Ethics
  • India
  • Monks
  • Poetry
  • Sri Lanka
  • Temples
  • Wisdom

Recent Posts

  • Two Innovative Temples in Petchabun
  • Two Photo Albums from Phimai Published
  • Photographs from Prasat Phanom Rung
  • Publication of the Introduction to the Jataka Stories
  • A Revised Presentation of the Jātaka Commentary
  • Comparative Dhammapada Table
  • Suttapitaka Index, with links to Pali Text and Translations
  • Karmavibhanga Stories Published in Hard Copy
  • Publication of The Theravāda Lineage (Nikāya Sangrahaya)
  • Paintings from the Thousand Buddhas Caves Published

Other Posts

  • Samples for the Metres in the Pali Canon
  • Glasswork at the Vaidurya Buddhist Lodge, Bukit Mertajam
  • Dalai Lama: The Role of the Feminine
  • Bhante Anandajoti: Devolution and Evolution
  • The Buddha’s Declaration of Human Biological Unity
  • Dhammacakka Ola Leaf Book (Scans and Transcript)
  • Ajanta Caves, Day Two
  • Photographs of Krishna’s Story at Prambanan
  • BWV 070: Deeds not Words Measure a Friend
  • Degrees of Thirst Infographic

Related Posts

  • Pan and Zoom style Slidehows on the Photo Dharma website
  • Gaṇḍavyūha Book released as PDF
  • New Design and Upgrade of Photo Dharma Website
  • Creating New Tags in Html5
  • Pan and Zoom Slideshows now on all pages on the Photo Dharma website
  • Photographs of Candi Plaosan Published
  • 250+ Photographs of Temples from the Singhasari Kingdom in Java
  • Photographs of the Muara Jambi site in Sumatra
  • Monuments from the Kediri Kingdom in East Java
  • New Book about Borobudur Published
© 2021 Dharma Records | Powered by Minimalist Blog WordPress Theme