jQuery Girl
  1. jQuery Girl
  3. Galerie jQuery de base
Intereting Posts
Puis-je envelopper chaque ligne de texte multiligne dans une plage? Comment changer la couleur de cellule d’un jpery datepicker Afficher la saisie semi-automatique de Jquery UI uniquement lorsqu’une touche spéciale est enfoncée De l’URL définie par le parent sélectionné option Comment positionner un élément de sorte qu’il ne s’écoule pas de l’écran visible jQuery charge une division HTML spécifique dans une page Web Fonction jQuery .globalEval () Envoi de messages ajax à mvc avec “application / json; charset = utf-8 ”renvoie l’erreur 500 du serveur de développeur Web vs jQuery récupère la valeur du deuxième au dixième du nombre de clic cliqué dans un tableau. J’ai déjà le premier Javascript – effet fadein Uncaught SyntaxError: manquant) après la liste d’arguments Utilisation de setTimeout pour retarder la synchronisation des actions jQuery Récupère toutes les lignes de la table «courante» et non des tables enfants Ai-je besoin d’un jeton CSRF pour jQuery .ajax ()? Comment append plusieurs valeurs JSON dans une seule cellule de dataTable Jquery fenêtres modales et object d’édition

Galerie jQuery de base

Je serais reconnaissant si quelqu’un pouvait m’aider avec un petit problème d’interrogation. Je ne connais pas l’écriture de jquery, je maîsortingse le CSS HTML et implémente les plugins jquery.

Je construis une page de galerie sur ce site web. Actuellement, j’ai une rangée de vignettes dans un carquois jQuery qui fonctionne parfaitement.

HERES CE DONT J’AI BESOIN:

Lorsque l’utilisateur clique sur une vignette, je souhaite que sa grande image passe en fondu par-dessus la grande image actuellement sur la scène (la première vignette).

Je suis sûr que c’est assez simple pour quiconque a une connaissance de base de l’écriture jQuery.

Voici mon code source actuel.

http://www.silverbackstudios.co.uk/laurenmitchell/wedding-gallery.html

Merci de votre aide!

Jarrett

Vous devez d’abord append un identifiant à votre grande image

Après cela, je changeais le nom des images pour que la grande image et la vignette aient le même nom mais soient placées dans des dossiers différents, comme celui-ci: 

 https://stackoverflow.com/questions/8869977/basic-jquery-gallery/images/gallery/wedding/large/1.jpg images/gallery/wedding/thumbs/1.jpg

Ceci fait, vous pouvez append le code JQuery suivant 

 var clickable = true; $(document).on("click", ".thumb a", function(event) { event.preventDefault(); if (clickable == true) { clickable = false; // Get URL of the large image var nameIMG = $("img", this).attr("src"); nameIMG = nameIMG.replace("thumbs/", "large/"); // Fade in the new image $("#gallery").append('
'); $(".big-overlay").fadeIn("slow", function() { // Change the original  to the new image $("#gallery-big").attr("src", nameIMG).load(function() { // Remove the overlay $(".big-overlay").remove(); clickable = true; }); }); } });

… et la règle CSS suivante 

 .big-overlay { position: absolute; top: 0; left: 0; z-index: 10; display: none; }

Ce code ajoute une incrustation contenant la version agrandie de la vignette sur laquelle l’utilisateur a cliqué et l’ajoute en fondu. Lorsque cela est fait, il modifie le chemin de recherche de l’image d’origine (# gallery-big), puis supprime la superposition.

Ce n’est peut-être pas la meilleure solution, mais cela devrait faire l’affaire 🙂

Essayez le plugin jQuery Light box.

http://leandrovieira.com/projects/jquery/lightbox/

Si vous voulez le faire vous-même, ajoutez ensuite data-src="location_of_full_size_image.jpg" aux vignettes et à la méthode onClick 

 $('#gallery-big').attr('src', self.data('src'))