Agrandir l'image lorsque vous cliquez sur html. Script pour agrandir les images dans WordPress. Installation d'un script pour agrandir les images

Bien sûr, il existe de nombreuses façons d'agrandir les images. Et utilise principalement des applications de scripts et de plugins. À mon avis, de telles méthodes sont justifiées dans le cas de ressources contenant un grand nombre de photos ou d'images. Mon blog n'est pas comme ça. Et, comme d'habitude, je m'engage sur le chemin du moindre investissement de temps, de connaissances et de ressources de mon site. Je vous propose un moyen d'augmenter...

Vous pouvez également être intéressé par :

Comment faire une ombre de texte en 5 minutes

Bonjour cher lecteur de mon blog. Dans cet article, vous apprendrez à créer une ombre de texte à l'aide de styles CSS et de code html en 5 minutes.

Comment faire des boutons haut-bas pour un site Web

Cet article est la suite de l'article sur la création d'un bouton haut pour un site Web.

Comment supprimer un message de la page d'accueil à l'aide de code

Bonjour cher lecteur de mon blog. J'avais besoin de cacher certains articles de la page principale. Ne le supprimez pas du tout de l'accès pour les lecteurs, mais supprimez ...

Suppression des entrées de catégorie de la page principale et RSS

Nous continuons d'améliorer la fonctionnalité et l'apparence du site. Nous supprimons les entrées inutiles de la page principale et RSS.

Fil d'Ariane sur wordpress

Bonjour à tous sur le site. Nous continuons à améliorer nos blogs pour gagner de l'argent. Je pense que ce n'est un secret pour personne qu'ils jouent un rôle énorme sur le site. Bien sûr, tout le monde ne comprend pas comment et après quelle heure ils commencent à influencer, mais le fait demeure. Pour améliorer ces facteurs, nous devons améliorer la convivialité du site : ajouter, améliorer le design, le rendre attrayant et simple. Faire le bon traitement des images sur le site. Beaucoup aimeraient connaître la réponse sur la façon de faire une image sur le site en cliquant sur laquelle elle s'agrandit. Cette augmentation est mise en œuvre sur mon site Web. D'accord assez agréablement pour que vous puissiez agrandir les images, voir toute la beauté en plein écran.

Aujourd'hui, je vais essayer de vous révéler ce secret du grossissement. En général, une image peut être agrandie par plusieurs actions :

• Par exemple, vous pouvez l'agrandir en survolant le bouton de la souris
• La deuxième option serait de zoomer lorsque vous appuyez dessus.

Bien sûr, si vous utilisez WordPress, l'option la plus simple et la plus simple serait de rechercher un modèle avec la fonction dont nous avons besoin, croyez-moi, il existe actuellement un grand nombre de ces modèles sur Internet. Ainsi, dans 95 % des cas, vous trouverez exactement un modèle avec une image agrandie. Mais que se passe-t-il si vous aimez ce thème particulier et souhaitez agrandir l'image uniquement sur celui-ci. Ou est-ce que vous écrivez même votre premier site sur un morceau de html, ce dont je doute fort bien sûr.

Nous connectons des scripts Java pour agrandir l'image

Le résultat final sera une image agrandie, par type. D'accord, tout cela est de la philosophie, afin d'agrandir l'image, nous devons connecter la bibliothèque jQuery. Je ne me souviens pas, mais il semble que dans une leçon j'ai écrit sur cette bibliothèque, mais si vous avez oublié, je vous le rappellerai. Pour connecter la bibliothèque, vous devez site insérez deux codes.

Il faut comprendre qu'il existe de nombreuses bibliothèques jQuery et que dans différents cas différentes bibliothèques sont connectées.

Si vous écrivez votre site en html nu, alors pour insérer une image vous aurez besoin de ce code

Veuillez noter que dans ce cas, vous devrez mettre votre image dans le dossier images et spécifier le nom de votre image. N'oubliez pas que les fichiers de la bibliothèque de scripts Java doivent être situés au même endroit que la page principale du site, sinon écrivez-leur simplement un chemin différent. Vous pouvez télécharger la bibliothèque de fichiers pour agrandir l'image sur le site. Eh bien, et le plus important maintenant, si vous souhaitez agrandir votre image, ajoutez-y les propriétés suivantes.

Salutations à tous les lecteurs du site de blog. Sur mon blog, la rubrique des articles publiés n'est pas étroite. Les captures d'écran et les images peuvent être placées dans de grandes tailles afin que tout y soit clairement visible. Et pourtant, l'autre jour, en commençant à rédiger une critique du programme Majento PositionMeter, créé pour vérifier la position d'un site dans les moteurs de recherche, j'ai voulu afficher une capture d'écran en plein écran.

Bien sûr, pas pour des raisons de beauté, mais pour les visiteurs du blog, la commodité des utilisateurs. Dans ma tirelire de connaissances se trouve une solution fiable toute prête, mais poussé par la curiosité, j'ai décidé de googler un peu sur Internet et de trouver quelque chose d'intéressant.

C'était comme dans "Crocodile Dundee" - la marche s'éternisait. Abandonné de l'horaire de travail, a violé toutes les limites fixées par lui-même pour les recherches. Eh bien, que Dieu le bénisse, j'espère que ce n'est pas en vain. Peut-être que mon travail sera utile à quelqu'un. J'attire votre attention sur deux bonnes solutions pour agrandir l'image lorsqu'on appuie dessus.

Je vais démontrer la deuxième solution sur mon blog. Malheureusement, contrairement à Alexander, vous devrez utiliser uniquement des captures d'écran du programme à titre d'exemple.

Agrandissement de l'image lorsque vous cliquez avec Highslide JS

En utilisant le script Highslide JS développé par la société norvégienne Highsoft AS, en plus d'agrandir l'image lorsque vous cliquez dessus, vous pouvez créer des galeries multimédias, des fenêtres contextuelles qui fonctionnent en html, ajax, Iframe et flash. Passons à l'action. Accédez à la page de téléchargement du script http://highslide.com, téléchargez la nouvelle archive et décompressez-la.

Trouvez le fichier avec l'extension d'index, ouvrez-le avec n'importe quel navigateur, une fenêtre avec des exemples apparaîtra. Choisissez celui dont vous aimez les effets visuels. Il existe cinq options prêtes à l'emploi pour configurer le script afin d'agrandir l'image lorsque vous cliquez dessus.

Créez un nouveau fichier texte sur le bureau, copiez les parties du code surlignées dans la capture d'écran dans des carrés rouges et verts à une petite distance les uns des autres. Modifions-les. Nous devrons placer le premier code sur les pages de notre site entre les balises head. De quoi est-il responsable ? Lisons les commentaires.

Le commentaire sous le numéro un dit que vous devez spécifier les chemins d'accès aux fichiers js et css, et ils doivent certainement se trouver sur notre serveur. Nous supprimons les commentaires, écrivons le chemin où se trouvera le répertoire avec les fichiers de script. Nous remplaçons tous les deux-points par le nom du répertoire téléchargé - highslide-4.1.13. Et nous remplacerons le fichier highslide.js par le fichier highslide-full.js, plus fonctionnel. Soudainement, à l'avenir, vous voudrez utiliser d'autres petits pains Highslide JS. Le deuxième commentaire dit qu'il est important de spécifier le chemin d'accès au répertoire avec les graphiques de script. Et qu'ici, vous pouvez modifier les paramètres. Il devrait s'avérer quelque chose comme ça.

Maintenant, le code fini doit être placé dans la section head avant la balise de fermeture. Sur mon blog WordPress, je l'ai placé dans le fichier footer.php du thème utilisé, avant la balise de fermeture

.

Commençons à éditer le deuxième code, que nous insérons directement dans les pages de texte pour agrandir l'image lorsque vous cliquez dessus. Pour plus de facilité d'utilisation, nous l'apporterons sous la forme suivante :

Ajouter du texte à l'image contextuelle

Jetons maintenant tout ce qui est inutile du répertoire highslide-4.1.13.

Recherchez le dossier highslide, ouvrez-le et supprimez tout sauf le dossier graphique et les fichiers inclus highslide-full.js, highslide.css, highslide-ie6.css. Placez highslide-4.1.13 dans le répertoire racine de votre site. Le script est prêt à partir. Vous pouvez remplir des images, placer le code du script sur la page et profiter de l'effet d'agrandissement de l'image lorsque vous cliquez.

Pour que le script Highslide JS fonctionne correctement dans WordPress, un problème doit d'abord être résolu. Lors du passage de l'éditeur html à l'éditeur visuel, une partie du code du script disparaît - onclick = "return hs.expand (this)".
Ouvrez le fichier functions.php du thème et ajoutez le code suivant ci-dessous, avant ?>.

// filtrer la fonction change_mce_options ($ initArray) ($ initArray ["verify_html"] = false; $ initArray ["cleanup_on_startup"] = false; $ initArray ["cleanup"] = false; $ initArray ["forced_root_block"] = false; $ initArray ["validate_children"] = false; $ initArray ["remove_redundant_brs"] = false; $ initArray ["remove_linebreaks"] = false; $ initArray ["force_p_newlines"] = false; $ initArray ["force_br_newlines"] = false; $ initArray ["fix_table_elements"] = false; $ initArray ["entities"] = "160, nbsp, 38, amp, 60, lt, 62, gt"; return $ initArray;) add_filter ("tiny_mce_before_init", "change_mce_options" );

Nous sauvegardons les modifications, le problème est résolu.

Pour faciliter l'utilisation du script pour agrandir les images au clic, vous pouvez ajouter des boutons supplémentaires à l'éditeur html de WordPress.

Boutons supplémentaires dans l'éditeur html pour Highslide JS

Ouvrez à nouveau le fichier functions.php du thème et collez le code suivant tout en bas, avant ?>.

// Boutons supplémentaires éditeur html add_action ("admin_print_footer_scripts", "add_sheens_quicktags"); fonction add_sheens_quicktags () (?>

Veuillez noter que dans le bouton mo1, j'ai défini la largeur d'affichage maximale autorisée des vignettes pour la largeur de mon blog = "730". Si j'ai besoin d'une vignette plus petite, je change simplement la valeur. Remplacez la largeur autorisée par votre valeur. Vous pouvez également régler la hauteur.

Enregistrez, allez dans l'éditeur de texte, voir ce qui suit.

Nous utilisons les boutons div, mo1, mo2, float-l, float-r, le code de script Highslide JS requis peut maintenant être affiché rapidement et facilement. Il reste à écrire le chemin d'accès aux images, à remplir le titre, alt et à écrire du texte supplémentaire pour les images.

Vous pouvez créer votre propre configuration de script à l'aide de l'éditeur Highslide JS. Je l'ai fait juste pour mon blog.

Utilisation de l'éditeur Highslide JS

Dans la colonne de gauche de la fenêtre ouverte du site des développeurs, accédez à l'éditeur Highslide JS en cliquant sur le bouton Éditeur. Une fenêtre s'ouvrira devant nous - Bienvenue dans l'éditeur Highslide.

Cliquez sur le bouton vert Démarrer !

Étape par étape sur la façon d'utiliser l'éditeur Highslide JS. Brèves recommandations.

L'onglet Général s'ouvrira par défaut.

Général

Langue

Au total, il y a 35 langues locales. Parmi celles-ci, il y a trois régions post-soviétiques. lituanien, russe, ukrainien. Il n'est pas difficile de faire une traduction dans la langue d'intérêt. Pour traduire un peu, ci-dessous vous comprendrez dans quel fichier tout cela se trouve. Nous choisissons la langue requise et passons à autre chose.

Exemple de chargement

Nous sélectionnons l'option pour afficher l'agrandissement de l'image lorsque vous appuyez dessus. Cliquez sur le bouton avec la flèche, des options apparaîtront dans la fenêtre contextuelle. On s'arrête à ce qu'on aime. Il n'y en a que quatre qui passent en premier. Le reste pour d'autres tâches - affichage de la galerie, fenêtres contextuelles. J'ai utilisé Pas de bordure, bouton de fermeture simple.

• Contour arrondi blanc
• Bordure blanche et ombre portée
• Pas de bordure, bouton de fermeture simple
• Pas de contour, bordures CSS colorées

Pour afficher l'une des options, cliquez d'abord sur l'image à droite, puis parcourez les effets. Choisissez celui que vous aimez et passez à l'onglet suivant. De plus, dans tous les paramètres, cliquez d'abord sur l'image à droite, puis, en utilisant les modifications apportées aux paramètres de l'éditeur, nous observons à quoi tout ressemblera visuellement.

Galerie et HTML

J'ai sauté ces deux points car ils ne sont pas inclus dans mes tâches pour le moment. Jusqu'à présent, je ne m'intéresse qu'à l'agrandissement de l'image lorsque vous appuyez dessus.

Style

La vignette
Étiquette d'explication

Personnalisez l'apparence et les effets de la vignette.

Trois réglages au choix. Vous pouvez afficher des astuces sous la vignette.

Aucun - aucun indice, Texte ci-dessous - avec texte explicatif, Icône et texte ci-dessous - avec une image et du texte. Il me semble que les indices sont superflus.

Bouton de bordure de vignette

En cliquant sur ce bouton, vous pouvez ajuster l'épaisseur et la couleur des bordures de la vignette.

Style d'étiquette

Nous mettons une coche dans l'aperçu et sélectionnons l'affichage de l'icône de téléchargement. C'est dans le cas où vous avez cliqué sur l'image, et son augmentation n'est pas pressée d'être montrée.
Styles de fenêtres contextuelles
Fond

Ici, vous pouvez modifier l'apparence de la fenêtre contextuelle. Modifiez l'arrière-plan de la légende de l'image. Modifiez la largeur et la couleur des bordures de l'image agrandie.
Atténuation
Appliquer un masque de gradation de page

Si vous souhaitez que l'arrière-plan de la page s'assombrisse lorsque vous cliquez sur l'image pour l'agrandir, cochez la case de ce paramètre. En cliquant sur Options de gradation, ajustez les options de gradation, sélectionnez une couleur.

Comportement

Dans Behavior, nous personnalisons le comportement de la popup.
Animation
L'assouplissement
Quatre options d'animation lors de l'affichage d'une image agrandie.

Bouton d'animation avancée

Réglez la vitesse d'apparition et de disparition de l'image agrandie.

Masquer la vignette lors de l'expansion (pas la galerie)

Si vous cochez la case à côté de cet élément lors de l'agrandissement de l'image, la vignette elle-même sera invisible.
Taille et alignement des fenêtres contextuelles
Ajustez la taille de la fenêtre d'agrandissement et son alignement.

Alignement

Nous sélectionnons l'option par défaut pour aligner l'image agrandie. J'ai choisi d'afficher une image agrandie sur la page - avto.

Bouton d'alignement avancé

En cliquant sur ce bouton, vous pouvez définir les paramètres de largeur et de hauteur pour la taille d'image minimale, maximale et fixe. Ajustez les marges - haut, droite, bas, gauche.

Superpositions

Ajout de texte à l'image agrandie.
Ma signature sur l'image agrandie, lorsque vous cliquez dessus, s'affichera en bas. Le titre sera affiché en haut. Dans les deux paragraphes, quatre sources identiques sont proposées à partir desquelles le texte avec une image agrandie est affiché. En utilisant le titre de l'image, le titre et l'alt de la vignette, et le texte auto-écrit suivant enveloppé dans un div.

Le titre est tiré du titre de la grande image, la signature est du texte enveloppé dans un div.

J'ai décoché les deux éléments suivants. Bouton Fermer - affiche une croix de fermeture dans le coin supérieur droit. Afficher les crédits - affiche un lien discret vers le site du développeur.

Nous avons réalisé ce que nous voulions, l'apparition de la fenêtre pop-up avec l'image convient, passons à autre chose.

Édition des fichiers du site, intégration de scripts

Nous connectons notre propre configuration de script en suivant les trois étapes recommandées.

Tout d'abord, ouvrez l'onglet Publier dans la fenêtre d'exemple, cliquez sur Oui, téléchargez l'archive avec votre propre configuration sur votre ordinateur en cliquant sur Télécharger une archive zip. Après cela, déballez-le et laissez-le tranquille pour le moment. Copiez le contenu de Step2 et Step3 dans le fichier texte créé pour une édition ultérieure, fermez la fenêtre.

Pour que le script fonctionne, nous devons spécifier directement les chemins d'accès aux fichiers, le dossier avec les graphiques et les styles CSS en écrivant le code dans la section head des pages du site. C'est le code copié à partir de l'étape 2, commençons à l'éditer. Dans mon cas, ça ressemblait à ça :

Hey! Cela se passe comme ceci : vous allez sur un blog, vous voyez un écran, et ce qu'il contient n'est pas du tout visible. Alors vous pensez que l'auteur de cet article voulait y montrer ? Mais il existe un moyen de sortir - un script pour agrandir l'image lorsque vous cliquez !

Chose très cool, ce script. Voyez par vous-même, augmente au clic :

(cliquable)

En fait, il existe de nombreux effets d'agrandissement d'image différents dans un article de blog, mais c'est à mon avis le meilleur effet.

A qui profitera ce script pour agrandir les images ?

1. Tout d'abord, ceux qui fait des captures d'écran avec des explications ... Par exemple, si vous décidez de prendre une capture d'écran volumineuse pour votre article, vous avez peint quelque chose là-bas, afin de rendre le contenu plus compréhensible, l'avez inséré dans l'article, mais cela ne rentre tout simplement pas complètement sur votre page de blog, ainsi wordpress se compressera automatiquement, afin de ne pas dépasser les limites de la page. Et après compression, la visibilité, la lisibilité sont fortement réduites. J'ai eu cela plus d'une fois, j'ai donc décidé d'utiliser ce script pour agrandir une image sans perdre en qualité.
2. Si vous venez de je ne veux pas publier d'images volumétriques dans l'article ... Il se trouve que vous devez afficher de nombreuses images dans un seul article, mais vous ne voulez pas que ces images prennent beaucoup de place, alors l'installation du script est la meilleure option ! Et en général, si vous ne souhaitez pas placer d'images volumétriques, ce script est simplement nécessaire.

Amende. Nous devons maintenant installer le script sur notre site. L'installation se fait en 3 étapes :

1. Téléchargez le script et chargez-le dans le répertoire racine de votre site.
2. Installez le code requis sur votre site Web.
3. Nous déposons l'image dans l'article et configurons son affichage.

Alors, commençons.

La deuxième étape que nous avons est l'installation du code du script. Où installer le code ? Peut être défini dans header.php, footer.php, function.php, index.php, mais je définis généralement footer.php, avant la balise

, pour que le code soit chargé en dernier.

Voici le code lui-même :

Et voici ce que j'ai :

(cliquable)

Vient maintenant la partie amusante.

Pour que le script agrandisse les images sans perte de qualité, vous avez besoin de :

1. Après avoir téléchargé l'image dans l'article, vous devez ouvrir "Options d'image" et au paragraphe " Lien" sélectionner " Fichier multimédia" .