Images / Graphisme18 ressources dans cette catégorie

Retrouvez ici tous les meilleurs téléchargements

UploadAjaxABCI v8.0c
Classes d'upload Javascript / Php / Html5
Compatibilité serveur Php 5.6 - 8.0+

Copyright (c) 20014-2022 Alain Bontemps (abciweb.net)
Licensed under the mit license (https://opensource.org/licenses/MIT)

Module complet prêt à l'emploi avec classes Php côté serveur, et plusieurs exemples de formulaires customisés et finalisés.

- Surpasse les limitations serveur "upload_max_filesize", "post_max_size" et "max_file_uploads".

- Permet la reprise d'un téléchargement interrompu après un arrêt volontaire ou une panne internet ou serveur, en utilisant la partie sauvegardée.

- Customisation des boutons de sélections ... Voir la suite

Responsive Nav est un plugin JavaScript qui vous permet de rendre vos menus de navigation responsive.
Pour cela il utilise les transitions CSS3. Il permet également de gérer le tactile et rend ainsi votre menu accessible aux smartphones et tablettes.

Lancement du défilement quand la souris passe sur la zone.
Plus la souris se rapproche des extrémités, plus la vitesse est rapide.
Le sens de défilement change quand le curseur arrive à la moitié de l'image.
Un clic sur la zone désactive / relance le défilement.
Pour l'exemple, pendant les pauses, les images deviennent des liens actifs vers une popup.

RefineSlide vous permet de créer un caroussel d'images responsive.

En effet, ce script JavaScript utilise les transitions et les transformations CSS3 pour afficher un caroussel d'images original, attractif et personnalisé. Il utilise également un fallback JavaScript pour le fondu. Il supporte les miniatures, les légendes et possède également une API.

Le caroussel ainsi créé propose des images responsive, qui s'adapteront à la navigation sur mobile.

RefineSlide est supporté sur tous les navigateurs récents (IE7+).

Windy permet de faire défiler rapidement des éléments. L'effet fera s'envoler les éléments comme un jeu de cartes ou des feuilles qui, pris dans un coup de vent, s'envolent. D'où le nom du plugin. Ceci est réalisé en utilisant des transformations CSS 3D et des transitions.

Il y a plusieurs options disponibles, comme la plage de propagation des éléments, la vitesse, l'ajout de navigations personnalisées, etc.

Pour les navigateurs qui ne supportent pas les transformations CSS 3D ou les transitions, il y a une navigation simple par défaut, c'est à dire faire apparaître/disparaître les éléments sans effet.

Faire defiler des images manuellement

Sur le site http://designwithpc.com/Plugins/ddSlick, vous trouverez un plugin intéressant permettant de faire une liste avec libellé, image, description ...

Mais comment le remplir ...
Ici j'appelle une fonction qui me renvoie les éléments à afficher dans la liste et je rajoute un item correspondant à "aucun"

Suite à cette discussion, je me suis amusé à réaliser un script assez simple de fondu enchainé.

Le fonctionnement est plutôt simple (enfin... je pense) : vous positionnez vos images les unes par-dessus les autres (dans l'exemple, en les positionnant en absolute) et vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
Ensuite, le script modifie les propriétés z-index et d'opacité pour réaliser l'effet.

Exemple en ligne

Attirer l'attention sur un lien, 2 versions

Mozilla renvoie les couleurs d'un élément sous format "RGB(xx,yy,zz)".
Voici une fonction qui transforme ce résultat en standard hexadécimal...

Comment récupérer les dimensions d'une image affichée à l'écran ?

Grâce à ce script JavaScript, vous pourrez désormais utiliser des images de remplacement aussi bien en mode en ligne qu'en mode déconnexion !

En effet, Holder.js permet de remplacer des images dans vos pages en se basant sur l'élément HTML 5 canvas ainsi que sur une API chaînable.
Ces deux points permettant d'afficher et de styliser simplement vos images placeholder (images de substitution).

Grâce à ce plugin, jQuery très léger vous pourrez passer en douceur aux images responsive.
En effet, ce mot est très à la mode ces derniers temps dans le développement Web. Il s'agit en fait tout simplement de pouvoir adapter vos contenus en fonction de la résolution d'écran de l'utilisateur (et donc du type d'appareil avec lequel il visite votre site).

Pour se faire, ce plugin vous offre deux solutions qui sont actuellement à l'étude pour devenir le standard des images responsive : l'élément et la nouvelle balise récemment proposée .

Une mise en garde cependant : ce plugin utilise des éléments qui ne sont pas encore considérés comme valide par le w3c !

Ce plugin jQuery présente un agréable effet de loupe sur les images selon les mouvements de la souris. L'image de « zoom » est séparée, ce qui vous permet de créer des effets.

Parmi les options que vous pouvez manipuler, il y a la taille de la loupe, une paramétrisation CSS, la gestion d'événements, etc.

Alpha Image est un plugin jQuery qui permet de modifier simplement la couleur de vos images.

Différentes options sont disponibles et vous pouvez choisir d'utiliser un code hexadécimal ou bien du RGB pour modifier la couleur.
Le retour de la fonction peut également contenir les données relatives à l'image en plus de l'image elle-même.

Resemble.js est une bibliothèque JavaScript très légère (environ 11kb) créée par James Cryer pour faire de l'analyse et de la comparaison d'images directement dans le navigateur.

Cette librairie requiert l'API HTML5 file ainsi que l'utilisation des canvas HTML5 pour le rendu des différences.
Grâce à Resemble.js vous pourrez soit analyser une image seule, soit comparer deux images pour trouver leurs différences.

Instafeed est une bibliothèque CoffeeScript qui vous permet de manière on ne peut plus simple d'intégrer des images provenant d'Instagram dans vos pages Web.

Ce script va automatiquement chercher la et la remplir avec toutes les images Instagram tagguées "awesome". Vous pouvez bien évidemment modifier le comportement en utilisant les options standards et avancées.

Beaucoup utilise le plugin ddslick, pour avoir une liste avec des images et description.
Malheureusement, quand on l'utilise dans une popup ou une div ou tout autre limiteur d'espace et qu'on veut la dérouler ... appaît un scroll...