带有 html 内容和图像的 fancybox 幻灯片

Question

我正在尝试创建结合了 html 的幻灯片（此 html 使用htmlentities($model->text,ENT_QUOTES, "UTF-8");) 和图像进行编码。但有时 html 很复杂，因此会中断。意味着它的标签不在标签中。

在下面的示例幻灯片中，最后一张幻灯片放映中断。

<?php
$res_data = array(
    array('type'=>1,'text'=>'https://www.pexels.com/photo/garden-landscaping-tourists-people-24823/'),
    array('type'=>2,'text'=>'&lt;p style="font-style:normal;margin:0px 0px 15px;padding:0px;text-align:justify;font-family:'Open Sans', Arial, sans-serif;font-size:14px;background-color:rgb(255,255,255);"&gt;&lt;b&gt;Lorem ipsum dolor sit amet&lt;/b&gt;, consectetur adipiscing elit. Nunc aliquam, sem a sagittis pretium, nisl enim dictum ipsum, ac venenatis est nunc quis erat. Nam sit amet malesuada eros, eget tempus ligula. Aenean dignissim, massa vel lobortis ornare, sem mauris auctor mauris, vel ultrices libero lacus at lacus. Fusce lacinia elit nec nunc eleifend porta id a est. Nulla accumsan dignissim odio, quis mollis ipsum malesuada vel. Duis ut risus eleifend, vestibulum sem ac, condimentum tellus. Duis nec ex leo. Integer non lacus velit. Curabitur id lorem vitae tortor convallis efficitur sit amet at mauris. In suscipit mattis tempor. Vivamus risus nisi, dapibus elementum eros vel, ultrices cursus augue. Integer urna felis, pulvinar quis mollis posuere, sollicitudin quis turpis. Phasellus eget maximus purus, eget rhoncus arcu. Fusce mauris dui, scelerisque vitae condimentum sit amet, euismod volutpat sapien. Sed blandit nibh a eros euismod gravida. Sed consequat hendrerit sapien et cursus.&lt;/p&gt;&lt;p style="margin:0px 0px 15px;padding:0px;text-align:justify;font-family:'Open Sans', Arial, sans-serif;font-size:14px;background-color:rgb(255,255,255);"&gt;&lt;b&gt;&lt;u&gt;&lt;i&gt;Morbi facilisis sed diam et tincidunt. Sed nisl purus, ornare ac ligula nec, dignissim commodo sem. Pr&lt;/i&gt;&lt;/u&gt;&lt;/b&gt;&lt;span style="font-style:normal;font-weight:normal;"&gt;aesent vel elit dictum, consequat mauris a, placerat neque. Sed purus sem, imperdiet finibus libero eget, vehicula ultrices nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mollis nibh at nisi aliquet, sed fermentum dolor varius. Duis nunc nulla, accumsan non urna non, accumsan fringilla purus. Nam feugiat rutrum lectus quis bibendum. Nulla quis arcu orci. Sed iaculis nunc nisl, pulvinar imperdiet tortor varius in. Ut posuere felis quis dolor euismod malesuada. Suspendisse aliquam gravida tincidunt. In ac ligula nec ipsum tempus elementum nec nec est.&lt;/span&gt;&lt;/p&gt;'),
    array('type'=>2,'text'=>'&lt;h2 style=&quot;margin:1em 0px;padding:0px;border:0px;font-size:18px;vertical-align:baseline;background:rgb(255,255,255);color:rgb(68,68,68);font-family:Arial, sans-serif;&quot;&gt;Resources&amp;nbsp;&lt;a class=&quot;anchor&quot; href=&quot;http://www.yiiframework.com/extension/cleditor#hh3&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p style=&quot;margin:0px 0px 20px;padding:0px;border:0px;font-size:14px;vertical-align:baseline;background:rgb(255,255,255);color:rgb(34,34,34);font-family:Arial, sans-serif;&quot;&gt;&lt;strong style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;&quot;&gt;en-US&lt;/strong&gt;&lt;br&gt;*&amp;nbsp;&lt;a href=&quot;http://premiumsoftware.net/cleditor/index.html&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;CLEditor resource page&lt;/a&gt;. Plese follow to see available options.&lt;br&gt;*&amp;nbsp;&lt;a href=&quot;http://premiumsoftware.net/cleditor/index.html&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;Try out a demo&lt;/a&gt;, from author plugin.&lt;br&gt;*&amp;nbsp;&lt;a href=&quot;http://www.yiiframework.com/forum/index.php?showtopic=13121&amp;amp;st=0&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;Discussion &amp;amp; Bug report&lt;/a&gt;.&lt;/p&gt;&lt;p style=&quot;margin:0px 0px 20px;padding:0px;border:0px;font-size:14px;vertical-align:baseline;background:rgb(255,255,255);color:rgb(34,34,34);font-family:Arial, sans-serif;&quot;&gt;&lt;strong style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;&quot;&gt;pt-BR&lt;/strong&gt;&lt;br&gt;*&amp;nbsp;&lt;a href=&quot;http://premiumsoftware.net/cleditor/index.html&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;CLEditor&lt;/a&gt;. Siga este link para ver as op&ccedil;&otilde;es disponives.&lt;br&gt;*&amp;nbsp;&lt;a href=&quot;http://premiumsoftware.net/cleditor/index.html&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;Demonstra&ccedil;&atilde;o&lt;/a&gt;, p&aacute;gina do plugin do autor com exemplo.&lt;br&gt;*&amp;nbsp;&lt;a href=&quot;http://www.yiiframework.com/forum/index.php?showtopic=13121&amp;amp;st=0&quot; style=&quot;margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent;color:rgb(0,153,204);text-decoration:none;&quot;&gt;Discuss&atilde;o e Relato de Erros&lt;/a&gt;.&lt;/p&gt;&lt;p style=&quot;margin:0px 0px 20px;padding:0px;border:0px;font-size:14px;vertical-align:baseline;background:rgb(255,255,255);color:rgb(34,34,34);font-family:Arial, sans-serif;&quot;&gt;&lt;br&gt;&lt;/p&gt;&lt;p style=&quot;margin:0px 0px 20px;padding:0px;border:0px;font-size:14px;vertical-align:baseline;background:rgb(255,255,255);color:rgb(34,34,34);font-family:Arial, sans-serif;&quot;&gt;&lt;u&gt;DHaval&lt;/u&gt;&lt;/p&gt;'),

);
foreach ($res_data as $res) 
{
    if($res['type']==1)
    {
        ?>
        <a class="popup_fancybox" rel="gallery1">
            <img src="<?php echo $res['text']; ?>" alt="Image" />
        </a>        
        <?php 
    }
    elseif($res['type']==2)
    {
        ?>
        <a class="popup_fancybox" rel="gallery1">
            <?php echo html_entity_decode($res['text']);?>
        </a>
        <?php 
    }
}      
?>
<script>    
$(document).ready(function () {
    $ = jQuery.noConflict();
    $(".popup_fancybox").fancybox({        
        autoPlay: true,
        playSpeed: 1000,
        openEffect: 'none',
        closeEffect: 'none',
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: true,
        loop: true,
    }).click();   
});
</script>

请检查这个小提琴：http://jsfiddle.net/VNPzA/3699/

如何解决这个问题？

Answer 1

最后通过以下技巧解决了：

只需要在下面改一下

  <a class="popup_fancybox" rel="gallery1">
        <?php echo html_entity_decode($res['text']);?>
  </a>

与

 <div id="hid1" style="display:none">
        <h3><?php echo $res['text'];?></h3>
        <?php echo html_entity_decode($res['body_text'],ENT_QUOTES, "UTF-8");?>
 </div>

 <a class="popup_fancybox" rel="gallery1" href="#hid1">
 </a>

工作小提琴

http://jsfiddle.net/VNPzA/3700/