Jquery : cacher et faire apparaitre un DIV

Je cherchais à cacher et faire apparaitre des <DIV>s en Jquery, avec un effet accordéon.

J’ai trouvé mon bonheur sur cette page. J’ai du modifier le script pour le faire correspondre à mes besoins (plusieurs div à maquer et afficher lors d’une action), mais le principe reste le même.

L’idée est dans un premier temps cacher tous les éléments avec la fonction .hide().

Ensuite rendre le div du titre cliquable ; fonction .click()

Une fois cliqué, on déclenche l’action .slideToggle (qui va afficher un élément masqué et inversement), puis cacher tous les autres div de la sélection.

Cela permet de bien réviser ses sélecteur Jquery : .next et .siblings !

Galerie d’images avec navigation Jquery

Dans le cadre d’un projet, j’avais besoin d’un slideshow en jquery efficace. J’utilise régulièrement Nivo Slider, mais là j’avais envie d’en essayer un nouveau pouvant générer les miniatures automatiquement.

Après une petite sélection des sliders existants, je suis partit sur slideViewerPro, un plugin basé sur jQuery slideViewer.

Le plugin est très facile à mettre en place dans une page simple, et n’a pas besoin d’être modifié pour fonctionner avec le framework 960.gs (parfois la grille de reset peut poser problème).

L’intégration de slideViewerPro nécessite uniquement un fichier JS et CSS (et bien sûr le fichier Jquery).

Vous pourrez ensuite customiser le CSS pour rajouter vos préférences ou effets. J’ai ajouté une ombre à l’image principale :
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;

Les options plus basiques peuvent se configurer directement dans le script d’appel : borders, couleurs, démarrage… Je vous rentrouvrez toutes les options dans la documentation. A titre informatif, voici mon script d’appel :
$(window).bind("load", function() {
$("div#my-folio-of-works").slideViewerPro({
thumbs: 6,
typo: true,
galBorderWidth: 0,
thumbsTopMargin: 10,
thumbsBorderOpacity: 0,
buttonsTextColor: "#707070",
buttonsWidth: 40,
thumbsActiveBorderOpacity: 0.8,
thumbsActiveBorderColor: "#0084ff",
typoFullOpacity: 0.9,
shuffle: true
});
});

Partager ses fichiers : WeTransfer et Dropbox

Pour échanger des fichiers avec les graphistes, j’utilise Dropbox. Si vous ne connaissez pas, c’est hyper pratique et vous permet d’avoir un répertoire dans votre ordinateur synchronisé sur internet – dans le cloud !

Je m’en sers tous les jours, et je vous le recommande chaudement (plus besoin de faire de sauvegardes). Pour partager des fichiers, il vous suffit de partager un répertoire avec un autre utilisateur par exemple. En vous inscrivant vous avez droit à 2Go d’espace disque gratuit. Et vous aurez 500 Mo en plus gratuitement si vous passez par ce lien ; qui fait de moi votre parrain (j’y gagne aussi  500 Mo).

 

Pour des échanges de fichier plus ponctuels, avec les clients par exemple, j’aime bien utiliser wetransfer.com ; c’est simple, gratuit et  efficace. Il permet d’envoyer des fichiers jusqu’à 2 Go, et c’est sans inscription. Cela évite d’avoir à jongler avec encore un compte de plus juste pour envoyer un fichier !

Vous pouvez vous en servir autant que vous voulez (pas de limitation par rapport à votre adresse IP par exemple). Les fichiers sont disponibles 2 semaines, cela vous laisse largement le temps de les récupérer !

Donnez vos outils de partage en commentaire !

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.