HOME | DD

Xeviousss — thumbZOOM v3.0

Published: 2012-02-12 22:46:02 +0000 UTC; Views: 2563; Favourites: 25; Downloads: 92
Redirect to original
Description About

This script adds some little features to DeviantART.

Here is a list of these features :
• add a zoom effect to the thumbnails
• provide the thumbcode of deviations
• highlight the DailyDeviations
• add a 'DD tab' on the deviant users profileFor a better user experience, all the options are configurable.

How to

Firefox
• first, install Greasemonkey (a free firefox extension)
• then click on the "install button" on the userscript page Chrome
• first, install Tampermonkey (a free google chrome extension)
• then click on the "install button" on the userscript page Safari
• first, install NinjaKit (a free safari extension)
(click on the "NinjaKit for Safari" link, and choose "open")
• then click on the "install button" on the userscript page Opera (beta)
• To enable User JavaScript:• For Mac, go to: O menu > Preferences > Advanced > Content > JavaScript options
• For UNIX and Windows, go to: O menu > Settings > Preferences > Advanced > Content > JavaScript options
• Select the directory where you will put your User JavaScript files. Opera will load all files in the specified directory whose names end with .js and will use them as User JavaScript files
• Save this script as "thumbzoom.js" in this folder
• Save jquery as "jquery.min.js" in the same folder
Help

You can choose what you want to enable via the "thumb menu" in the header of DA. This menu only concerns the options for the thumbnails. For the rest, you can check the script settings, here : [link]

multiplier: the number of times the image is bigger.
duration: time the zoom takes to display the full size.
delay: time before the zoom is triggered.
highlight DD: display a DD icon under the thumb when the deviation has been featured.

Bugs, suggestions?

If you find any bugs, or if you have any suggestions, let me know here. Thanks.

What's new in 3.0?

For this version, I rewrote the code from scratch, and I now use a new way to handle the zoom. This is way proper and should speed up the execution time / reduce the number of bugs.
I removed some options which was not thumbs related and probably useless.

Here is the changelog :
+ new way to handle the zoom
+ settings applied in real time (have fun while testing different options)
+ compatibility with safari and opera
- remove the drag and drop on the avatar, the "pin header", the display of page n° in search pages
Related content
Comments: 21

Ode-Chan [2015-08-17 03:51:41 +0000 UTC]

The link to this one also doesn't work

👍: 0 ⏩: 0

fred-miaou [2014-02-01 13:07:25 +0000 UTC]

Salut,

Tu pourrais faire en sorte que ça marche également sur les pages www.deviantart.com/messages/#v…

Seulement, comme les aperçus de la page font 150x150, il faudrait les remplacer en préchargeant les images contenues dans les éléments : "a.thumb[data-super-img="adresse-image.png"] qui font plus de 800x800.

Ça éviterait d'avoir à attendre que ça charge quand on passe la souris. Même si en contre partie ça rendrait le chargement des pages messages/deviations plus long. Perso, j'aime mieux ça pour pouvoir passer la souris et avoir un aperçu potable et rapide.

Vraiment, j'espérais que ton script fonctionne sur ces pages car c'est là qu'il pour mon utilisation personnelle le plus d'utilité.

merci de faire un retour

bye

👍: 0 ⏩: 1

Xeviousss In reply to fred-miaou [2014-02-03 13:15:57 +0000 UTC]

Salut fred,


adapter le script pour le message center est quelque chose que j'ai toujours voulu faire.

Pour des raisons techniques (ajax, stack; entre autres) et de priorité, j'avais toutefois préféré laisser la chose de côté.


Mais puisque tu en parles, ce serait l'occasion de travailler dessus. DA ayant évolué depuis la dernière version, je pense procéder à une complète réécriture qui me permettrait également de clean le code.

Je ne garantis pas de m'y remettre tout de suite, par contre.


Mais je reviendrais vers toi pour te tenir au courant.

Merci pour la suggestion.


bye

👍: 0 ⏩: 1

fred-miaou In reply to Xeviousss [2014-02-03 22:34:44 +0000 UTC]

Salut,

Voir les fonctionnalités de tes scripts, et leurs sources auxquels je n'ai honnêtement rien compris même en essayant de les reformater en "human readable", m'a donné envie de replonger dans l'écriture de script.

Je suis en train d'écrire le script pour avoir des aperçus plus grands et en haute résolution dans le deviantWatch. Le résultat est très concluant. Je pensais que le chargement des pages seraient très ralenti en devant aller chercher et afficher ces 24 images de bonnes tailles. Mais le ralentissement est presque imperceptible avec une bonne connexion. Clairement ça pète!

Ce qu'il me reste à faire:

  • Fusionner ce projet avec mon script précédent que j'avais fait pour afficher le nom clairement sur les vignettes dans la section deviantwatch et la section de recherche et navigation. Et au passage revoir ce script dans le fond et dans la forme.
  • Finir d'écrire et intégrer un CSS (actuellement en alpha avec stylish) pour styler et optimiser tout ça
  • Idéalement ajouter une fonction optionnelle et paramètrable de zoom au survol des images. J'ai essayé en pure CSS et bien que l'image s'affiche sans délai puisque il n'y a pas besoin d'aller en charger une autre version en plus haute définition comme le fait actuellement Mouseover Popup Image Viewer , le résultat que j'obtiens n'est pas exploitable car le positionnement et le comportement de l'image est aléatoire malgré mes essaies. Je vais donc voir comment faire en javascript pour obtenir un résultat plus contrôlé.
  • Les plus optionnels si j'en le courage, j'aurais aimé intégrer les fonctionnalités de ton script qui affiche les infos sur l'utilisateur quand on passe la souris sur son avatar pour qu'il fasse la même chose quand on passe la souris sur le nom d'artiste au-dessus des vignettes (cf mon script plus haut). Ainsi qu'ajouter un bouton d'option comme tu l'as fait pour ton script de zoom.
  • Note que non seulement j'ai choisi sciemment d'écrire en pure javascript, pour ne dépendre d'aucune librairie et pour apprendre vraiment le langage et créer et intégrer seulement les fonctions utiles au script mais que mon niveau de programmation, notamment en javascript est à l'état de novice. Par exemple, l'usage avancé tel que décrit dans cet article est pour moi encore du chinois et je ne vois pas comment utiliser ça dans ce projet alors que j'ai l'intuition que je pourrais me simplifier la vie en en maitrisant quelque unes. D'autres part, je fais un gros travail de commentaire et de renommage de variable sur le code actuel. Relire mon ancien code ci-dessus fut une tanné que j'aurais pu m'épargner si j'avais fait les choses dans les règles de l'art mais sur le moment on est juste content que ça marche et on oublie ces détails qui deviennent important dans le temps. Ainsi n'importe qui pourra les retravailler, les réutiliser pour un autre usage ou les optimiser.

    Si tu es partant et qu'idéalement, tu ne crains pas de te passer de jQuery, je te propose de te soumettre mon code quand j'aurai fini entièrement de coder la section 1 et 2. Tu verras à quoi ressemble mon travail et si ça t'inspire d'y ajouter ta science et ton expérience pour l'optimiser et ajouter les fonctions 3 et 4, j'en serai ravi. Dans ce cas merci de me communiquer ton mail par mp ou de me contacter via le compte usercript.

    a plus

    👍: 0 ⏩: 0

    heySnapDragon [2012-12-28 22:36:35 +0000 UTC]

    Merci pour ce petit rien qui marche super bien!!!

    👍: 0 ⏩: 0

    klapouch [2012-12-21 10:21:44 +0000 UTC]

    Awesome job!

    ...A "copy thumbcode" button would be awesome also...

    👍: 0 ⏩: 0

    kori-hibana [2012-08-15 17:05:43 +0000 UTC]

    yay this is awesome ^^

    👍: 0 ⏩: 0

    pica-ae [2012-08-15 09:54:14 +0000 UTC]

    this is awesome

    👍: 0 ⏩: 0

    Quolia [2012-08-15 05:09:10 +0000 UTC]

    Excellent!

    👍: 0 ⏩: 0

    Astrikos [2012-08-13 19:47:23 +0000 UTC]

    This is fantastic. One thing for another thing if possible, autocopy a thumbcode?

    👍: 0 ⏩: 0

    Blusaga [2012-06-04 05:41:11 +0000 UTC]

    I have this problem [link] what you suggest me to do ?

    👍: 0 ⏩: 0

    JamminJo [2012-05-21 18:48:37 +0000 UTC]

    thank you for making this fantastic tool

    👍: 0 ⏩: 0

    jQuan [2012-05-05 04:43:52 +0000 UTC]

    AWESOME!!!!!! I love it, for years I was searching and searching for this script!!!!!

    👍: 0 ⏩: 0

    Is-lnds [2012-03-25 01:19:07 +0000 UTC]

    This is perfect.

    👍: 0 ⏩: 0

    ThunderClawShocktrix [2012-03-24 15:33:54 +0000 UTC]

    This seems like a much better idea than what da want's to do to make the thumbnails bigger.

    👍: 0 ⏩: 0

    rotane [2012-02-27 00:25:44 +0000 UTC]

    Oh, one more thing: On the popup, rather than "by ~deviant" I'd prefer to see the deviation title. Or hey, you could even make it optional, to show either one – or both.
    That would be awesome!

    👍: 0 ⏩: 0

    rotane [2012-02-27 00:14:40 +0000 UTC]

    This is really magnificent! Pretty, and quick. I like this. Plus, the little details, like DD info and customization, is the icing on the cake.

    But, I've got one little suggestion: would it be possible to add this (the thumb preview) to text links (like e.g.: [link] ) as well? That, and maybe to big thumbs too (like the first one on your userpage), so we can get instant access to :thumb: codes there as well.

    👍: 0 ⏩: 0

    SamirPA [2012-02-17 13:01:15 +0000 UTC]

    Hey, please forgive me! I read "female" in your profile. I'm sorry!

    👍: 0 ⏩: 1

    Xeviousss In reply to SamirPA [2012-02-19 14:14:14 +0000 UTC]

    Don't worry, no problem

    👍: 0 ⏩: 0

    SamirPA [2012-02-17 11:34:39 +0000 UTC]

    Hello girl! I'd like to congratulate you for this absolutely fantastic job! This is very useful for me. I'd like to ask you if is possible somehow make this application to be installed so that it can be used in a group of deviantart, and that users of this group can enjoy the application functions when browsing through the galleries of the group. I don't know if I was clear and if this is possible, but it would be something spectacular. Thank you so much for your attention and congratulations for your work!

    👍: 0 ⏩: 1

    Xeviousss In reply to SamirPA [2012-02-19 14:10:03 +0000 UTC]

    It's not possible. This script needs to be manually installed by each users to work, and there's no way to automate this installation when they join the group. However, you can inform them that such a script exists (well, I know it's not that great, but that could help to promote the script).
    Anyway, thanks a lot for your interest!

    👍: 0 ⏩: 0