Fork me on GitHub




(1) 2 »


seboseboss
Script javascript qui ne se répète pas, pourquoi?
#1
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Salut

J'ai une colle pour vous, moi je suis largué.

Je suis en train de refaire le design de xoopstube et j'ai appliquer une class sur les images des listes pour les mettres en background dans une box avec un effet de profondeur.

Pour le ccs3 pas de soucis c'est au niveau du javascript que ça coince voici un petit screen pour que vous compreniez ce que je veut dire quand je dit javascript qui ne se répète pas.

Open in new window

Comme vous pouvez le voir sur l'image le script fonctionne uniquement sur la dernière image de la liste mais pas sur toutes les autres au dessus, pourtant c'est la même morceau de code qui est répété plusieurs fois d'ou mon incompréhension .

le javascript concerné:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="xoopstube_image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>


Qui s'applique à ce morceau de code html dans le template videoload.html:

<div class="xoopstube_image-wrap" itemprop="thumbnailUrl" style="float: left; padding: 0 4px 4px 0;">     <{if $video.screen_shot}>     <a href="<{$xoops_url}>/modules/<{$video.module_dir}>/singlevideo.php?cid=<{$video.cid}>&lid=<{$video.id}>" target=""><span><{$video.videothumb}></span></a>     <{/if}> </div>


J'ai inséré le code javascript juste au dessus du morceau de code html.


Si vous connaissez bien le javascript contrairement à moi, je veut bien une explication.

Merci bien

EDIT: rectification ça fonctionne parfaitement, c'est encore ce foutu cache de firefox qui ne se vide pas correctement quand jez fait ctrl+F5, toutes mes excuses.

Posté le : 08/06/2014 14:38
Partager Twitter Partagez cette article sur GG+
Rapport Haut
seboseboss
Re: Script javascript qui ne se répète pas, pourquoi?
#2
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Re

Bon finalement j'ai même plutôt le problème inverse c'est que cela s'applique à toutes les images de la page.
Je voudrais qu'il s'applique uniquement à la class xoopstube_image-wrap

Comment est ce que je peut faire

le soucie c'est qu'il n'accepte pas le <{$video.videothumb}> si je le met en background:url(<{$video.videothumb}>).

Y'a peut être une autre façon de faire, même certainement.

Posté le : 08/06/2014 16:07
Partager Twitter Partagez cette article sur GG+
Rapport Haut
montuy337513
Re: Script javascript qui ne se répète pas, pourquoi?
#3
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
ben normal que cela s'applique a toute les images vu que c'est ce que tu lui demande
$("img").load(function() {


essai avec
$(".xoopstube_image-wrap").load(function() {


je ne garantie pas que cela fonctionne car je ne sait pas ce que contient la variable smarty $video.videothumb

Posté le : 08/06/2014 19:24

Open in new window

Modules/hacks pour Xoops
Ressources pour webmaster
Partager Twitter Partagez cette article sur GG+
Rapport Haut
seboseboss
Re: Script javascript qui ne se répète pas, pourquoi?
#4
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Salut

J'ai essayé, ça n'a pas marché, mais je sais plus si j'avais mis le point au début, je vais refaire un essai.

Posté le : 08/06/2014 20:55
Partager Twitter Partagez cette article sur GG+
Rapport Haut
montuy337513
Re: Script javascript qui ne se répète pas, pourquoi?
#5
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
$(".xoopstube_image-wrap img").load(function() {


devrait aussi fonctionner (même principe que le CSS), mais pas du tout garantie, vu que dans ce cas, je travaillerai directement sur l'image en modifiant le script PHP qui gère le lien de l'image.

Posté le : 08/06/2014 21:01

Open in new window

Modules/hacks pour Xoops
Ressources pour webmaster
Partager Twitter Partagez cette article sur GG+
Rapport Haut
seboseboss
Re: Script javascript qui ne se répète pas, pourquoi?
#6
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Houeh bien vu

TRop cool ça marche avec ta deuxième solution- trop bien

Merci beaucoup, super

Posté le : 08/06/2014 21:10
Partager Twitter Partagez cette article sur GG+
Rapport Haut
seboseboss
Re: Script javascript qui ne se répète pas, pourquoi?
#7
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Par contre j'ai un problème de zoom l'image ne se cadre pas dans le wrap, il doit falloir ajouter quelque chose

Le redimenssionnement n'est pas pris en compte, il l'affiche au naturel

Posté le : 08/06/2014 21:12
Partager Twitter Partagez cette article sur GG+
Rapport Haut
montuy337513
Re: Script javascript qui ne se répète pas, pourquoi?
#8
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
<script type="text/javascript">
$(document).ready(function(){

  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="xoopstube_image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') center center; width: taille_pixelpx; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Tu remplaces la partie avec width: dans le code que tu as donné et tu remplace taille_pixel par la largeur de ton image que tu veux

Posté le : 08/06/2014 21:39

Open in new window

Modules/hacks pour Xoops
Ressources pour webmaster
Partager Twitter Partagez cette article sur GG+
Rapport Haut
seboseboss
Re: Script javascript qui ne se répète pas, pourquoi?
#9
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Re

Oui c'est ce que j'ai fait et ça ne change rien.
Ca réduit la taille du wrap mais l'image à l'intérieur garde le même ratio.

Décidément, quand ça veut pas ,ça veut pas.

Posté le : 08/06/2014 22:10
Partager Twitter Partagez cette article sur GG+
Rapport Haut
seboseboss
Re: Script javascript qui ne se répète pas, pourquoi?
#10
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Re

J'ai trouvé une alternative qui fonctionne,mes images se redimensionne bien maintenant mais j'ai un conflit entre les 2 script javascript qui s'éxécute sur la même page,j'ai éssayé jQuery.noConflict(); sans résultat, 1 seul fonctionne.

Faut peut être que je fasse un autre sujet car c'est pas le même problème.

La solution quand m^meme,j'ai créé 2 classes différente et j'ai utilisé un autre script jquery et le résultat est plutôt sympatique.

le code jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){      $('.xoopstube_image-wrap img').each(function() {         var imgClass = $(this).attr('class');         $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');         $(this).removeAttr('class');     });  }); </script>


Bah je vais aller demander sur un autre forum pour ce genre de soucis, je vous fait assez ch... comme ça.

Posté le : 09/06/2014 13:17
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

10 Personne(s) en ligne (7 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 10 | Plus ...