Слайд-шоу fancybox с содержанием HTML и изображением

Я пытаюсь создать слайд-шоу, которое представляет собой объединение 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/

Как решить эту проблему?

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/

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]