Ability to embed HUGE pictures

18 November 2012   3 comments   Web development

Mind That Age!

This blog post is 5 years old! Most likely, it's content is outdated. Especially if it's technical.

Powered by Fusion×

Example of embedding a picture
New feature just landed! Now you can embed pictures from HUGEpic so it can be on your own site. See example below.

So to do this I opted for the simplest solution possible. It's basically just an iframe to the regular URL but with ?embedded=1 set. What this does is that it removes all buttons except the zoom navigation buttons. There are some other configurable things like like hide_download_counter=1|0 and hide_annotations=1|0. At the moment there's no UI to change these options but at least the functionality is there in case somebody wants it.

Here's what it can look like

One particular little feature I think is neat is that whilst your previewing your embedded code and you zoom in and pan around on your image, the position and zoom level is automatically inserted into the HTML code. The way this is done is by this pattern:

setInterval(pluck_position, 2 * 1000);

function pluck_position() {
    var url = iframe[0].contentWindow.location.href;
    var numbers = url.match(/\/([0-9\.]+)\/([-0-9\.]+)\/([-0-9\.]+)/g)[0];
    var zoom = parseFloat(numbers.split('/')[1]);
    var lat = parseFloat(numbers.split('/')[2]);
    var lng = parseFloat(numbers.split('/')[3]);

Code is here

To try it, click on any picture then click the little "Permalink" icon (the icon that looks like a chain link) in the upper right hand corner and follow the link that appears.

For example, here's an upload of a huge Minecraft world:


FYI, the inertial scrolling only works for me some of the time.
Peter Bengtsson
"inertial scrolling"?
Yay cool! thats really useful! Thank you! :D

but some questions:
Is there a posibility to keep you from panning out of the picture? So you never get to the grey area or to the seam of the repetition?
For instance this pic is a nice hugeness example^ but it doesn't repeat seamlessly. I can imagine patterns that repeat well in height and width but also just panoramas that repeat horizontally. It would be nice to have control over that.

Also a 3D mapped mode would be cool!
Thank you for posting a comment

Your email will never ever be published

Related posts

Introducing: HUGEpic - a web app for showing massive pictures 03 November 2012
My new web marketing strategy: Begging 09 December 2012
vipsthumbnail 08 December 2014
My new web marketing strategy: Begging 09 December 2012