Discussion :

[pierrot10]

Bonjour à tous,

Je cherche a faire un truc de compliqué..., pour moi.

Je dois mettre des images de maniere a ce qu'elles soient conforme a bootstrap. TinyMCE ne me permets pas de faire ceci, alors je cherche a faire un "hack"

J'ai ce code

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<pre class="Style1">
<img width="200" height="200" alt="Equipements sportifs" src="/files/Images/eqp-spotifs.png">
<img width="200" height="200" alt="Equipements sportifs" src="/files/Images/eqp-spotifs.png">
<img width="200" height="200" alt="Equipements sportifs" src="/files/Images/eqp-spotifs.png">
</pre>

J'aimerais faire en sorte que jQuery déterct la balise <pre> dans ma page.
S'il voit un <pre> qui englobe des images, comme ci-dessus,
J'aierais qu'il remplace
1. <pre> par <div class="row"> et </pre> par </div>
2. Qu'il compte le nombre d'image
3. et qu'il ajoute d'autres div autour des image
pour avoir au final

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!-- Dans le cas de trois images -->
<div class="row">
<div class="col-md-4 span4>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
<div class="col-md-4 span4>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
<div class="col-md-4 span4>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
</div>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<!-- Dans le cas de deux images -->
<div class="row">
<div class="col-md-6 span6>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
<div class="col-md-6 span6>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
 
</div>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!-- Dans le cas de 4 images -->
<div class="row">
<div class="col-md-3 span3>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
<div class="col-md-3 span3>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
<div class="col-md-3 span3>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
<div class="col-md-3 span3>
<img width="200" height="200" alt="Equipements sportifs" src="/sogemat/files/Images/eqp-spotifs.png">
</div>
 
</div>

etc.

Es-ce enorme de faire ce code?
Pourriez-vous mettre sur la piste des fonction jQuery a utiliser?

[pierrot10]

Ben étonnament j'y suis arrivé sans trop de dificulté. Je voyais ca comme une montagne, alors je partage, évidemment, ma solution.

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 // Rend les images conforme a Bootstrap
  $('pre').wrapInner("<div class='row makebootstrap'>")
  $('div.makebootstrap').unwrap('pre');
  var nb = 12/$( "div.makebootstrap img" ).size();
  console.log(nb);
  $('div.makebootstrap img').each(function(index){
    $( this ).wrap( "<div class='col-md-"+nb+" span"+nb+"'>" );
  });

Maintenant, j'aimerais bien savoir si c'est propre. Auriez-vous une meilleurs solutions?