6 ms·

JQuery Blend Modes plugin - A new mouse hover idea ..

48 points by mitgux 15y ago

bkyan 15y ago
Do these effects require two images to begin with, or does it work with only one image to begin with, and the script generates the 2nd image?
- mitgux 15y ago
  Only one ..
- Keithamus 15y ago
  The script duplicates the images inside of a <canvas> tag, which goes exactly on top of the current image. It then uses the canvas to provide the blend-mode functionalities. Here is the source: http://dl.dropbox.com/u/45557606/Envato/CodeCanyon/jQuery-Blend-Modes/include/jquery.blend-modes.js http://dl.dropbox.com/u/45557606/Envato/CodeCanyon/jQuery-Bl...
- thristian 15y ago
  Normally (in Photoshop or GIMP), you would start with a base image, and then apply a second image to the base image with one of these overlay modes; usually a specially-constructed image designed to apply the effect to different degrees in different parts of the base image. This plugin seems to be using the same image as the base and as the overlay, which... seems to be missing the point a little.
  - mitgux 15y ago
    Yes, this is the idea of this plugin, it doesn't use two different images, just one :)
mappu 15y ago
These TLD previews (dropbox.com) are great, but one day, someone's going to host a phishing page or a fake news post on their dropbox and link it here, and someone's going to fall for it. On topic, i think this is the first time i've seen someone actually try to sell a jQuery plugin.. i wish you the best of luck, especially when the source is right there. The plugin itself is obviously going to work out best for people when the desired effect is easier to generate in javascript than it is to precompute, which is almost never the case - well, maybe for some classes of dynamically generated content (cloning instagram client-side?)
- drivebyacct2 15y ago
  Are you saying you trust it more if it just comes from a random TLD? That... seems very naive. As for the plugin, it seems... not terribly difficult or expensive (computationally). Chrome on my phone handled it fine.
  - mappu 15y ago
    I mean, i could host a form that looks like the dropbox login page, put it on my dropbox account, link it here, and the submission would show up with a (dropbox.com) suffix. Sure, the URL wouldn't be accurate, but i'm sure i'd catch a few people. The solution isn't to trust random TLDs, it's exposing the subdomain in the domain preview. u.dropbox.com isn't going to be hosting an important login box or news post. The same goes for google.com/plus.google.com, although it'd be very difficult to build a phishing page out of G+. Google Pages perhaps?
- deleted 15y ago
  [deleted]
waxjar 15y ago
I don't really see why I would use something like this. Just eye candy? With the exception of the 4th picture, they all come out worse. The last image (of the boat) suffers in particular. If you're considering using this plugin, I'd first consider precomputing it with an application like Photoshop. Seems a lot easier (no fiddling with jQuery settings) and I think you would end up with a picture of higher quality. *I didn't mean to sound so negative. It's a good attempt; it obviously works.
- andybak 15y ago
  Can you clarify what you mean by 'worse'? The clipping, over-saturation and other 'defects' are all intentional aspects of this kind of process. Or do you mean something else?
  - waxjar 15y ago
    I'm familiar with the processes. I get what the writer of the plugin is going for. I just think it would look better if the effects were applied with an image editor like Photoshop.
- deleted 15y ago
  [deleted]
- polshaw 15y ago
  This only requires one image, improving speed, reducing bandwidth etc. And you don't have to 'precomupte' anything.
- mitgux 15y ago
  As I say, this plugin bring some images functions to the web, no need to PS :)
asifjamil 15y ago
I noticed that you have to purchase this plugin.. This might be a naive question, but what's to stop me from just downloading the source off this page directly and using it?
- knowtheory 15y ago
  Your personal ethics? The distribution license for the code?
donpdonp 15y ago
what this plugin got me thinking about is an augmented reality for images. what if the hover indication was a modification of the content of the image - a dinner table that adds an extra person at the table on hover.
- mitgux 15y ago
  Nice example, this is what I mean by "I make the contents of an image change for really!!" ..
alpb 15y ago
Interestingly it is hosted on Dropbox and asks me to buy it. I think you should take this more seriously and seem like one. I'd consider using this on my social network where picture is an important component. Bookmarked, thanks!
kappaknight 15y ago
This is cool, but what is it for? Webstagram?
- mitgux 15y ago
  For a new interactive experience on the web :)
nsfmc 15y ago
Aside from the fact that there exist many other canvas blend mode plugins, I'm just going to say that it wouldn't hurt to add to your fancy demo page: a) browser support? (this still matters to lots of people) b) _some_ notion of its exposed api. (what am i getting myself into?) c) what happens when i buy this (can i get support, what's the licensing?) I could go to caniuse.com but because the fancy demo page doesn't explain that this uses canvas to blend an image on itself, i'm sort of at a loss. isotope.js makes a pretty good case for charging for a jquery plugin, but it not only has a good demo, it also has docs and makes it abundantly clear that you're paying to use this on a client's website (go nuts on your own stuff). I don't know how successfully it works, but it makes as much sense as charging for fonts, so I suspect a fair number of people actually pay up even though the majority of jQuery plugins are free. Good luck, but don't forget the humble web-portfolio developer out there that is legitimately wondering if they can justify this purchase (i.e. is it easy to use, can i extend it to use two images, will it work on the browsers my client wants, etc.) edit, typo fix
- mitgux 15y ago
  Thanks for your questions, and this is the answers :) When you click on the 'codecanyon' URL, you found on the right sidebar, more information, like Compatible Browsers .. Also on the description I say how to use it .. This plugin come with a nice documentation contain a simple implementation that explain how to make this awesome hover effect, and much more .. I try to do my best for the support .. For the question of use 2 images, unfortunately, this plugin is designed for just one image, but it's easy to develop it, it's commented too :)
  - jordanlev 15y ago
    I think the GP was offering advice to you, not just wanting to know the answers to the questions. I also had the same questions when I visited the page, and didn't notice any other links. You might want to think about changing your page to make this information more obvious. Or don't -- but at least run some A/B tests to find out for sure. Best of luck.
    - 15y ago

48 points by mitgux 15y ago

bkyan 15y ago

Do these effects require two images to begin with, or does it work with only one image to begin with, and the script generates the 2nd image?

mitgux 15y ago
Only one ..
Keithamus 15y ago
The script duplicates the images inside of a <canvas> tag, which goes exactly on top of the current image. It then uses the canvas to provide the blend-mode functionalities. Here is the source: http://dl.dropbox.com/u/45557606/Envato/CodeCanyon/jQuery-Blend-Modes/include/jquery.blend-modes.js http://dl.dropbox.com/u/45557606/Envato/CodeCanyon/jQuery-Bl...
thristian 15y ago
Normally (in Photoshop or GIMP), you would start with a base image, and then apply a second image to the base image with one of these overlay modes; usually a specially-constructed image designed to apply the effect to different degrees in different parts of the base image. This plugin seems to be using the same image as the base and as the overlay, which... seems to be missing the point a little.
- mitgux 15y ago
  Yes, this is the idea of this plugin, it doesn't use two different images, just one :)

mappu 15y ago

These TLD previews (dropbox.com) are great, but one day, someone's going to host a phishing page or a fake news post on their dropbox and link it here, and someone's going to fall for it. On topic, i think this is the first time i've seen someone actually try to sell a jQuery plugin.. i wish you the best of luck, especially when the source is right there. The plugin itself is obviously going to work out best for people when the desired effect is easier to generate in javascript than it is to precompute, which is almost never the case - well, maybe for some classes of dynamically generated content (cloning instagram client-side?)

drivebyacct2 15y ago
Are you saying you trust it more if it just comes from a random TLD? That... seems very naive. As for the plugin, it seems... not terribly difficult or expensive (computationally). Chrome on my phone handled it fine.
- mappu 15y ago
  I mean, i could host a form that looks like the dropbox login page, put it on my dropbox account, link it here, and the submission would show up with a (dropbox.com) suffix. Sure, the URL wouldn't be accurate, but i'm sure i'd catch a few people. The solution isn't to trust random TLDs, it's exposing the subdomain in the domain preview. u.dropbox.com isn't going to be hosting an important login box or news post. The same goes for google.com/plus.google.com, although it'd be very difficult to build a phishing page out of G+. Google Pages perhaps?
deleted 15y ago
[deleted]

waxjar 15y ago

I don't really see why I would use something like this. Just eye candy? With the exception of the 4th picture, they all come out worse. The last image (of the boat) suffers in particular. If you're considering using this plugin, I'd first consider precomputing it with an application like Photoshop. Seems a lot easier (no fiddling with jQuery settings) and I think you would end up with a picture of higher quality. *I didn't mean to sound so negative. It's a good attempt; it obviously works.

andybak 15y ago
Can you clarify what you mean by 'worse'? The clipping, over-saturation and other 'defects' are all intentional aspects of this kind of process. Or do you mean something else?
- waxjar 15y ago
  I'm familiar with the processes. I get what the writer of the plugin is going for. I just think it would look better if the effects were applied with an image editor like Photoshop.
deleted 15y ago
[deleted]
polshaw 15y ago
This only requires one image, improving speed, reducing bandwidth etc. And you don't have to 'precomupte' anything.
mitgux 15y ago
As I say, this plugin bring some images functions to the web, no need to PS :)

asifjamil 15y ago

I noticed that you have to purchase this plugin.. This might be a naive question, but what's to stop me from just downloading the source off this page directly and using it?

knowtheory 15y ago
Your personal ethics? The distribution license for the code?

donpdonp 15y ago

what this plugin got me thinking about is an augmented reality for images. what if the hover indication was a modification of the content of the image - a dinner table that adds an extra person at the table on hover.

mitgux 15y ago
Nice example, this is what I mean by "I make the contents of an image change for really!!" ..

alpb 15y ago

Interestingly it is hosted on Dropbox and asks me to buy it. I think you should take this more seriously and seem like one. I'd consider using this on my social network where picture is an important component. Bookmarked, thanks!

kappaknight 15y ago

This is cool, but what is it for? Webstagram?

mitgux 15y ago
For a new interactive experience on the web :)

nsfmc 15y ago

Aside from the fact that there exist many other canvas blend mode plugins, I'm just going to say that it wouldn't hurt to add to your fancy demo page: a) browser support? (this still matters to lots of people) b) _some_ notion of its exposed api. (what am i getting myself into?) c) what happens when i buy this (can i get support, what's the licensing?) I could go to caniuse.com but because the fancy demo page doesn't explain that this uses canvas to blend an image on itself, i'm sort of at a loss. isotope.js makes a pretty good case for charging for a jquery plugin, but it not only has a good demo, it also has docs and makes it abundantly clear that you're paying to use this on a client's website (go nuts on your own stuff). I don't know how successfully it works, but it makes as much sense as charging for fonts, so I suspect a fair number of people actually pay up even though the majority of jQuery plugins are free. Good luck, but don't forget the humble web-portfolio developer out there that is legitimately wondering if they can justify this purchase (i.e. is it easy to use, can i extend it to use two images, will it work on the browsers my client wants, etc.) edit, typo fix

mitgux 15y ago
Thanks for your questions, and this is the answers :) When you click on the 'codecanyon' URL, you found on the right sidebar, more information, like Compatible Browsers .. Also on the description I say how to use it .. This plugin come with a nice documentation contain a simple implementation that explain how to make this awesome hover effect, and much more .. I try to do my best for the support .. For the question of use 2 images, unfortunately, this plugin is designed for just one image, but it's easy to develop it, it's commented too :)
- jordanlev 15y ago
  I think the GP was offering advice to you, not just wanting to know the answers to the questions. I also had the same questions when I visited the page, and didn't notice any other links. You might want to think about changing your page to make this information more obvious. Or don't -- but at least run some A/B tests to find out for sure. Best of luck.
  - 15y ago