Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

AwesomeBB : Zoom au clic sur image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu AwesomeBB : Zoom au clic sur image

Message par *Splash* Mar 14 Aoû 2018 - 11:57

Hi,

Lorsque l'on clique sur une image insérée dans un post nous sommes redirigés vers Servimg, ou autre selon l'hébergeur.
Existe-t-il un moyen d'installer un code js pour qu'au clic on reste sur le forum et que l'image s'affiche en taille réelle ?

Merci d'avance

EDIT

J'ai trouvé une alternative avec un zoom au passage de la souris sur l'image.

Code CSS :
Code:
/* zoom au passage de la souris */
.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.50); /* Safari et Chrome */
-moz-transform:scale(1.50); /* Firefox */
-ms-transform:scale(1.50); /* Internet Explorer 9 */
-o-transform:scale(1.50); /* Opera */
transform:scale(1.50);
}
/* fin du zoom */

Pour que cela soit fonctionnel il faut mettre l'url de l'image à l'intérieur d'une div, ce code :

Code:
<div class=zoom>
 <div class=image>
 <img src=img.jpg>
 </div>
</div>

Reste à intégrer cette div dans un js pour n'avoir qu'à poster l'url de l'image seule et profiter du zoom


Dernière édition par *Splash* le Sam 18 Aoû 2018 - 10:09, édité 1 fois
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par *Splash* Mer 15 Aoû 2018 - 12:10

AwesomeBB : Zoom au clic sur image Arrow_11
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par *Splash* Jeu 16 Aoû 2018 - 19:46

AwesomeBB : Zoom au clic sur image Arrow_11
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par *Splash* Ven 17 Aoû 2018 - 18:52

AwesomeBB : Zoom au clic sur image Arrow_11
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par Milouze14 Ven 17 Aoû 2018 - 19:43

Hello *Splash*,

tu peux tester ce script stp


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches Sur les sujets

Déposes ceci:
Code:

$(function(){
$('.post-content').find('img:not(longdesc)').each(function(){
var a=$(this).closest('a').length;
if(a)
{
$(this).closest('a').removeAttr('href'); 
 
}
});});



Penses à cliquer sur le bouton VALIDER


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6550
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par *Splash* Ven 17 Aoû 2018 - 20:12

Hi Milouze,

Non ce js n'active pas le zoom
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par Milouze14 Ven 17 Aoû 2018 - 20:14

Re,
même sans le zoom cher ami Confused .

Le script désactive le lien des images ...

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6550
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par *Splash* Ven 17 Aoû 2018 - 20:17

Ah OK

Ce que je cherche à faire c'est mettre cette div dans un js pour avoir un zoom sur image
Code:
<div class=zoom>
 <div class=image>
 <img src=img.jpg>
 </div>
</div>
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par Milouze14 Sam 18 Aoû 2018 - 5:02

Hello *Splash*,

ce script alors:
Code:

$(function(){
  var e=$('<div class=zoom><div class=image></div></div>');
$('.post-content').find('img:not(longdesc)').each(function(){
var a=$(this).closest('a').length;
if(a)
{
$(this).closest('a').removeAttr('href').wrap(e); 
 
}
});});

Le résultat sur un message sera:
Code:

<div class="zoom">
<div class="image"><a target="_blank" rel="nofollow"><img src="https://i.servimg.com/u/f18/18/21/41/30/warn-f10.png" alt=""></a></div></div>


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6550
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : Zoom au clic sur image

Message par *Splash* Sam 18 Aoû 2018 - 6:11

Super, Merci Milouze
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3798
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum