Geek asks and answers

Dynamically add an image in the middle of a story

I am showing a story on a website, I would like to dynamically add an image to the story, how could I do this?

I don’t want to add it at the beginning of the story or at the end of the story, but dynamically insert it somewhere in the middle of the story with a float left or right.

I use PHP and jQuery, and there may be HTML in this story. If I have such a story, how can I insert an image?

Nullam nibh lorem, aliquam sed sodales sed, egestas with a turtle. Curabitur como urna non elit scelerisque ac rutrum tellus interdum. Phasellus arcu leo, congue eu ultrices vitae, pulvinar vitae neque. Sed tempor dolor eeros aliquet at egestas metus Bibendum. Etiam eleifend tellus vitae purus consectetur eget venenatis ligula cursus. In hac habitasse platea dictumst. Nulla in the elite. Vestibulum mattis malesuada sapien quis sodales. Sed id tortor id odio mollis iaculis eu a sem. Morbi pellentesque lorem vitae ante molestie <img src="pathtoimage" style="float:left;">sit amet pulvinar lorem porta. Maurice quam vel tristique. Ultrasound Donec porttitor sapien, eu consectetur tortoise. Nulla vehicleula magna nishi. Aenean consectetur placebo laoreet. The devotee turns pale quam turpis, non egestas elit. Quisque dolor turpis, sollicitudin id elementum sit amet, sodales at metus. Duis tortor neque, scelerisque a adipiscing quis, blandit non velit. Donec mattis, nibh at pharetra porta, erat massa tempor quam, at hendrerit sem nibh sit amet magna. Sed auctor lectus ac magna accumsan commodo. Nam motor vehicles and other amet elefend leo euismod.

+3
source share
2 answers

HTML, . , HTML-. , .

: -, , , HTML. , inline script 1 "" .;)

live : jsbin.com/agimi5/3.

, <div id="StoryGoesHere">. , :

InsertImageInStory ("StoryGoesHere", 30, "F_left", "Image URL");

:

function InsertImageInStory (ContainID, PercentIn, LeftorRightClass, ImageURL)
{
    var storyContainer  = $("#" + ContainID);
    var storyHTML       = storyContainer.html ();
    var storyLen        = storyHTML.length;
    var targetCharPos   = (storyLen * PercentIn) / 100;

    /*--- Now Loop through the story until we reach the target character, WHILE
        making sure it isn't inside an HTML tag.
    */
    for (var J = 0, bInTag = false;  J < storyLen;  ++J)
    {
        if (storyHTML.charAt(J) == '<'  ||  storyHTML.charAt(J) == '>' )
            bInTag              ^= true;    //-- Toggle value.

        if (J < targetCharPos)  continue;

        /*--- We've found/passed the target position.  Insert the image just as soon
            as we are clear of any tags.
        */
        if (!bInTag)
        {
            var newStory    = storyHTML.substr (0, J+1);
            newStory       += '<img src="' + ImageURL + '" class="' + LeftorRightClass + '">';
            newStory       += storyHTML.substr (J+1, storyLen+1);

            storyContainer.html (newStory);
            break;
        }
    }
}

PHP, .


1 inline script, .

+1

div - .. ....

Html:  <div id="divid" float="left">


setTimeout(function() {$("#divid").append('<img src='img.gif'>').show()}, 10000);
0

More articles:


All Articles