gsmith85 / seuratjs Goto Github PK

Hi there,

I've been trying your plugin for an mobile webapp and it works great for some images. For others the plugin seems to go into an internal loop and the whole browser hangs (both safari and chrome on ios).

I'm temporarily storing the images in localstorage as base64 encoded png's. I then convert these base64 strings to images using img.src='data:image/png;base64,'+base64data. It seems to me that if the ratio is not accurate it hangs, but that is probably not the real reason.

Any input would be appreciated!

I love this plugin.

But there's one thing I want to do. I'd like it so when you hover over an image, the SVG elements fade away revealing the original image (or any image you want, we don't need the plugin to decide that).

Now, I'm vaguely aware you can do Mouse Overs with Raphael, but although I have good knowledge of jQuery my Raphael knowledge is non-existent. I look at the code and I'm just...not sure. It's quite confusing for me (I'm more a designer really..).

Plus, that would only apparently work when you hover on one element at a time. That's no good, you want the hover to affect not just one element, but a portion of the surrounding elements.

There are other plugins and methods to do this with normal JavaScript and HTML (Proximity and Approach)....but not SVG, and I don't know how you would tie them in.

So, do any of you experts know of a way to do this? Or is it functionality you could add to the plugin? Absolutely don't expect anyone to do the leg work for me, I would be quite happy to figure this out for myself, I just need some rough idea of direction.

Anyway I won't get better at Javascript if I don't learn for myself.

Many thanks in advance.

Edit:

I think it's something like this, but I can't seem to tie it in. Even if I can, I have a feeling it will either affect only one element, or possibly all of them, rather than a group of elements around the one you're hovering on.

                el.mouseover(function() {
                this.attr({
                    fill: '#000'
                }); 

This is such a neat tool, but I'm having trouble with external images.

Unfortunately, I don't know enough about the issue to fork and potentially add in support. I found and briefly read into the CORS spec which may end up being a solution, but it seems that it's up to the domain serving the images?

For those more knowledgable, is it possible to add in external image support? (For example, using a Gravatar as the source image.)