Bien entendu, il existe de nombreuses façons d’agrandir des images. Et principalement l'utilisation de scripts et de plugins est utilisée. De telles méthodes me paraissent justifiées dans le cas de ressources avec une somme énorme des photographies ou des images. Mon blog n'est pas comme ça. Et, comme d'habitude, je suis le chemin de la moindre dépense de temps, de connaissances et de ressources sur mon site.
Je vous propose un moyen d'agrandir les images du site sans utiliser de scripts, mais exclusivement avec en utilisant HTML.
Cette méthode d'agrandissement d'une image sur un site Web permettra au lecteur de voir rapidement l'image, car votre site Web n'aura pas besoin de charger de scripts supplémentaires.
Agrandir l'image sur le site Web Méthode 1 – agrandir l’image sur le site au survol du curseurTrès simple, eh bien la manière la plus simple, honnêtement. Vous devez ajouter le code suivant aux propriétés de l'image :
Onmouseover="this.style.width="Grande largeur d'image px"" onmouseout="this.style.width="Petite largeur d'image px""
Lorsque vous passez le curseur de la souris, l'image s'agrandit.
J'espère que vous comprenez que tout cela se fait dans un éditeur de texte.
La méthode est similaire, il vous suffit de remplacer onmouseover par onclick. Le code suivant est ajouté aux propriétés de l'image :
Style="width : "valeur de largeur de la petite image px ; border:2px noir uni;" onclick="this.style.width=grande largeur d'image px"" onmouseout="this.style.width="petite largeur d'image px""
Cela ressemblera complètement à ceci
Voici le résultat et le code pour la photo de chatte.
Lorsque vous cliquez sur la souris, l'image est agrandie à la taille de l'image originale ou à la taille que vous spécifiez. Pour réduire la taille, c'est-à-dire ramener l'image à sa taille d'origine, cliquez simplement n'importe où sur la page.
J'espère que vous n'avez pas eu de difficulté à utiliser de telles méthodes - en utilisant HTML - pour agrandir les images sur le site.
En général, je pense que de nombreux webmasters ne se limitent pas à utiliser n'importe quel moteur et utilisent des codes HTML sur leurs sites.
Lire aussi :
2015-10-27T16:07:59+00:00 Nadezhda Scripts et codes agrandissant les images sur le site, agrandissant les images sur le siteBien entendu, il existe de nombreuses façons d’agrandir des images. Et principalement l'utilisation de scripts et de plugins est utilisée. À mon avis, de telles méthodes sont justifiées dans le cas de ressources contenant un grand nombre de photographies ou d'images. Mon blog n'est pas comme ça. Et, comme d'habitude, je suis le chemin de la moindre dépense de temps, de connaissances et de ressources sur mon site. Je vous propose un moyen d'augmenter...
Nadejda Trofimova [email protégé] Site du blog de l'administrateur Vous pourriez également être intéressé par :
Comment créer une ombre de texte en 5 minutes
Bonjour, cher lecteur de mon blog. Dans cet article vous apprendrez à créer en 5 minutes en utilisant styles CSS Et Code HTML ombre de texte.
Comment créer des boutons vers le bas pour un site Web
Cet article est écrit dans la continuité de l'article sur la création d'un bouton de retour en haut d'un site Web.
Comment supprimer une entrée de page d'accueil utiliser du code
Bonjour, cher lecteur de mon blog. J'avais besoin de cacher certains articles de la page principale. Non pas pour le supprimer complètement de l'accès aux lecteurs, mais pour le supprimer...
Nous supprimons les entrées de catégorie de la page principale et du RSS
Nous continuons d'améliorer les fonctionnalités et apparence site. Nous supprimons les publications inutiles de la page principale et du RSS.
Fil d'Ariane sur un site WordPress
Les informations présentées dans cet article s’adressent principalement aux webmasters débutants.
Sur deux pages. Page 1. Vers suivant >>> DescriptionLe script « Jquery Image Magnify v1.11 » vous permet d'agrandir n'importe quelle image de la page à la taille requise. Augmenter ou revenir à l'état original se produit lorsque le bouton de la souris est enfoncé sur l'image. L'image est préparée en un seul exemplaire avec les dimensions requises et est agrandie conformément aux paramètres du fichier jquery.magnifier.js.
Si vous rencontrez des problèmes pour télécharger des fichiers, par exemple via un navigateur, copiez le lien ( bouton de droite souris → copier l'adresse du lien) et téléchargez le fichier via Download Master.
Après avoir téléchargé l'archive, décompressez-la dans le dossier actuel sur votre ordinateur. Dans le dossier jQueryImageMagnify, vous verrez :
- un dossier images avec six images au format jpg ;
- js avec le fichier de script java jquery.magnifier.js et le fichier de curseur d'agrandissement magnify.cur (ne se reflète pas dans tous les navigateurs !) ;
- fichier avec le matériel de démonstration demo.html.
Ouvrez ce dernier dans le navigateur que vous utilisez et assurez-vous que la démo fonctionne.
Dans l'exemple que vous avez reçu, "Jquery Image Magnify v1.11" ne fonctionnera que lorsque Internet est activé, puisque le fichier dernière version Bibliothèques jQuery - "jquery.min.js" est téléchargé depuis le site de l'API Google.
Si vous souhaitez que tout fonctionne de manière autonome, téléchargez et connectez la dernière version de la bibliothèque jQuery depuis le site officiel.
Si vous disposez déjà de la version la plus récente ou ultérieure de la bibliothèque jQuery connectée (au moment de la publication de l'article - version 3.1.1) ou si vous utilisez connexion à distance la dernière version du site Web jQuery ou de l'API Google, bien sûr, vous ne devriez pas la reconnecter.
Instructions d'installation sur le site (image unique)Étape 1. Sélectionnez l'image souhaitée et téléchargez-la dans le dossier images, situé dans le dossier racine du site.
Étape 2. Téléchargez le contenu du dossier js dans le dossier du même nom à la racine du site.
Étape 3. Le code suivant pour connecter jQuery et le script Java jquery.magnifier.js doit être ajouté à la section d'en-tête ou de corps de votre page :
Étape 4. Et ce code doit être placé dans la section corps de votre page :
Explications :
Le chemin d'accès au fichier image que vous avez sélectionné.
Dimensions de l'image avant agrandissement. Affichez-les à votre discrétion.
En termes simples, dans la section corps, vous insérez le code d'image habituel, en lui attribuant class="magnify" . Si l'image contient des attributs de taille explicites (largeur et hauteur), cela permet à l'utilisateur d'agrandir l'image en fonction des paramètres du fichier de script jquery.magnifier.js. Si les dimensions ne sont pas indiquées, alors les dimensions réelles de l’image serviront de base à l’agrandissement.
Voyons le résultat : Pour zoomer/dézoomer, cliquez sur l'image Variations avec placement d'image
Explications :
Positionnement à gauche.
Positionnement à droite.
Les dimensions originales de l'image peuvent être modifiées à l'aide des attributs width et height.
Paramètres possibles dans le fichier jquery.magnifier.js
JQuery.imageMagnify=( dsettings : ( magnifyby : 5, //facteur de grossissement de l'image (par défaut - 3) durée : 500, // durée de l'animation en millisecondes (par défaut - 500) imgopacity : 0,2 //degré d'opacité de l'image originale lorsque l'image agrandie le recouvre (par défaut - 0,2)
Comment retirer un cadre photo ?
J'ai spécifiquement posé cette question dans une sous-section distincte, car elle provenait de l'un des visiteurs du site.
Pour que l'image agrandie s'affiche sans cadre après avoir cliqué sur la souris, vous devez :
- Ouvrez le fichier jquery.magnifier.js. Vous pouvez le faire dans n'importe quel éditeur de texte, mais je recommande Notepad++
- Trouvez une section de code (dans Notepad++, ce sera à la ligne 51)
var $clone=$target.clone().css((position:"absolute", gauche:0, haut:0, visibilité:"caché", bordure:"1px solid gray" , curseur:"pointeur")). appendTo(document.body) - Dans la ligne mise en évidence avec un marqueur, définissez la valeur de bordure sur zéro ou changez la couleur grise en blanc ou toute autre couleur adaptée à votre thème. C'est tout!
Sur deux pages. Fin de la page 1.
À partir des ordures, j'ai réalisé : IL EST TEMPS ! Il est temps d'insérer des images dans les articles de votre blog afin que lorsque vous cliquez dessus, elles s'agrandissent et s'affichent dans leur taille d'origine.
De plus, l'effet d'agrandissement doit être pratique pour l'utilisateur (vous), afin que moi, en tant qu'auteur, n'aie pas à manipuler les codes (paramètres) pendant longtemps lors de l'insertion d'images dans des articles, et pour que la charge sur le le blog est minime. Je ne veux pas utiliser toutes sortes de plugins et charger la même base de données Mysql.
Je me suis tourné vers les pros pour obtenir de l'aide et ils m'ont dit ce qu'il fallait faire et j'ai tout configuré en littéralement 3 minutes. Je le répète, sans utiliser de plugins comme Auto Highslide, etc. Ne traînons pas le chat trop longtemps... et allons droit au but.
J'ai essayé de nombreuses options différentes pour les scripts d'agrandissement d'image, mais j'ai opté pour le script qui crée cet effet. Regardez l'exemple, cliquez sur l'image à gauche :
Effet intéressant. On clique sur l'image et elle ne s'ouvre pas dans une nouvelle fenêtre (ce qui est très gênant), mais s'ouvre sur la même page sous une forme agrandie, dans un beau cadre avec une croix et en dessous se trouve une description de l'image.
Si vous aimez cet effet d’agrandissement des images, vous pouvez l’utiliser ! J'en parlerai ci-dessous.
Je le répète, un tel effet est tout simplement nécessaire. Il y a là des images qu’il faut regarder de très près pour y voir quoi que ce soit. Ceux qui ont une mauvaise vue ne verront rien du tout. Un script d'agrandissement d'image vous sera utile !
Alors, commençons. Tout se fait en TROIS étapes simples :
1. Téléchargez le script et téléchargez-le sur votre hébergement (serveur)
2. Ajoutez un petit code au fichier footer.php
3. Ajoutez des images aux articles de blog.
GOOU! Téléchargez le script lui-même. Nous téléchargeons tout le contenu à la racine de notre blog. La racine du blog est le répertoire principal du blog où se trouvent les dossiers tels que wp-admin, wp-content, etc. Intestin! Ils l'ont fait!
La deuxième étape consiste à ajouter un code spécial au fichier footer.php du thème de votre blog. Il est la:
Attention! Dans le code, remplacez site.ru par votre domaine. Vous devez ajouter le code dans footer.php avant la balise de fermeture
Intestin! Eh bien, c'est en gros ça ! Passons maintenant à l'essentiel ! Nous insérerons des images dans les articles afin que lorsque nous cliquons, elles s'agrandissent, comme je l'ai montré ci-dessus dans l'exemple. En général, regardez. Tout est simple ici, même si au début cela peut paraître difficile à certains ! J'insère des images comme d'habitude dans la publication via le bouton de l'éditeur de texte - Ajouter un fichier multimédia :
D'ACCORD. Maintenant, je supprime simplement tout cela (qui est dans l'image ci-dessus) du code html de l'image dans l'éditeur, et à sa place j'insère celui-ci :
En conséquence, nous obtenons ceci :
Nous voyons qu'en haut nous avons un lien vers une image de la taille d'origine, et en bas se trouve la même image (même URL), mais on lui a donné des dimensions pour la rendre plus petite. D'ailleurs, on n'oublie pas non plus l'optimisation, l'alt est également présent dans l'image. Tout est cool !
MISE À JOUR! Dans les commentaires de cet article, Dmitry Shkurin a suggéré une option encore plus simple pour utiliser ce script. Désormais, vous n’avez plus du tout besoin de modifier le code :
Autrement dit, lorsque nous avons téléchargé le script à la racine du blog + ajouté un code spécial à footer.php, nous n'avons plus besoin de bricoler quoi que ce soit pour ajouter une image à l'article. Nous faisons tout comme suit. Comme d'habitude, nous ajoutons une image à l'article en utilisant la fonction « Ajouter un fichier média ». Maintenant, dans les paramètres d'affichage du fichier, nous spécifions le lien comme « fichier multimédia » :
Naturellement, nous ajustons les dimensions pour que l'image s'intègre exactement dans l'article, puis allons dans l'onglet "Avancé" et dans la colonne "Relation" écrivons - "Mise à jour". Prêt!
Tout est rapide, simple et encore plus pratique. Dmitry merci beaucoup! Très utile!
C'est simple! Qui ne comprend pas quoi ? Tout est élémentaire ici ! Ce qui est cool, c'est que je peux donner l'effet d'agrandissement non pas à toutes les images, mais uniquement à celles que je veux lui donner. Si par exemple j’insère une image dans un article et que je n’ai pas besoin de la réduire pour qu’elle rentre dans le post, alors il n’est pas nécessaire de créer un effet d’agrandissement !
C'est ça. Utilise le. Ou peut-être que quelqu'un connaît une meilleure méthode ? Écrivez dans les commentaires. D'ailleurs, ce script peut être utilisé non seulement sur un blog, mais aussi sur divers sites d'une page ! Eh bien, ça y est, au revoir tout le monde !
Cordialement, Alexandre Borissov
Bonjour chers optimiseurs débutants.
Dans WordPress, par défaut, lorsque vous cliquez sur une image, l'utilisateur est redirigé vers la page de l'image. D'accord - c'est très gênant lorsque vous êtes soudainement transféré vers une autre page.
Pour que l'image s'agrandisse directement sur la page sur laquelle elle se trouve, vous devez installer un script spécial sur le site.
Vous pouvez voir comment cela fonctionne dans l'image ci-dessus ou dans les images dans la barre latérale.
Le trouver sur Internet n'est pas un problème, mais malheureusement toutes les offres ont un défaut. Le code du script, lorsqu'il est vérifié dans le validateur, produit une erreur.
J'ai dû forcer un peu et corriger cette situation, donc ce qui suit sera un script qui fonctionne parfaitement sur tous les modèles et qui est valide.
La méthode d'installation est accessible même à ceux qui ne connaissent rien aux scripts et aux langages de programmation en général.
En même temps, avec d'excellents résultats, il permet de se passer de plugin, et nécessite de remplir obligatoirement la balise alt avec le texte approprié, ce qui aura un très bon effet sur l'optimisation du site.
Ce n'est un secret pour personne que les plugins ralentissent la vitesse de chargement, puisque beaucoup d'entre eux placent leurs scripts dans le bloc head.
Et remplir la balise alt prend souvent tout simplement trop de temps. Là, que cela vous plaise ou non, vous devrez saisir le texte approprié, car il apparaîtra comme signature sous l'image agrandie.
Vous pouvez simplement définir une numérotation par page s'il y a beaucoup d'images.
Une autre particularité est que le script n'agrandit pas tout, mais uniquement les images que vous pointez.
Confortable? Confortable. Après tout, si une image dans sa taille originale s'adapte parfaitement à la page, alors pourquoi l'agrandir.
Passons à l'installation.
Vous pouvez obtenir le zip avec le script entièrement gratuitement en le téléchargeant simplement depuis mon disque Yandex. Télécharger
Après cela, vous devez le télécharger à la racine du site. Le dossier principal est le dossier qui contient wp-admin, wp-content, etc.
Nous téléchargeons le zip via FTP, le décompressons, après quoi trois fichiers et un dossier apparaissent dans le répertoire.
Le dossier zip doit être supprimé. De plus, vous devez maintenant supprimer, s'il y en avait, un plugin qui agrandit les images.
L'action suivante doit être effectuée dans le fichier footer.php. Vous pouvez parcourir wp-content - thèmes - Votre thème - footer.php sans quitter le serveur.
Ou vous pouvez accéder à la console du site, puis à Apparence - Éditeur - footer.php ou Footer. Et ceci et cela est possible.
Dans ce fichier, tout à la fin, avant la balise, vous devez insérer le code suivant :
(fonction())(
var boîtes=,els,i,l;
si(document.querySelectorAll)(
els=document.querySelectorAll("a");
Boîte..css");
Boîte..js",fonction())(
simplebox.init();
pour(i=0,l=els.length;i
