Insérer une image après chaque x mots en utilisant jQuery

Je suis en train de le faire en utilisant le texte avec jQuery:Insérer une image après chaque x mots en utilisant jQuery

Example

je dois avoir un tableau et ajouter des images de lui dans un p chaque x balise mots. (x est un nombre aléatoire).

Avec jQuery il est facile de compter les mots:

var count = $("#example1").text().replace(/ /g,'').length;

Comment puis-je ajouter des images au hasard dans le texte?

Source

2012-05-07 mr.ani

Vous pouvez coller votre tableau dans http: // jsfiddle. net /. quel mot devez-vous remplacer par une image? – Thulasiram

Je ne veux pas remplacer mais ajouter une image après X mot. Je veux injecter dans mon texte des images d'un tableau –

Vous pouvez afficher votre tableau. peux-tu me donner un exemple? – Thulasiram

Vous devez remplacer tout le html (celui avec le texte uniquement) par le nouveau html, qui comprend des images:

html:

<div>one two three</div>

js:

var wordList = $("div").html().split(' '); 
var newHtml = ''; 

$.each(wordList, function(index, word){ 
    newHtml += ' ' + word; 
    if (index == 1) { 
    newHtml += '<img src="http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif" />'  
    }   
}); 
$('div').html(newHtml)

exemple sur jsfiddle

Source

2012-05-07 15:20:25 snies

Merci c'est génial !!!! –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#btnImage').on('click', function() { 
       var imageText = ['one', 'two', 'three']; 
       var imageArraySrc = ['http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif', 'http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif', 'http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif']; 
       var text = $('div#example1').text(); 

       $.each(imageText, function (i, value) { 
        text = text.replace(new RegExp(value, 'g'), value + ' <img src="' + imageArraySrc[i] + '" />'); 
       }); 

       $('div#example1').html(text); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="example1"> 
     one there two are is an image in this text . one two three. 
    </div> 
    <input type="button" id="btnImage" value="Click Me!" /> 
</body> 
</html>

Source

2012-05-08 08:22:53 Thulasiram

pour la démo en direct voir ce lien: http://jsfiddle.net/nanoquantumtech/rGFsD/ – Thulasiram

DEMO:

http://jsbin.com/ajowib/2/ - groupement d'images en boucle, la séquence 3, offset 2

http://jsbin.com/ajowib/ - Pas de boucle, la séquence 5, offset 3

HTML:

<div id="myText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

JavaScript:

jQuery(function($) { 
    var images = ["img1.png", "img2.png", "img3.png"], // Array to contains image url's 
     sequence = 5, // The sequence of witch the images is inserted 
     sequenceOffset = 3, // The offset from the start 
     loopImages = true, // If you want to loop throw your image array again and again    

     text = $("#myText").html().split(" "), 
     newText = [], 
     i = 0, y = 0, 
     len = text.length; 

    for(; i < len; i++) { 
     if ((i % sequence) === sequenceOffset) { 
      if (loopImages || y < images.length) { 
       newText.push("<img src='" + images[y%images.length] + "'/>"); 
       y++; 
      } 
     } 
     newText.push(text[i]); 
    } 

    $("#myText").html(newText.join(" ")); 
});

Source

2012-05-08 08:36:50 andlrc

Cette solution a fonctionné pour moi - et j'ai été capable de diviser le texte en colonnes, PLUS ajouter du contenu dans un curseur pour le texte très volumineux. Merci! Je fournirai le code complet une fois terminé. – Fraccus

Insérer une image après chaque x mots en utilisant jQuery

Répondre

Questions connexes