在故事中动态添加图片

Question

我正在网站上展示一个故事，我想在故事中动态地添加一张图片，我该怎么做？

我不想将其添加在故事的开头或结尾，而是想在故事中间动态地嵌入它，并使用左浮动或右浮动。

我正在使用PHP和jQuery，故事中可能也有HTML。如果我有这样的一个故事，我该如何嵌入图片？

Nullam nibh lorem, aliquam sed sodales sed, egestas at tortor. Curabitur commodo urna non elit scelerisque ac rutrum tellus interdum. Phasellus arcu leo, congue eu ultrices vitae, pulvinar vitae neque. Sed tempor dolor eu eros aliquet in egestas metus bibendum. Etiam eleifend tellus vitae purus consectetur eget venenatis ligula cursus. In hac habitasse platea dictumst. Nulla in elit erat. 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. Mauris tempor laoreet quam vel tristique. Donec ultrices porttitor sapien, eu consectetur tortor rhoncus eget. Nulla vehicula magna nisi. Aenean consectetur placerat laoreet. Praesent blandit 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 vehicula velit et neque eleifend sit amet eleifend leo euismod。

- John

---

那就是，每个故事可能很长或很短。我在尝试寻找一种动态的方式来做这件事。 - John

@Pekka 好的，假设在100个字符之后。 - John

文本中可以包含HTML标签吗？因为这会变得棘手。 - Pekka

创建一个变量，对一个特定的区域/DIV 进行 .split(' ')（空格）处理，并计算其长度，然后除以2——这里就是我们故事中 'middle-space' 的位置。从隐藏的 Div 中克隆图像的正确位置。不要计算字符，因为图像可能会插入到单词中间！ - Roko C. Buljan

在我看来，服务器端解决方案会更好得多 - 这样，图像将被索引，即使关闭JS也可以工作等。 - Pekka

Answer 1

由于文章可能包含HTML，问题可能变得非常混乱。以下算法将在文章的任意百分比处插入一张图片，并确保它不在HTML标记内。请注意，它以简单为代价牺牲了效率。

警告：此代码仍然可能在某些不应该出现的位置插入图像标记，这取决于文章允许的HTML内容。例如，如果允许使用行内script标记¹，则该算法可能会产生“有趣”的效果。 ;)

在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。

---

¹ 如果允许使用内联的script标签，那么你肯定有更大的问题需要解决。

- Brock Adams

Answer 2

在故事的中间某个地方放置一个隐藏的 div，然后尝试这样做...

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


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

- Vivek

---

但是如果文本来自CMS，他将如何将隐藏的div放入其中？ - Pekka

Vivek，这是一个超时问题。我们需要将一些图像放置在故事的中间位置。 - Roko C. Buljan

@roXon-同意！！！...但是OP说他想在一段时间后显示图像，所以我使用了setTimeOut。 - Vivek

我在上面的评论中提到，拆分并计算空格数量，除以2，这样我们的文本故事中间就会有一个空格。有什么想法吗？（我在移动设备上） - Roko C. Buljan