显示来自rss jquery的全屏图像

时间:2014-06-04 21:44:13

标签: javascript jquery html parsing rss

我正在搜索关于如何在点击它时显示img元素全屏的示例。 有人有想法吗?

以下是rss Feed parse的示例。

<channel>
<description><![CDATA[<ul>
  <li>
    Some text
  </li>
  some more text
</ul>
<div align="center">
  <iframe width="420" height="315" src="//www.youtube.com/embed/Xo73N23PJUw" frameborder="0" allowfullscreen></iframe>
  <img src="http://www.123.gr/diafora/2014/sakis-03-06-14.jpg" border="0"></a>
</div>
</description>
</channel>

我的代码

             <?php 
                $html = "";
                $url = "http://123.gr/index.php?format=feed&type=rss";
                $xml = file_get_contents($url);
                $x = new SimpleXmlElement($xml);



foreach ( $x->channel->item as $entry ){
                 ?>
                        }
                    <div data-role="collapsible" data-theme="b">
                        <h4><?php echo $entry->title; ?></h4>
                        <p><?php  echo $entry->description; ?></p>
                    </div>
<?php { ?>

2 个答案:

答案 0 :(得分:0)

这样就可以了。如果你得到额外的像素,只需尝试重置边距和填充。

.fullSize {
    top:0;
    left:0;
    position:absolute;
    width:100%;
    height:100%;
}

答案 1 :(得分:0)

我试图创造类似的东西。但是我不知道是否可能。

$entry->description = str_replace( '<img/i' , '<img id="imgtab" ', $entry->description);

脚本代码

<script>
            $(document).ready(function () {
            $("#imgtab").toggle(function () { //fired the first time
            $("#imgtab").animate({
                width: "1200px",
                height: "1116px"
            });
            }, function () { // fired the second time 
            $("#imgtab").animate({
                width:  "100%",
                height: "100%"
            });
            });
            });
        </script>