Multi-language localisation

Change the language and content of your images, spins and messages.

Text for image zooms and 360 spins

Change the text either with a script or by setting data-options inside the div.

This example shows the text in French language:

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      hint: {
        text: {
          click: 'Cliquez pour zoomer',
          hover: 'Survolez pour zoomer',
          dblclick: 'Double-cliquez pour zoomer'
        }
      }
    },
    spin: {
      hint: {
        message: {
          text: 'Glisser pour faire pivoter'
        }
      }
    }
  }
}
</script>

<div class="Sirv" data-options="zoom.hint.text.click:Cliquez pour zoomer; zoom.hint.text.hover:Survolez pour zoomer; zoom.hint.text.dblclick:Double-cliquez pour zoomer; spin.hint.message.text:Glisser pour faire pivoter">
  <div data-src="https://demo.sirv.com/demo/snug/grey.spin"></div>
  <div data-src="https://demo.sirv.com/demo/snug/pink-b-living.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/snug/blue-b-neon.jpg" data-type="zoom"></div>
</div>

The gallery with French text will look like this:

Multiple languages

To show text in many different language versions of your web page, you should write a script to automatically show the correct language. The best way to do this depends on the structure of your website.

A simple example for 2 languages - English en and French fr - is shown below. You should write an appropriate script to obtain the [currentLanguage] of the visitor.

<script>
// Define localized texts
var smvLocalization = {
  en: {
    spinHint: 'Drag to spin',
  },

  fr: {
    spinHint: 'Glisser pour faire tourner'
  }
};

// Use texts that correspond to the current language
var SirvOptions = {
  viewer: {
    spin: {
      hint: {
        message: {
          text: smvLocalization[currentLanguage].spinHint
        }
      }
    }
  }
}
</script>