安卓开发垂直滚动 xml_图像流–使用XML创建时尚的滚动相册

最新推荐文章于 2022-10-11 14:28:51 发布

cukeoumuqian0413

最新推荐文章于 2022-10-11 14:28:51 发布

阅读量128

点赞数

文章标签： html css python js less ViewUI

原文链接：https://www.script-tutorials.com/image-flow-creating-photo-album-using-xml/

版权

安卓开发垂直滚动 xml

Photo album tutorial. Today I will tell you how to create photo album using one old library (Image flow). Long time ago I took its from http://www.dhteumeuleu.com. In that time I was very impressed with its. Hope that you will love this too.

相册教程。今天，我将告诉您如何使用一个旧库创建相册(图像流)。很久以前，我从http://www.dhteumeuleu.com上获取了它。在那个时候，我对它印象深刻。希望你也会喜欢这个。

What is most important – that it allow to load xml set of images which you can provide via PHP file. So just imagine, that in your script (or even possible – CMS), you will able to generate different galleries based on different params. As example photo galleries of different members.

最重要的是–它允许加载可通过PHP文件提供的xml图像集。想象一下，在脚本(甚至可能是CMS)中，您将能够基于不同的参数生成不同的图库。例如，不同成员的照片画廊。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。这是我们示例的源代码：

index.html (index.html)

<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/image-flow.css" type="text/css" />
<script src="js/image-flow.js"></script>
<script language="javascript" type="text/javascript">
    imf.create("imageFlow", 'feed.php', 0.85, 0.20, 1.5, 10, 5, 5);
</script>
<div class="example">
    <h3><a href="#">Image flow sample</a></h3>
    <div>
        <div id="imageFlow">
            <div class="text">
                <div class="title">Loading</div>
                <div class="legend">Please wait...</div>
            </div>
            <div class="scrollbar">
                <img class="track" src="images/sb.gif" alt="">
                <img class="arrow-left" src="images/sl.gif" alt="">
                <img class="arrow-right" src="images/sr.gif" alt="">
                <img class="bar" src="images/sc.gif" alt="">
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/image-flow.css" type="text/css" />
<script src="js/image-flow.js"></script>
<script language="javascript" type="text/javascript">
    imf.create("imageFlow", 'feed.php', 0.85, 0.20, 1.5, 10, 5, 5);
</script>
<div class="example">
    <h3><a href="#">Image flow sample</a></h3>
    <div>
        <div id="imageFlow">
            <div class="text">
                <div class="title">Loading</div>
                <div class="legend">Please wait...</div>
            </div>
            <div class="scrollbar">
                <img class="track" src="images/sb.gif" alt="">
                <img class="arrow-left" src="images/sl.gif" alt="">
                <img class="arrow-right" src="images/sr.gif" alt="">
                <img class="bar" src="images/sc.gif" alt="">
            </div>
        </div>
    </div>
</div>

As you can see – initialization is pretty easy, here are constructor: ImageFlow(oCont, xmlfile, horizon, size, zoom, border, start, interval)

如您所见–初始化非常容易，这里是构造函数：ImageFlow(oCont，xmlfile，horizon，size，zoom，border，start，interval)

So for our sample I used: imf.create(“imageFlow”, ‘feed.php’, 0.85, 0.20, 1.5, 10, 5, 5);

因此，对于我们的示例，我使用了：imf.create(“ imageFlow”，'feed.php'，0.85，0.20，1.5，10，5，5);

It mean that we will using ‘feed.php’ as XML source of our images, and few other params for horizontal position, sizes, zoom etc.

这意味着我们将使用“ feed.php”作为图像的XML源，并使用一些其他参数来表示水平位置，大小，缩放等。

步骤2. CSS (Step 2. CSS)

Here are used CSS files:

以下是使用CSS文件：

css / main.css (css/main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}

css / image-flow.css (css/image-flow.css)

#imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:600px}
#imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor}
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px}
#imageFlow .text{position:absolute;left:0;width:100%;bottom:16%;text-align:center;color:#FFF;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000}
#imageFlow .title{font-size:.9em;font-weight:700}
#imageFlow .legend{font-size:.8em}
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000}
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3}
#imageFlow .arrow-left{position:absolute}
#imageFlow .arrow-right{position:absolute;right:0}
#imageFlow .bar{position:absolute;height:16px;left:25px}
#imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000}
#imageFlow a:hover,#imageFlow a:visited:hover{text-decoration:none;background:#ff8000;color:#fff}

#imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:600px}
#imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor}
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px}
#imageFlow .text{position:absolute;left:0;width:100%;bottom:16%;text-align:center;color:#FFF;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000}
#imageFlow .title{font-size:.9em;font-weight:700}
#imageFlow .legend{font-size:.8em}
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000}
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3}
#imageFlow .arrow-left{position:absolute}
#imageFlow .arrow-right{position:absolute;right:0}
#imageFlow .bar{position:absolute;height:16px;left:25px}
#imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000}
#imageFlow a:hover,#imageFlow a:visited:hover{text-decoration:none;background:#ff8000;color:#fff}

步骤3. JS (Step 3. JS)

Here are our main library JS file:

这是我们的主库JS文件：

js / image-flow.js (js/image-flow.js)

No need to give full code of that file here, it pretty big. It always available as a download package.

无需在此处提供该文件的完整代码，它非常大。它总是作为下载包提供。

步骤4. PHP (Step 4. PHP)

Here are code of our XML generator:

以下是我们的XML生成器的代码：

feed.php (feed.php)

<?
$sCode = '';
$sTemplate = <<<XML
<img>
    <src>{fileurl}</src>
    <title>{title}</title>
    <caption>{album_title}</caption>
</img>
XML;
$aUnits = array('img1.jpg' => 'Image 1', 'img2.jpg' => 'Image 2', 'img3.jpg' => 'Image 3', 'img4.jpg' => 'Image 4', 'img5.jpg' => 'Image 5');
foreach ($aUnits as $sFilename => $sTitle) {
    $sCode .= strtr($sTemplate, array('{fileurl}' => 'data_images/' . $sFilename, '{title}' => $sTitle, '{album_title}' => 'my album'));
}
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" ?>
<bank>
    {$sCode}
</bank>
EOF;
?>

<?
$sCode = '';
$sTemplate = <<<XML
<img>
    <src>{fileurl}</src>
    <title>{title}</title>
    <caption>{album_title}</caption>
</img>
XML;
$aUnits = array('img1.jpg' => 'Image 1', 'img2.jpg' => 'Image 2', 'img3.jpg' => 'Image 3', 'img4.jpg' => 'Image 4', 'img5.jpg' => 'Image 5');
foreach ($aUnits as $sFilename => $sTitle) {
    $sCode .= strtr($sTemplate, array('{fileurl}' => 'data_images/' . $sFilename, '{title}' => $sTitle, '{album_title}' => 'my album'));
}
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" ?>
<bank>
    {$sCode}
</bank>
EOF;
?>

As you can see – I just generate easy XML feed using some template. You can do this with your images and using different paths to images too. Plus – you can have custom album title too.

如您所见–我只是使用一些模板来生成简单的XML feed。您可以对图像进行此操作，也可以使用不同的图像路径。另外–您也可以自定义相册标题。

步骤5.图片 (Step 5. Images)

Here are necessary images for gallery itself (for navigation):

这是图库本身(用于导航)的必要图像：

And, all source images I put to ‘data_images’ folder. This can be any other your folder of course. Just don`t forget to correct feed.php in this case too.

而且，我将所有源图像都放在“ data_images”文件夹中。当然，这可以是您的任何其他文件夹。只是不要忘了在这种情况下也要更正feed.php。

现场演示

结论 (Conclusion)

Today I told you how to build new type of dhtml gallery. Sure that you will happy to use it in your projects. Good luck!

今天，我告诉您如何构建新型的dhtml画廊。确保您将乐于在项目中使用它。祝好运！

翻译自: https://www.script-tutorials.com/image-flow-creating-photo-album-using-xml/

安卓开发垂直滚动 xml

cukeoumuqian0413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
安卓开发垂直滚动 xml_图像流–使用XML创建时尚的滚动相册

安卓开发垂直滚动 xmlPhoto album tutorial. Today I will tell you how to create photo album using one old library (Image flow). Long time ago I took its from http://www.dhteumeuleu.com. In that time I was very...
复制链接

扫一扫