fancybox slideshow with html content and image

Question

I am trying to create slideshow which is combine of html (this html is encoded using htmlentities($model->text,ENT_QUOTES, "UTF-8");) and images. But some times html is complex so it breaks. Means it's tags are not in tag.

In below example slide show is break for last one.

<?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>

Please check this fiddle: http://jsfiddle.net/VNPzA/3699/

How to resolve this issue?

Answer 1

Finally it is solved by using below trick:

Just need to change below

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

with

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

Working Fiddle

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