Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Code pour zoomer des images

1319 appréciations
Hors-ligne
à toutes et tous,
Je suis entrain de faire une mise à jour sur mon blog Graph Ô Soleil et je voudrais savoir si il existe un code html pour zoomer les images ?
Mes images viennent de ma boite à fichier et le nouveau composeur n'est pas actif dans certains de mes articles.
Je vous donne un exemple de mes articles où j'ai inséré un tableau, mais on ne peut faire que de cette façon :
Clic droit sur l'image puis faire "afficher l'image" et là on la voit en taille réelle.
Mais obligée de faire retour page web après l'avoir visionnée.
http://graphosoleil.blog4ever.net/fonds-fait-le-11-05-2014-sur-ton-rouge

pour votre aide

295 appréciations
Hors-ligne
Soleilvie
Quelque chose comme ça?  galerie de démo mais en restant sous format de tableau?
C'est ça?
Je ne pense pas que ce soit possible puisque le tableau redimensionne automatiquement les images pour qu'elles restent de tailles équivalentes quel que soit le format de l'écran. Du coup ça fais moche dans l'espace de création de l'article, et une fois sur le blog plus rien...

Dernière modification le jeudi 16 Février 2017 à 13:23:32

1319 appréciations
Hors-ligne
Kyû
Oui pour le principe mais regarde le tuto de notre grand ami (qui me manque terriblement)
http://papyclic-design.blog4ever.com/tutoriel-presentation-de-3-images-en-tableau
L'image du milieu est zoomable et donc on la voit en grand et on peut en cliquant sur la croix refermer la fenêtre qui s'est ouverte.
On peut insérer une image "zoomable" si on la prend de notre ordinateur mais si on l'insère de la boite à fichier on ne peut pas choisir "zoomable".
D'où ma recherche d'un code html pour pouvoir zoomer.

295 appréciations
Hors-ligne
aaaah attends je fais un test tou  de suite et je te dis ça dans la foulée!

295 appréciations
Hors-ligne
Re,

Pour avoir le même rendu dans ton tableau, il faut :
1. passer en html
2. remplacer ligne par ligne (je sais c'est un peu fastidieux)
<p><img src="lien de ton image" alt="alt de ton image" /></p>
(c'est ce que tu as actuellement)  par 
<a href="lien de ton image" class="zoomable" rel="photos_index_photos"><img src="lien de ton image" alt="alt de ton image" /></a>

3. sortir du html en validant
4. sauvegarder
et tu obtiendras ce que  à sur cette page :)
La taille de l'image "zoomée" sera celle de l'image de base dans ta boîte à fichiers.

Dernière modification le jeudi 16 Février 2017 à 14:03:47

1319 appréciations
Hors-ligne
Ahhh OK ! Oulala c'est long à faire. Tu as vu tous les fonds sur mon blog ? Purée je ne sais pas si je vais pouvoir  le faire. J'aurai préféré un code HTML  qui fasse toutes les images en  une seule fois.                                 

En tout cas ! Merci beaucoup 
Bisous

Dernière modification le jeudi 16 Février 2017 à 14:10:24

295 appréciations
Hors-ligne
Malheureusement les propriétés du tableau bloquent la chose
Peut-être qu'un (ou une) expert(e) pourra t'en dire plus 
Bisous

895 appréciations
Hors-ligne

les filles

Mettre ça dans le HTML DE L' ARTICLE . agrandir sur le hover


<!----agrandir images----->
<style type="text/css"><!--
#articles_show_contenu_article img:hover {
max-width: 130%;
height: auto;
         margin-left: -100px;  /* éviter chevauchement*/
}
--></style>



Dernière modification le jeudi 16 Février 2017 à 16:38:08


1319 appréciations
Hors-ligne
Kikou  je ne suis pas devant mon ordi. Tout à l'heure j'essaierai bisous

1319 appréciations
Hors-ligne


ça fonctionne super bien !
Je n'ai plus qu'à le mettre dans tous les tableaux pour les fonds.

895 appréciations
Hors-ligne
Merci également à Kyu pour son aide et sa gentillesse. 


1319 appréciations
Hors-ligne
OUIIIIIIIIIIII ! Tu as raison
GRAND Kyu 

895 appréciations
Hors-ligne
re

Essaies ce nouveau réglage.
Je me suis amusé et ça peut intéresser d'autre personnes.


<!----agrandir images----->
<style type="text/css"><!--
#articles_show_contenu_article img:hover {
    max-width: 120%; /* agrandissement*/
    height: auto;
    margin-left: -105px; /* retrait à gauche*/
    box-shadow: 5px 5px 20px 5px #000; /* ombre*/
    border: 2px dashed #fff;  /* bordure pointillée */
    transition-duration: 2s;  /* temps d'apparition */
}
--></style>




1319 appréciations
Hors-ligne
Ahhhh !!!!   le joueur

Franchement c'est génial !



895 appréciations
Hors-ligne
re

L'article est en brouillon ?


1319 appréciations
Hors-ligne
Non 

895 appréciations
Hors-ligne
SI SI !

Tu as dû cliqué dessus pour enregistrer la correction.
En tout cas il n'est pas visible sur le net



ARTICLE


1319 appréciations
Hors-ligne
Grrrrr peux tu le mettre en lignr, je suis allongée ds mon lit. Merci d'avance bisous

895 appréciations
Hors-ligne
OK C'EST FAIT !

Bonne nuit



628 appréciations
Hors-ligne
Bonjour,

Super génial  et  @Simon@

également à @Soleilvie@ et à @Kuy@


Bon dimanche.



Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits conseils.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5693 autres membres