background preloader

Galerie photo avec JavaScript - Alsacréations

Galerie photo avec JavaScript - Alsacréations
Ce tutoriel pour débutants propose la création d’une galerie d’images simple avec HTML, CSS et une surcouche JavaScript. Préambule: en complément ou en remplacement de ce tutoriel créé en 2005, nous vous proposons de consulter un tutoriel plus récent : Une galerie d’images simple avec jQuery. Ce dernier est destiné aux personnes ayant déjà des bases en JavaScript et si possible avec jQuery. Voici un petit exemple concret d'un cas où JavaScript permet un gain au niveau de la navigation sans entrave à l'accès au contenu au cas où ce dernier soit désactivé. Voir la démonstration Il peut être très avantageux d'utiliser le JavaScript pour certaines choses comme notamment des galeries photos (ou autre), en effet vous ne rechargez pas la page au clic sur la miniature, la photo en taille réelle est directement affichée sans recharger quoi que ce soit. Les codes HTML et CSS La fonction JavaScript gérant la galerie Il faut maintenant créer ce fichier script.js.

Une galerie d’images simple avec jQuery - Alsacréations Ce tutoriel vous guide dans la réalisation d’une galerie d’images simple, avec JavaScript et la bibliothèque jQuery. Introduction Réaliser une galerie photo en JavaScript n'est à première vue pas bien compliqué. Pourtant, si l'on veut bien faire les choses, le code peut rapidement devenir complexe et verbeux. Voici un système simple et non intrusif de visualisation d'images avec chargement et effet de fondu, comme on peut le visualiser avec cet exemple. Grâce à jQuery, l'écriture de ce script s'en trouve grandement simplifiée et concise. Attention: l’adjectif «simple» dans le titre du tutoriel désigne la galerie d’images réalisée, pas forcément les étapes pour y parvenir. La base HTML Nous allons commencer par créer une liste de vignettes qui, une fois cliquées, afficheront nos images grand format. Nous avons maintenant notre balisage HTML définitif. La surcouche JavaScript Il reste à créer et lier le fichier qui contiendra le code de création de notre galerie d'images.

jQuery - The Write Less, Do More, JavaScript Library jQuery JavaScript Library Mootools en 30 jours : jour 1 - Introduction Installation de Mootools 1.2 Tout d'abord, téléchargez et installez le noyau (core) de la librairie Mootools 1.2. Téléchargez la librairie Mootools 1.2 CoreUploadez la librairie de Mootools 1.2 sur votre serveur ou espace de travailFaites un lien vers la librairie Mootools 1.2 Core entre les balises de votre page - 2. Créer un fichier JavaScript externe et faire le lien vers celui-ci dans votre : A partir de là, vous pouvez utiliser l'une ou l'autre des méthodes. Placer dans le domready Les fonctions Mootools doivent être appelées dans l'évènement domready. window.addEvent('domready', function() { exampleFunction();}); Placer dans une Fonction Vous pouvez quand même placer vos fonctions en dehors du domready, puis les appeler à l'intérieur de celui-ci. var exampleFunction = function() { alert('hello')}; Description de la librairie Noyau Natif Classes Une classe JavaScript (c'est différent d'une classe CSS), est un objet réutilisable avec des fonctionnalités. Elements Utilitaires Request Plugins

Tutoriel pour créer une galerie photo avec JavaScript: Je l'ai utilisé dans le cadre d'un projet personnel by mastofrune Mar 28

Related: