具有HTML內容和圖像的fancybox幻燈片

Question

我正在嘗試創建幻燈片，它是html的組合（這個html使用htmlentities($model->text,ENT_QUOTES, "UTF-8");)和圖像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/