Giter VIP home page Giter VIP logo

zoomy-plugin's Introduction

Zoomy 'Zoom' jQuery Plugin

Zoomy can make life easier on the eyes. ^^


Getting Started

WIKI pages

Developing

Just recently I have added a simple file server script that runs on NodeJS. To run the script just use this command in your terminal.

node app.js

If Node is not installed this will not run.

New Feature

###Zoomy Touch

This is a pretty large new feature and is written right into the core of Zoomy. Just add an extra file and you have Zoomy working on touch devices.

###Responsive

This has been a feature for a while in my dev files, but finally it has made it to stable.

Last Update

Now you can add a border to the zoom element. Also a Wiki has been created and will be on the new website within the next month.

Callbacks, callbacks, callbacks. We have inserted three new callbacks, zoomInit, zoomStart, and zoomEnd. These all stem for the fact that zoomText has been completely removed due to it UI invasiveness and buggy handling. Now to handle some text as if zoomText just use the callbacks to show hide the text. ZoomInit is called when the Zoomy function first fires so if you need to append any elemen to your anchor tag through the zoomInit callback would be the best time. The event handler is complete and pretty solid.

Contributors

Jacob Lowe Email

Larry Battle

Chris Pearson Website

Suggest Features @ http://zoomy.me

zoomy-plugin's People

Contributors

jcblw avatar kageetai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

zoomy-plugin's Issues

Responsive Not Working

I'm using zoomy here: http://thepointsaranac.com/overview

It works great at the larger window size, but when you decrease the window width to the responsive breakpoint and the image shrinks, zoomy goes all funky. It's especially problematic when you refresh the page at that size to let zoomy re-initialize and then the image offset for the magnifying glass is COMPLETELY off.

Two questions I guess:

  1. How can I make zoomy re-init when the responsive breakpoint is hit so that it doesn't let you use the magnifying glass way out-of-bounds, and

  2. Why is the offset so wrong when the image gets smaller and you refresh the page?

Edit: wrong url.

Multiple Images in one page

Hi

Loving Zoomy but it doesn't like it when more than one image is being zoomed on the page, it seems to break.

Is this a limitation of zoomy?

Jquery 1.9

Hi,

With Jquery 1.9 I've somes errors with zoomy.

  1. $.browser is removed from jquery 1.9 so it's raise error
  2. Uncaught TypeError: Cannot read property 'half' of undefined. (Don't know why..)

This bug are sovled with https://github.com/jquery/jquery-migrate/

Start on hover

I'm trying to amend the plugin to work on hover rather than having to click first (a previous click action expands the image area, so I don't want a further click action to enable zoomy)

I've changed most 'click' references to 'mousemove' or 'mouseover' but none seem to trigger zoomy showing until my mouse leaves the image and then re-enters. I'm trying to trigger that same re-enter action without having to leave the image boundaries first (I thought 'mousemove' would accomplish this).

Also what's the best way to "destroy" zoomy, when I click a close button I want to remove clicky from that image so it can be resized and moved out of the way.

Zooming dissapears when mouse is still

I noticed this happens on your demo page too, if I zoom over an area and then hover to read it, sometimes the zooming circle dissapears until you move your mouse again. I have to keep moving my mouse ever so slightly in order to read the same zoomed area for more than a fraction of a second.

Is this intended behaviour?

Transform support

In beta I just added support for using css3 transforms instead of using TRBL method, mainly for better mobile speeds.

Sadly not all browsers support this method. Oh no here comes TRBL.

Problems on mouseover

Using mouseover, and while images are been loaded and the mouse is over the images, then when finished the zoom isn't activated

Zoomy can't work on Chrome 50.0.2661.102 m (64-bit)

It works fine on IE, but can't work on Chrome 50.0.2661.102 m (64-bit). i went throgh the issues and find a relative issues saiys it's because of an extension, so i tried to run it under incognito mode which will disable all extensions, but still don't work.

thanks

Zoomy in responsive layout?

Great plugin guys,

Do you know if it can be incorporated into a responsive layout?

I'm trying to integrate it with Flexslider gallery.

Opera Browser issue

Hello,
Opera Browser doesn't support transform translate3d property! So in zoomy.min.js You have to change values in this lines:

Find:
var b="translate3d("+a[2]+"px, "+a[3]+"px, 0)";

Change with:
var b="translate("+a[2]+"px, "+a[3]+"px)";

There is also a bug in this line:
A?{"-webkit-transform":b,"-moz-transform":b,"-ms-tranform":b,"-o-tranform":b,transform:b}:{top:a[3]+"px",left:a[2]+"px"})

there is a word "tranform" just change this with "transform"

zoomy in Ajax usage

hello!

I'm using zoomy as part of a picture gallery, where user clicks on thumbnails and it replace the current image with the thumb's "large" and "full" size image urls. problem is: zoomy instance is not aware of the change.

So i tried recalling zoomy after the image change, but then the zoomy ui add up and break the layout.

I tried using the killZoomy function but so far, that breaks everything.

I'm not through trying stuff but i thought i'd ask: do you have a suggestion on how to do this properly so that zoomy detects the change in the DOM and adapt accordingly?

Error at early init on Chrome

Tried with jquery 1.7 and 1.9.1 (the latter with jquery-migrate), with today's trunk code of zoomy

If on Chrome I keep the mouse on the image when it loads, I get an error "TypeError: Cannot read property 'half' of undefined".

The JS line concerned is that one : posX = utils.pos.mouse(e.pageX, l.left , dataset.size.half),

On firefox all is fine. It seems there is a moment when zoomy isnt fully initialized and callbacks already registered fail badly.

Good luck and thx for the cool plugin.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.