h1. HypnoHub Hover Zoom dev thread

This thread is to be for development, updates, requests and general discussion on HypnoHub Hover Zoom (or HHHZ, as I've dubbed it). For general site hacking, see forum #724.

<<hhhz.about|this text should be replaced by the about box if you have javascript on and my script is loaded>>

h3. What is it?

It's a script that enables you to hover over images here, and see a full-sized zoomed preview.

h3. Features

* Images are zoomed on the posts list, other posts lists (like favorited, uploaded, etc), the user profile page, and the wiki.
* The settings are stored as cookies.
* The mouse cursor is hidden when image is opened, but sadly I couldn't get it to work for Chrome, and I really tried (v1.1).
* Now image text links like imgur's also work (v1.1).
* Cool easter egg above for the version number, that Mindwipe didn't expect (v1.1).
* Settings page with options for the user to configure (v1.2).
* Handles deviantART, sta.sh and fav.me URLs (v1.3).
* Handles post # links and comments page thumbnails (v1.4).
* Has an image redirector and JSON API for posts, coded in PHP (v1.4).
* Handles user avatars (v2.0).
* Understands most blacklists (v2.0).

h3. Roadmap/wishlist

* Storing settings per-user instead of per-browser. This would be possible now that we have a companion PHP script.
* Show tags too.
* Option for avatar zooming.

h3. Changelog

h5. <<gist.github.com/anonymous/6501329|1.0>> (2013-09-09)

* Initial release.

h5. <<gist.github.com/anonymous/6518540|1.1>> (2013-09-10)

* Hide mouse cursor when viewer is open (not on Chrome, sadly).
* Add version number (accessible as HHHZ.version from javascript).
* Abstract adding handlers, so that, in a distant future, we can handle AJAX-enabled pages if need be.
* Optimize handler-attaching calls into a chain.
* Add "hhhz-visited" class to links so that we can call the function repeatedly with minimal overhead (again, for future AJAX support).
* Add a plugin system for handling text links.
* Implement a direct link plugin (for links that end with an image extension).
* Use On/Off instead of Enabled/Disabled on the footer toggle.
* Add handling of special hhhz anchors.

h5. <<gist.github.com/anonymous/6535972|1.2>> (2013-09-12)

* No more just on/off, it now has has its own settings interface when you click on the footer link.
* Enable/disable for post and image links are now separate.
* Hover timeout can be chosen.
* Settings are now an object, which can be serialized into a string as JSON. This is how it is stored in the cookies, but can be stored anywhere that a string can (like in a database field).
* Build date object is included, as HHHZ.date from javascript and as a hhhz.date special URL.
* Styles for hhhz.version and hhhz.date special URLs.
* Darken the background a bit more on hover and on opening settings.
* Fixed mistakingly plugging on the original image links of post pages.
* Default timeout is 200 milliseconds now.

h5. <<gist.github.com/anonymous/6558409|1.3>> (2013-09-13)

* Add deviantART and Sta.sh plugin. Handles most dA URLs (fav.me too).
* Bugfix for direct link plugin: search for unconventional graphics format's extensions, and make it case non-sensitive.

h5. <<gist.github.com/anonymous/6575432|1.4>> (2013-09-15)

* Handle comments page thumbnails.
* Setting for that in the options (disabled by default).
* Plugin to support post # links.
* Coded an API for the script in PHP. Now we have a JS and a PHP file. The above functionality requires this file to be available at /hypnohub-hover-zoom.php.
* The API supports &format=json for future use.

h5. <<gist.github.com/anonymous/6710959|2.0>> (2013-09-26)

* Support for blacklists! In which case an "image blacklisted" message is displayed.
* Bug fix for last version: ignore certain links which link to posts but aren't what we're after for hover-zooming.
* Support user avatars! Also an option in the settings page.
* Now posts are zoomed from the resized samples, instead of possibly-huge source files.
* The format for JSON output has been revised.
* Performance improvements for the backend and a cache mechanism that supports APC if it is installed.
* Misc bug fixes and improvements.

h5. <<gist.github.com/anonymous/6753377|2.0.1>> (2013-09-29)

* Maintenance release. Two bug fixes in JS file, no PHP changes. Profile pages' avatars should now work correctly, and hidden comment count links will not be picked.

We're currently running version <<hhhz.version|which you have to enable javascript to know>>, which I coded on <<hhhz.date|some date which doesn't matter much to you as the script is not running on your browser for one reason or another or my script has failed to load>>.

Scientific and very professional use-case test links for serious experimentation following the banana protocol procedure of installing v1.1 on the origin server:

i.imgur.com/BhqqCZG.jpg
i.imgur.com/FL1hyX8.jpg
i.imgur.com/OcrRV00.jpg
i.imgur.com/Fed3Qmu.jpg
i.imgur.com/BUPVDoX.jpg
i.imgur.com/uU2oxH1.jpg
i.imgur.com/TkdCEZB.jpg
i.imgur.com/SdCtKB8.jpg
i.imgur.com/U6lSyCq.jpg
i.imgur.com/pSAHfMR.jpg
i.imgur.com/TApMkHl.jpg
i.imgur.com/6VKm6My.jpg
i.imgur.com/vyFBKgG.jpg
i.imgur.com/xYCuOEh.jpg
i.imgur.com/pxjbZVj.jpg
i.imgur.com/k4XguxV.jpg

Just out of curiosity, would it ever be possible to make the image display on links and the hover zoom on posts separate settings? Because I'd love to be able to see linked images without having to click the links, but the hover zoom on posts isn't very helpful to me, since I need the tags to display on hover to make sure nothing important is missing.

Didn't think of the tags!
It would be possible, yes.

But now that I think about it, maybe it would be more useful to you if the tags for the image were displayed in the hover zoom itself?

For example, in a list to the left.

That would perhaps help someone, but I think it would be less distracting and quicker to not use the hover zoom for the way I do things.

Hm, is it because of the delay? It would be great if this thing helps you too, so if you could come up with a way for it to work that is more helpful than the default tooltip, I'd take a look into implementing it.

In any case, next version I'll make sure to make both styles have an independent setting.

New version up, and I must say, nicely done. And yes, I'd imagine it's due to the delay that Mindwipe doesn't wanna try using it. That, and not having the image pop up with the tag list is a tad less distracting. :P

Yeah, that's exactly what I meant by "less distracting". It just seems easier to scan things quickly without the zoom. Plus, I think making use of the advanced editing features is easier with the default settings.

Hah. Clever way to find what version we're using without having to manually update the post every time, Stem_Cell. You threw Mindwipe for a loop. "How the hell did Stem_Cell do that!?" XD

Hahaha thanks for telling me his reaction :D

And look, it's also possible to have just the version number: <<hhhz.version|version number goes here>>.

I've taken note of the improvements you guys want.
Mostly, next version will either have a settings page, or a tag list, or both if I'm in a coding streak.

I've just noticed a weird effect of this feature. This makes the "View larger version" and "Download larger version" links into zoomable links too, since they're image links, which is...rather useless.

Oh true, I'll take note and exempt those.

Oh, and don't think I didn't notice



You're makin' me proud, Stem_Cell. Now, go watch Steins;Gate!

Oh, so I noticed that links that can be hover zoomed with your script all have a different background color around them. That's actually pretty nifty...but would it be possible to have that only happen when the script is enabled? Seems out of place when you're not really using it atm. ;)