Since Kinkyloli is contributing so much to the community, I wanted to give something too!
And what I like is writing some code.

Seemingly my previous post on <<hypnohub.net/forum/show/541|the other thread>> has gone unnoticed, so here I quote it:



Thing is, you can host your own clone of HypnoHub's software (MyImoutoBooru) on your machine (that package is for Windows, but it can run on other OSs like Linux too), and try out whatever you want.

I have just developed something which IMHO you guys could include in the site: hover previews!

Javascript file: gist.github.com/anonymous/6501329

My code adds a link to the bottom of the page, allowing you to enable or disable its functionality (just in case), and it's stored in a cookie. It is disabled by default when you load the script.

Screenshot: i.imgur.com/55QoEy5.png

Now, when you hover over an image, you'll see it highlight itself lightly (indicating that it's zoomable), and after a small delay (configurable), currently set to 300 milliseconds (so that it doesn't go zooming just by passing by with the mouse), it will fade the page slightly and show the image, as big as possible but made to fit the browser window, centered.

Screenshot: i.imgur.com/IEQShdc.png

If you want to test the script, copy and paste <<gist.github.com/anonymous...77/hypnohub-hover-zoom.js|its contents>> to a Javascript console (<<webmasters.stackexchange....ole-in-different-browsers|how to open the javascript console of your browser>>) and click the link added to the footer navigation bar to enable it.

This will only last while the page isn't refreshed, so if we want it to always be there, it would have to be added by one of the admins as an asset (I can give instructions).

In the future, I want it to handle text links too, like "post #9516", but first I want to know you guys' opinion.

PS: Tested on Firefox, Chrome, Opera, and IE8-10

I forgot to reply, huh? Oops. XD

I'd take a closer look now, but... *stomach growls*
I'll be back as soon as I eat lunc-....um, Dinner.

Thanks for this, Stem_Cell. :D

*after lunch* Seems pretty solid. It works in post, and seems disabled everywhere else (which is a good thing). It doesn't cause problems with blacklisted images on the comments list or whatnot. The code, at a glance, looks clean.

I'd love to implement this!

However, I'm clueless when it comes to including/running/whatever .js files on a website. <.< So the question becomes: is there a way to implement this to where I won't have to reimplement it every time there's an update? Probably just wishful thinking, isn't it?

With that in mind, I wanted to ask your permission to show this to the developer of the software with the hopes of him making it a basic feature. I mean, if he does, then I wouldn't have to mess with every new update if my wishful thinking above is not possible. Besides, it would be a shame to keep such a nifty feature all to ourselves, wouldn't it? ;)

Could the answer to your question be found <<code.google.com/p/my-imouto-booru/wiki/HowToUse|here>> under "Customizing assets"? (Honest question; I really don't know)

Hi again!

Vanndril, make sure you eat something healthy once in a while ok? Lunch is a good quickie but nothing shows love like a fruit or vegetable. Quick healthy snack: peel a carrot and cut it in slices, and eat them like that.

Now: I'm glad you like the script! And yes, it's possible to add it in a way that doesn't require re-applying after each update. Mindwipe is correct, you just have to edit a config file (this config file isn't updated when you copy a new version of MyImouto because it has to be renamed when you install for the first time).

To add the script as an asset:

* Go to the public folder of the server. This is the public folder of myimouto too.
* Add a folder called "javascripts".
* Put the above script on it. So it will be:



Now, MyImouto's config works as follows: first it reads this file:



Then, it reads this other file, and whatever this contains will overwrite the former:



On default_config.php, there's a section like this:



(nevermind the lack of indentation here)
You have to copy it to config.php, and add another item. Note the extra comma too:



Now, if everything went well, it will apply right after you save the file. Take note to include the extra comma before our last item like that, or it will be a syntax error.

Mine looks like this: i.imgur.com/wW1LbB8.png

In the future I plan to make updates to this file for extra functionality, and all that will be needed will be to replace the hypnohub-hover-zoom.js file. You can also update the booru software at any time without problems, as copying a newer distribution over the current doesn't touch the config files.


I don't mind at all, and even if he wants to re-brand it (change its name from "hypnohub-hover-zoom") or minify it along with the other scripts for the site, that's cool with me. But it would be good for us to first have it well-tested here, just in case.
I also plan to make it work on other parts of the site, on post links it would be really useful!

Funny you should mention that. I wanted to avoid that by brute forcing some changes into the CSS (this is the system that handles the CSS file(s) as well). Obviously, that didn't work. Not here, or on my local PC. So I spent the past who knows how long figuring out exactly how to use the assets system. I think I can make the changes to the live site now without breaking shit, and prepared what I need ahead of time so that it will go as smoothly as possible...but we'll see when I try.


You're enjoying this, aren't you? I think your avatar is getting to you. I totally just imagined that said in their voices.


Just did it on my local install (thanks again, for that!). That was SO much easier than using custom CSS assets...

The CSS assets require you to write the CSS file here, edit the application.php file to tell it to look for that file and also to create a URL path to the Rails panel, go to the panel, find the page there that lets you compile the CSS file into its final form, go over to config.php and change a line in THAT so that it will load said new CSS file, and THEN you have it done. Doing the javascript asset was nearly as simple as 1, 2, 3. <.<

It shouldn't cause any issues if I add the script to the live site, but just like the CSS, we'll see.


Awesome. :D I do definitely agree, btw, that it would be useful for post links.


Most definitely true.

Well, this was nice of you Stem. Thanks for all this. :)

The servbots were so cute <3


No no no, the CSS is just as easy to add. I did that to test the CSS (and only later converted it to an inlined string in the JS file). See, this is how it looks to add a CSS file:

i.imgur.com/zwZL56T.png

This is the config.php file, you don't need to add anything else. The CSS would then reside at:




None of this would be possible with your and Mindwipe's efforts :D

It wouldn't work when I merely pointed the software to it. <.<
I had to go through the whole gig outlined on the Assets section of the <<code.google.com/p/my-imouto-booru/wiki/HowToUse|how-to>>.

Well, whatever. Efficient or no, following that guide to the letter worked. I was able to make some subtle changes to the layout of the site now. :D

Also, got your js file in, too.


If fumbling around blindly, merely pretending to know what to do, can be called effort. :P Cause that's what I did. For months. Hell, if slayer didn't show up with his hosting solution, we would have been screwed! XD

Then again, it did take an effort to set everything up all perfect-like after we got this install of the site going, so I guess that's true. ;)

Weeee is working, is running!! I loved it!! <3
Thanks Stem and Vanndril!

Maybe you didn't put it into a "stylesheets" subfolder? That caught me off guard until I looked at the javascript console (which warned of a file not being loaded and which path).


Great! Really awesome. Now I can just add enhancements and you'll just have to replace the file.

Also, current users won't see a difference until they click on the link, but it's by design, so that you have to at least have used the site for a while (and see the link) before you add up to the bandwidth bill. But if you disagree I can make it on-by-default for everyone, even if they didn't yet click it once.


I HAD to contribute too! You cute little artist thing.

Ok, I made an update! Going to make a thread for this specific code.

Vanndril (or Mindwipe), please download and replace the file on the server with <<gist.github.com/anonymous/6518540|this one>>.

Vanndril has to do that stuff. I don't have access to the files.