css-tricks / anythingzoomer Goto Github PK

View Code? Open in Web Editor NEW

207.0 207.0 45.0 614 KB

Zoom in on images or content

Home Page: https://css-tricks.github.io/AnythingZoomer/

License: MIT License

JavaScript 20.53% CSS 1.71% HTML 77.75%

anythingzoomer's People

Contributors

Stargazers

Watchers

Forkers

phuang07 ahmadawais haimehen forsberg1 mnrqz rdworth hoodgains kmikzjh mainakibui legeox dorkusprime ivore marviljoy bmuser rookvenkatesan dadocapelli atamos varadhanr mseevathian humblewebdev peterconchar gerhobbelt anthronaut4 denchev kuzyo xhatox silviolorusso volving mohala562 tallykatt farobarcha modulexcite wooodhead controlledchaos vlast92 aouniradouan contenderia castle-it blackskorpio azarual 9lk kimjuan sharanjitsandhu hixio-mh mikeyhodl

anythingzoomer's Issues

Plugin not showing zoom window when implemented on bootstrap modal

Following is code for modal

<div class="modal fade" id="viewAlphaArrays" tabindex="-1" role="dialog" aria-labelledby="viewAlphaArray" aria-hidden="true" >
    <div class="modal-dialog" style="width : 76% !important">
        <div class="modal-content">
            <div class="modal-body" style = 'padding: 15px; overflow: scroll;'>
                <div class ='row'  >

                    <div id="zoomTiffFirsts">
                        <div class="small">
                            <img alt="No image available" src = 'http://www.menucool.com/slider/prod/image-slider-5.jpg' class = 'testsmall'>
                        </div>

                        <div class="large">
                            <img alt="No image available" src = 'http://www.menucool.com/slider/prod/image-slider-5.jpg' class = 'testlarge'>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-header" style = 'height : 60px;' >
                <button type="button" class="btn btn-default" data-dismiss="modal" style = 'float : right;margin: 10px;' ng-click = 'resetBrightnessContrast()'>Close</button>
            </div>
        </div>
    </div>
</div>

Following is the CSS

.large img.testlarge {
    height : 2118px;
    width : 1050px;
}
.small img.testlatge {
    height : 1412px;
    width : 700px;
}

Modal is initially not visible. But when I click a button a function is called from where modal is triggered to open using jquery

Just below that code I inserted code to initialize anythingzoomer

$("#zoomTiffFirsts").anythingZoomer({ switchEvent: '' });

But when modal is opened, I am not able to see any image

Please help me with this

Regards

Responsive Image

Hi,

Is there a way to make it work with responsive image?

Thank you

How do you suggest I debug this erratic behaviour?

Hi, I have used the script successfully on several pages, but am having trouble with one in particular. The zoomer is applied to several images but with some the large image only appears for a split second on mouseover. I can get different images to work without changing them but by commenting out other images that previously worked. Also, if I change the order of the zoomer image divs, different ones work.

The page is here: http://totalhealthnow.co.uk/therapy/theta-healing.html

I get same behaviour in several browsers - actually, the images that work do so less well in ie. It's the certificates in the right column that are supposed to zoom.

It feels like it might be something to do with the positioning of the divs - but then I can't explain how one would work lower than one that doesn't.

Any suggestions appreciated.
cheers, John

Hidden elements

Script doesnt work on hidden elements :(

Magnifying svgs

I am experimenting with the anythingzoomer plugin to magnify svgs. I read the post http://stackoverflow.com/questions/38754427/using-jquery-anythingzoomer-plugin-to-magnify-svgs for how to do it but I am still stuck.

The code I am using is below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Time Squared Prototype</title>
        <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="js/jquery.anythingzoomer.js"></script>
        <style type="text/css">

            .small svg {
                width: 500px;
                height: 500px;
            }

            .large svg {
                width: 1000px;
                height: 1000px;
            }

            .large { background: #fff; }

            .zoom { display: block; margin: 0 auto; }

            /* AnythingZoomer */
            .az-wrap, .az-small, .az-large {
                position: relative;
            }
            .az-wrap-inner {
                display: block;
                margin: 0 auto; /* center small & large content */
            }
            /* This wraps the large image and hides it */
            .az-zoom {
                background: #fff;
                border: #333 1px solid;
                position: absolute;
                top: 0;
                left: 0;
                width: 110px;
                height: 110px;
                overflow: hidden;
                z-index: 100;
                display: none;
                -moz-box-shadow: inset 0px 0px 4px #000;
                -webkit-box-shadow: inset 0px 0px 4px #000;
                box-shadow: inset 0px 0px 4px #000;
            }
            /* Class applied to az-mover when large image is windowed */
            .az-windowed {
                overflow: hidden;
                position: absolute;
            }
            /* Class applied to az-mover when large image is fully shown */
            .az-expanded {
                height: auto;
                width: auto;
                position: static;
                overflow: visible;
            }

            /* overlay small area */
            .az-overlay {
                background-color: #000;
                opacity: 0.3;
                filter: alpha(opacity=30);
                z-index: 10;
            }

            /* fade out small content when hovering
            .az-hovered > * {
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
            */

            /* edit mode coordinate styling */
            .az-coords {
                display: none; /* hidden when expanded */
            }
            .az-zoom .az-coords {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                background: #000;
                background: rgba(0,0,0,0.5);
                color: #fff;
            }


        </style>
    </head>
    <body>       

        <script type="text/javascript">

            var zoom_container = d3.select("body")
                                   .append("div")
                                   .attr("id", "zoom")


            var svg = zoom_container.append("div")
                                    .attr("class", "small")
                                    .append("svg")
                                    .attr("viewBox", "0,0,500,500");

            zoom_container.append("div")
                          .attr("class", "large")
                          .style("left", "0px")
                          .style("right", "0px")


             svg.append("rect")
               .attr("x", 0)
               .attr("y", 100)
               .attr("width", 20)
               .attr("height", 20)
               .attr("fill", "red")

            $("#zoom").anythingZoomer({
                edit: true,
                clone: true
            });

        </script>
    </body>
</html>

The good news is that the zoom window does show up when the mouse hovers over the svg. The problem is that nothing on the zoom window shows up. Doing a bit of digging, it turns out if I enlarge the zoom window to, say, 1000px by 1000px, I do see the red rectangle magnified in the zoom window. However, it stays stuck in the zoom window even if I am not directly hovering over the rectangle.

I used the web inspector to compare what's going on in my code to what's going on in working examples of anythingzoomer. I notice that in my code, the div class "large az-large" does not have a style applied when the zoom window appears.

But the working examples of anythingzoomer do have a style applied to the class "large az-large":

I am completely stumped. Any advice would be appreciated.

Thanks!

Hide large image

Hiya,

Great plugin. Is there a way to hide the larger image as it loads? Most of the stuff I'm trying leads to either the large being invisible when I try anything like 'display:none;', or loading next to the image (being high res it take a couple of seconds) and knocking off my page layout for a second.

Any ideas? Thanks

Different sizes images

Hello,
first of all thank you for this amazing tool. I have a doubt thought. I am trying to use the zoom with several images on my webpage but one of these images has different size. Is there any way to do it? If I call it "small" and "large" this image has the same size as the others (and therefore it is deformed), and if I call it in a different way it doesn't work. Thank you very much in advance for your response. This is driving me crazy... I have tried so many combinations to make it work. Greetings,
Lara

Is it possible to rotate zoomer automatically on page load

I am trying to rotate zoomer from left to right automatically on page load, but I am not getting a possible way to rotate & zoom automatically.

Odd display failure when only one dimension is set in CSS

I noticed that half of the time when I load the page, the contents within the #zoom div do not correctly load onto the screen. The issue appears to be that the javascript is loading before the height of the image is known. Whenever the display fails, I notice that az-wrap-inner and az-overly has been given a height of 0.

While I do not know what would cause this to happen, I found that it only happens if you set one dimension of the img tag in CSS and not the other dimension. For instance, I was setting the width but not the height in my CSS document. Once I added height to the CSS, the problem stopped occurring.

Hover doesnot work properly when -transform-rotate is done

When image is loaded for the first time, hover window propersly shows the zoomed part wherever we hover.

But when i dynamically rotate image using -transform-rotate and then hover over any section, it is showing zoom window at other direction

Please help me

Adding href / click event to the zoomed image

Hi,
I want to add a hyperlink ("<a href..:") to do anything after clicking on the zoomed image.
But with this code...

    <div class="large">
        <a href="goto.html"><img src="demo/rushmore.jpg" alt="big rushmore"></a>
    </div>

... the zoomed image does not appear correctly anymore.

As a work around I added a click event to this image via jQuery (... bind("click").function...).
But how can I add this behaviour just with a href and without jQuery/Javascript?

Thanks a lot!
webaschtl

Zoom displays large image only

The attached image shows the state when I hove the element with .anythingZoomer(); associated with it.

Below I have also pasted my source. I have tried to create the exact environment as seen in the JSFiddle here: http://jsfiddle.net/Mottie/f6d49/

I am baffled by what would not be working...

Text Demo

<div id="zoom1">

    <div class="small">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
    </div>

    <!-- the clone option will automatically make a div.large if it doesn't exist -->

</div>

<br>

<p><strong>Image Demo</strong></p>

<div id="zoom2">

    <div class="small">
        <img style='width: 225px; height: 150px;'  src="http://mottie.github.com/AnythingZoomer/demo/rushmore_small.jpg" alt="small rushmore">
    </div>

    <div class="large">
        <img style='width: 500px; height: 333px;' src="http://mottie.github.com/AnythingZoomer/demo/rushmore.jpg" alt="big rushmore">
    </div>

</div>

</body>

Double clicking / selecting text

Two issues, one minor, one major.

Minor: On the text zoomer, you can select the text... kind of weird.

Major: If you double click to select text (as you would to select an entire word or three times to select all), then the "cloned" zoom section breaks out of the magnifying glass and shows on the page. Maybe a workaround would be to disable clicks, or disableselection()?

Feature request please....!

Hi,

I'm using anything zoomer on a site I'm creating for a client. Loving it so far, was previously using powerzoomer but was having some problems so switched to anythingzoomer...much better.

Any thoughts on having a slight delay on the zoomer, so that if you just move the mouse 'though' the zoomable element, it doesnt pop up immediatley?

Just a thought, would love to see this feature :D

Thanks in advance,

Steve

Large image issue

I'm stumped. Here's the page I built of your demo (before putting in my own images, I wanted to make sure I could get it to work). As you can see, the appearance/positioning of the large image as the viewer moves isn't working as in the demo. Can't figure out why. Thoughts?

Live test page: http://dianejwright.com/test/

HTML:

<div id="zoom" class="az-wrap" style="width: auto;">
  <div class="small az-small">
    <img alt="small rushmore" src="http://dianejwright.com/images/demo/rushmore_small.jpg">
  </div>
  <div class="az-zoom">
    <div class="large az-large">
      <img alt="big rushmore" src="http://dianejwright.com/images/demo/rushmore.jpg">
    </div>
  </div>
</div>

CSS:

#zoom      { width: 500px; }
.small img { width: 225px; height: 150px; }
.large img { width: 500px; height: 333px; background: white; }

/* Overall */
.az-wrap, .az-small, .az-large {
  position: relative;
}
.az-wrap-inner {
  display: block;
}
/* This wraps the large image and hides it */
.az-zoom {
  background: #fff;
  border: #333 1px solid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px; /* Default zoom window size */
  height: 100px;
  overflow: hidden;
  z-index: 100;
  display: none;
}
/* Class applied to az-mover when large image is windowed */
.az-windowed {
  overflow: hidden;
  position: absolute;
}
/* Class applied to az-mover when large image is fully shown */
.az-expanded {
  height: auto;
  width: auto;
  position: static;
  overflow: visible;
};

HEAD:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://dianejwright.com/wp-content/themes/Cranium/js/jquery.anythingzoomer.js"></script>
<script>
  $(function(){
    $("#zoom").anythingZoomer({
      smallArea   : 'small',    // class of small content area; the element with this class name must be inside of the wrapper
      largeArea   : 'large',    // class of large content area; this class must exist inside of the wrapper. When the clone option is true, it will add this automatically
      clone       : false,      // Make a clone of the small content area, use css to modify the style
      switchEvent : 'dblclick', // event that allows toggling between small and large elements - default is double click
      edge        : 30          // How far outside the wrapped edges the mouse can go; previously called "expansionSize"
    });
  });
</script>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

jquery not working in Firefox

i tried following code in chrome and it is working properly but in Firefox its not working!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ORCHID HARDWARE</title>

<script type="text/javascript" src="js/jquery.js"></script>

<!-- Page Flip -->
<script type="text/javascript" src="js/pageflip.js"></script>

<link rel="stylesheet" href="style/anythingzoomer.css"> 

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> -->

<script type="text/javascript" src="js/jquery.anythingzoomer.min.js"></script> 

<script> 
  $(function(){ 
    $("#zoom").anythingZoomer();
  }); 
</script> 


<script type="text/javascript">
    /* pageflip timing */
    var flipTime = 1000; // in ms [recommended 1000]
</script>

<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/pageflip.css">

<style>
body {
    font-size: .9em;
    font-family: Verdana, Arial, Helvetica;
    line-height: 1.4em;
}
</style>

</head>
<body>


<!-- Page Flip -->

<div id = "pagesContainer">

<!-- the page DIVs at least 4, in multiples of 2. --> 

<!-- insert your DIVs here, classed "pageContent" -->
    <div class="pageContent">
        <div style="background: #eee; padding: 0; margin: 0; width: 500px; height: 500px;">
        <!-- IMPORTANT: you must set the height and width of the first page DIV. all other pages are based on this -->

        <p style="padding: 20px; margin: 0;color: #000;">

        </p>
        </div>
    </div>
               <div class="pageContent">
                   <div id="zoom">
                   <div class="small">
                        <img alt="main" src="images/1.jpg"  width="500" height="500"/>
                   </div>
                  <div class="large">
                      <img alt="1_small" src="images/1.jpg" width="1000" height="1000" />
                  </div>            
                  </div>
    </div>
</body>
</html>

Max Width

Hey I have got this working in Firefox but I cannot get it to work in Chrome, it seems to be because the element small img and large img have a confined width and I am wanting to use a max width as the images that I am using this on all have different sizes.

Is there a different solution for making this work in Chrome?

Any help is much appreciated,
Richard

return of ajax (mouseenter)

Was a problem with the return of ajax, I needed to change the function by mouseover mouseenter on line 40

image map

It would be super spectacular if the image zoom worked with an image map on the larger image. as it is, the zoom window disappears when the cursor gets to a hotspot.

How to use dynamic id based this plugin ?

This Plugin is working static data $('#zoom1').anyThingZoomer({});
but when dynamic id based how i will use i tried getting id and puting that id $('#'+id+' ').anyThingZoomer({}); not working perfectely please help me anything i did wrong correct me.

<div class="row">
  <div class="col-sm-4 cart" id="zoom1">
      <div class="small img-div">
            <img src="demo/fbofw.jpg" > 
      </div>
  </div>
  <div class="col-sm-4 cart" id="zoom2">
        <div class="small img-div">
                <img src="demo/fbofw2.gif" > 
          </div>
  </div>
  <div class="col-sm-4 cart" id="zoom3">
        <div class="small img-div">
                <img src="demo/fbofw3.gif" > 
        </div> 
  </div>
</div>

$(".cart").mouseover(function(){
    // alert("id"+$(this).attr('id'));
    id = $(this).attr('id');
    console.log("id"+id);
    hitMouseOver(id)

});
function hitMouseOver(id){
    // alert($('#'+id+''));
    $('#'+id+'').anythingZoomer({})
});

Using zoom in multiple stacked images for Chrome / Safari

Hi all,

I have added this great plugin in one of my projects. But It slows down when trying to zoom in multiple images that is stacked with one another using z-index in chrome and safari ( My project does have about 20 images stacked on the top of one another ). I already tried this on Firefox and even IE and it's working properly. I also tried to compress all the images but it still slows down.

Any Ideas? Thanks.

fixed images sizes only?

It is not that useful for dynamic image sizes.

div contets

How can I use the zoom on a div with content?

is basically images, but these images are in the background of the div.

plan to use in a magazine jquery

Show coordinates of large image

Hi Mottie,

Thanks for the great plug-in.

I was just wondering if it would be possible to show the coordinates of the mouse within the LARGE image rather than the small.

I'm trying to allow the user to select an exact coordinate (pixel) from the large image, without displaying the image to the user at it's full resolution.

Thanks in advance for your help!

Support Multiple Images

If is not working for multiple images inside a div

Canvas compatibility ?

Is this library compatible with canvas ? Tried but failed...
It would be a great feature !!

Occasionally, the plugin doesn't seem to initialize properly

I am certain that I am doing something wrong but I'm having a hard time tracking it down.

$('#zoom').anythingZoomer({overlay: true});

That's the only parameter I'm setting but occasionally the zoom feature will only work at the top 10-20px of the image. If you refresh a couple times, you'll see it work and not work somewhat randomly. I am thinking that I'm initializing it before the images are loaded but I don't see how since I am doing it on ready.

Any ideas that could steer me in the right direction would be appreciated!

jquery script src corrupted

In each of the html files in the root directory, the script src attribute for jquery is:
src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

It seems to work fine when I change it to:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Just thought I'd let you know!

Large Container Positioning Problem

All demo provided seems to have space on both side for large <div class="large"> to expand. What if it can only expand one way right. Context : if the page have a sidebar.

I am having similar issue where large <div> can't be expanded both way and zoom is working unexpectedly.

You can see the problem here http://kowsky.projekt.dealux.de/product/wedge-cushion-rounded/

When double click you will notice how it expand on right. Or I am doing it wrong? Do I need to add any extra css to make the large <div> positioned correctly?

As for the code I used its just the very basic setup. If you want I can post but not sure if it is necessary.

Make zoomDim configurable in options

I would like the size of the zoom window to be configurable in the options. If there is already a way to accomplish this, please, just let me know; I just couldn't find it.

Right now, I can only get this seemingly undocumented signature to do it (and this only works after it's already initialized)

var xoffset = 0, 
yoffset= 0,
zoomDimension = [200,200];
$('#container').anythingZoomer(xoffset, yoffset, zoomDimension)

The other hackish way to do it is this: (seems to work the best)

$('#container').anythingZoomer({
  initialized: function(){
     $('#container').data('zoomer').last = [200,200];
  }
})

What I would like to do:

$('#container').anythingZoomer({
  zoomDim: [200,200]
});

The lens does not appear when Instantiate the component and the cursor is over the image.

I solved the problem by commenting out the line:
N ^ 74 / / if (! Base.hovered) {return;}

Is there a better way? :)

Cannot read property 'left' of undefined

I use this markup:

<div id="zoom">
    <div id="small">
        <img id="image" src="images/1.jpg" alt="example" title="Image" class=" img-polaroid">
    </div>
    <div id="large">
        <img id="image" src="images/1.jpg" alt="example" title="Image" class=" img-polaroid">
    </div>
</div>

And I make the call this way:

jQuery(document).ready(function(){
    jQuery("#zoom").anythingZoomer()
});

My jQuery version is: 1.8.3

It says Cannot read property 'left' of undefined when I hover on an Image,

https://github.com/CSS-Tricks/AnythingZoomer

Please help.

How to use anythingzoomer

Hello,

Actually I am beginner, And i am Use this function in my wordpress 2011 theme, So could you please Tell that what type of code put in which file like in image.php, footer.php,index.php etc.

Script not working on Chrome/Safari

Hi all,
I have added AnythingZoomer in my website, and it's working fine on all browsers (even on IE8!) except from Chrome/Safari.

For some reason, "az-wrap-inner" and "az-overly" classes are set to "width:0". Could you help me fix this?

http://artabout.gr/clients/odysseus/?products=ring-1

jQuery 1.8

There is an issue with positioning the zoom window when using jQuery v1.8. I believe it might be due to the changes to the box sizing coding of width.

I'll investigate this issue when I have more time. Sorry!

Zooming over input/radio elements

if you have radio buttons (or i'm assuming other input elements), if the state of them changes, then AnythingZoomer displays the previous state and not the current state when you zoom over again.

you can replicate this in the playground app by adding some radio buttons, zooming over them, double click, change the state of a button, then double click again, then zoom again.

Enable/Disable Anything Zoomer

I have added a button to enable/ disable AnythingZoomer so I can use d3 pan/drag/zoom on a chart when it is disable or use Anything Zoomer over the chart when it is enabled. Is there a way to do this? I've tried $('#zoom3').data('zoomer').setEnabled(false); but it didn't work.

What is happening now, after I rotate the image, zoom is working on specified portion only. Its not working for top and bottom corners.

I have created a plunker for you to understand

http://plnkr.co/edit/QYRYITvIZlObrYflp9Ct?p=preview

As we can see, zoom is not working for edge portion.

Please help me with this as this is very important feature for me.

Regards,
Omkar