Panoramix Image

Introduction

Panoramix is a jQuery component to show panoramic images inside a container. You can move your image left or right with your mouse or your finger. If you need an Image Map, it will move with your image and adjust responsivily if neccessary.

There are lots of components to generate this effect with a background image but i couldn't find anything with an img tag. I needed a responsive container and the ability to create links on my image with image maps.

So i started working with pano, from seancoyne and changed background image for an img tag. Then I used rwdImageMaps from Matt Stow to make my image map responsive.

And that's all. Two examples:


Without Image Map

Background without Image Map
« »

Just load CSS and JS and, then, run this at the bootom of your page.

<script>
    jQuery(document).ready(function(){
        jQuery("#myPanoramix").panoramix({
            speed: 150
        });
    });
</script>
                

With Image Map

Background with Image Map
« »

Create your image map, load CSS and JS and, then, run this at the bootom of your page. As you can see, we are loading an external library to make our image map responsive.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script>
    jQuery(document).ready(function(){
        jQuery("#myMappedPanoramix").panoramix({
            speed: 150
        });
    });
    jQuery('img[usemap]').rwdImageMaps();
</script>