courtsey : labnol.org
Most websites have around ~600 pixels (width) reserved for content and are therefore unable to accommodate high-res images like these aerial photographs from NASA that are around 3000×3000 in size.
Satellite Picture. Credit: NASA
Embed High-Res Images to your Website
I have earlier discussed at least two different methods for embedding big pictures – one used the Google Maps Cutter approach while the other required Zoomify software. They are both free but the problem is that you need to have your own server space to host the image tiles. So here’s a third alternative that’s both simple and also provides hosting space.
Step 1: Go to PhotoZoom (a Microsoft service), create an album and upload some large picture. For this example, I am using the aerial image of New York City captured by NASA satellites on 9-11.
Step 2: Once the photo is uploaded, click “View Individual Photos” to get the URL of the image you just uploaded onto Photozoom. (see video demo)
Step 3: Copy-paste the link of the XML files from the web page and paste it here on Microsoft Live Labs. Click Build Embed.
You get a small snippet of JavaScript that you can embed anywhere in the web page as shown below. The embedded image can be viewed in any web browser that has JavaScript enabled – no need to have Adobe Flash or Microsoft Silverlight.
<script type="text/javascript" src="http://seadragon.com/ajax/embed.js"></script><script type="text/javascript">Seadragon.embed("400px", "300px", "http://photozoom.mslivelabs.com/DZ/2/zf92756ed2c9946799caabdc3e31e2dde/collection_images/0.xml", 3072, 2098, 512, 0, "jpg");</script>
No comments:
Post a Comment