Star Zoom Examples

Gallery

Any clickable element can be turned into a Star Zoom gallery element that will load a new image into a Star Zoom instance.

Here we've used some styled links, but you can create galleries in whatever style you want: basic links, images, carousels etc.

First Second Third

<!-- Create a Star Zoom viewport in the usual way. -->
<div id = "zoom1"
     style = "position:relative;width:400px;height:400px;"
     class = "starzoom"
     data-starzoom = 'image: "image1_jpg"'>
</div>

<!-- Identify elements as gallery elements using the 'starzoom-gallery' class. -->
<!-- Use the 'useZoom' option to associate the element to specific Star Zoom instance. -->
<a  href="#" class="starzoom-gallery"
    data-starzoom = 'useZoom: "#zoom1", image: "image1_jpg"'>First</a>
<a  href="#" class="starzoom-gallery"
    data-starzoom = 'useZoom: "#zoom1", image: "image2_jpg"'>Second</a>
<a  href="#" class="starzoom-gallery"
    data-starzoom = 'useZoom: "#zoom1", image: "image3_jpg"'>Third</a>

Super High Resoultion

Checkout these spectacular NASA Mars Curiosity images, 50-160 megapixels!

See NASA Curiosity Images

Waypoints

Waypoints allow any clickable element to pan and zoom to a specific point in the image, great for highlighting areas of interest and detail.

Waypoints are defined in sets that relate to a specific Star Zoom instance, and a specific image in that instance. This allows waypoints to be used with galleries, so as each gallery element is clicked, it will automatically show and hide associated waypoints.

Ring Necklace Bracelet

<!-- Create a Star Zoom viewport in the usual way. -->
<div id = "zoom1"
     style = "position:relative;width:400px;height:400px;"
     class = "starzoom"
     data-starzoom = 'image: "image1_jpg"'>
</div>

<!-- Define a waypoint set using the 'starzoom-waypoint-set' class. -->
<!-- 'useZoom' and 'image' associate the set to a specific Star Zoom instance and image. -->
<!-- 'time' defines in millisecond how long the transition between waypoints takes. -->
<span class = "starzoom-waypoint-set"
      data-starzoom = '
        useZoom: "#zoom1",
        image: "/sites/starplugins/zoom-images/image11_jpg",
        time: 2000
      '>

    <!-- Define waypoints in the set using the 'starzoom-waypoint' class. -->
    <!-- Each 'waypoint' property defines the x,y and scale for that waypoint. -->
    <a href="#" class="starzoom-waypoint"
       data-starzoom = 'waypoint: [680.92, 1503.51, 0.7876]'>Ring</a>

    <a href="#" class="starzoom-waypoint"
       data-starzoom = 'waypoint: [46.23, 176.70, 0.2922]'>Necklace</a>

    <a href="#" class="starzoom-waypoint"
       data-starzoom = 'waypoint: [687.34, 78.72, 0.4237]'>Bracelet</a>

</span>

Lightbox Integration

Star Zoom plays nicely with other plugins, and can be easily integrated with light boxes such as the popular Fancy Box.

Try Fancy Box Example

A few lines of code are required to initialise Star Zoom when Fancy Box opens and to destroy Star Zoom when Fancy Box closes:

<!-- Include this in the HEAD part of the page. -->
<script type="text/javascript">
    $(function(){
        $(".fancybox").fancybox({
            afterLoad: function() {
                this.content.StarZoom();                    // Create Star Zoom on open.
            },
            beforeClose: function(){
                this.content.data('StarZoom').destroy();    // Destroy Star Zoom on close.
            }
        });
    })
</script>

This is the required HTML:

<!-- The Fancy Box link. -->
<a href="#viewport" class="fancybox">Try Example</a>

<!-- The Star Zoom HTML setup is the same as usual, but we don't use the auto-start CSS class (starzoom),
     because we will start it ourselves when Fancy Box opens.
     Set display:none to hide Star Zoom initially. -->
<div id="viewport"
     style="display:none;position:relative;width:300px;height:300px"
     data-starzoom = 'image: "/image1_jpg"'>
</div>

Dashboards

You can add a dashboard to the viewport. The dashboard contains three buttons to control zooming:

Dashboards are useful for touch devices that don't support pinch-zooming, allowing the user to pan around with their finger and use the dashboard buttons to zoom in and out.

Zoom-in button
Zoom-out button
Reset button

<!-- Create a Star Zoom viewport in the usual way. -->
<div id = "zoom1"
     style = "position:relative;width:400px;height:400px;"
     class = "starzoom"
     data-starzoom = 'image: "image1_jpg", dashboard: "#myDashboard"'>
</div>

<!-- Place the dashboard html somewhere on the page. -->
<!-- Default styling for the buttons is supplied in the starzoom.css file supplied with the download. -->
<!-- Note the use of 'display:none' and the special CSS identifier classes for the buttons. -->
<div id="myDashboard" style="display:none;bottom:10px;right:10px;">
    <span class="starzoom-in-but"></span>
    <span class="starzoom-out-but"></span>
    <span class="starzoom-reset-but"></span>
</div>