动态图库

时间:2009-12-13 10:49:45

标签: php javascript image gallery

嘿所有,我的第一篇文章:D

问题:

我正在尝试制作模板库,而不是幻灯片,我可以轻松地在多个网站上重复使用 主要用于快速作品集站点,其中所有者不知道如何更新代码以添加图片。

需要从所选目录中读取所有图像文件。 (jpg,gif,png,bmp) 它需要能够在不更改任何代码的情况下更新内容。 (来自文件夹的动态加载) 它需要将img标签写出到查看的页面。 (使用JavaScript进行自定义/ css?)

从php / JavaScript输出的img标签集需要是缩略图,点击后会链接到完整的def图片,这可能是在最初制作链接时用JavaScript处理的。

进度:

我找到了一个php脚本,它将从文件夹中读取文件并将URL保存到数组中以便在JavaScript中使用。 然而,用于显示图片的代码是作为单个块幻灯片放映完成的,其中我需要它来单独发布所有图像而不仅仅替换相同图像的src。

示例:

  

root / index.htm - pastebin [。] com / m52568ed5
  root / images / getimages.php - pastebin [。] com / f5395a572
  根/图像/ pic01.png
  根/图像/ pic03.jpg
  root / images / asdfs.gif

那么我如何让JavaScript循环通过galleryarray [curimg]并写出我的链接?

我走了这么远,然后卡住了。

function rotateimages(){
 // document.getElementById("slideshow").setAttribute("src", "res/gallery/painting/"+galleryarray[curimg])
 // curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
 for (curimg=1;curimg!=0;curimg++;) {
 document.write("<div><img class='gallery' src='" + galleryarray[curimg] + "' /></div>")
 }
}

提前感谢,布拉登。


编辑: 继承我的沙箱以显示最新情况

  

-EDIT:已删除链接

无论我如何更改每个项目的输出,例如,如果我用一个简单的回声替换整个部分,我得到的是以下内容:

<!DOCTYPE html>
<html>
    <head>
        <title>My Gallery</title>
    </head>

    <body>
        <div id="gallery"></div>
    </body>
</html>

当它试图运行'foreach()'

时似乎卡住了

下面是当前的php:

<?php

function getDirTree($dir,$p=true) {
    $d = dir($dir);$x=array();
    while (false !== ($r = $d->read())) {
        if($r!="."&&$r!=".."&&(($p==false&&is_dir($dir.$r))||$p==true)) {
                $x[$r] = (is_dir($dir.$r)?array():(is_file($dir.$r)?true:false));
        }
    }

    foreach ($x as $key => $value) {
        if (is_dir($dir.$key."/")) {
                $x[$key] = getDirTree($dir.$key."/",$p);
        }
    }

    ksort($x);
    return $x;
}

$tree = getDirTree("./res/gallery/");

echo '<div id="gallery">';

foreach($tree as $element => $eval) {
    if (is_array($eval)) {

        foreach($eval as $file => $value) {
                if (strstr($file, "jpg")) {
                        $file = 'res/gallery/'.$element.'/'.$file;
                        echo 'test'; //test//echo '<a href="'.$file.'">test</a>'; //test// <img class="gallery" src="'.$file.'" alt="'.$file.'"/></a>';
                }
        }


    }
}
echo '</div>';

考虑到我在开始之前从未做过PHP,我认为我做得很好。

3 个答案:

答案 0 :(得分:4)

非常简单的自动图库脚本,photos.php:

<?php
function getDirTree($dir,$p=true) {
    $d = dir($dir);$x=array();
    while (false !== ($r = $d->read())) {
        if($r!="."&&$r!=".."&&(($p==false&&is_dir($dir.$r))||$p==true)) {
            $x[$r] = (is_dir($dir.$r)?array():(is_file($dir.$r)?true:false));
        }
    }

    foreach ($x as $key => $value) {
        if (is_dir($dir.$key."/")) {
            $x[$key] = getDirTree($dir.$key."/",$p);
        }
    }

    ksort($x);
    return $x;
}

$tree = getDirTree("./foto/");

echo '<div id="gallery">';
echo '<ul class="linone">';
foreach($tree as $element => $eval) {
    if (is_array($eval)) {
        echo '<li><h4>'.$element.'</h4>';
        echo '<ul class="linone photos">';
        foreach($eval as $file => $value) {
            if (strstr($file, "jpg")) {
                $file = 'foto/'.$element.'/'.$file;
                echo '<li><a href="'.$file.'"><img src="'.$thumb.'" alt="'.$thumb.'"/></a></li>';
            }
        }
        echo '</ul>';
        echo '</li>';
    }
}
echo '</ul>';
echo '</div>';

此外,我使用灯箱jQuery插件使这个画廊很容易查看。

此外,管理此页面的照片非常简单 - 您只需将.jpg文件上传到您的照片目录(对于此示例,为'/ foto /')。

的index.php:

<!DOCTYPE html>
<html>
    <head>
        <title>My Gallery</title>
    </head>

    <body>
        <?php require_once('photos.php') ?>
    </body>
</html>

此文件将包含photos.php文件并运行它,photos.php脚本的输出将介于标签之间。

答案 1 :(得分:0)

您可以使用PHP写出img标签。

此外,你的for循环将无限运行,因为它有一个始终为真的结束条件。

编辑:看看你的pastebin,看起来你误解了PHP是如何工作的。 <script src="res/getimages.php"></script>将无效,因为客户端会读取脚本标记。 PHP在服务器端运行。要运行res/getimages.php,您必须执行以下操作:

<?php //This is a PHP opening tag; anything after this is PHP code
include('res/getimage.php'); //Imports the PHP file into index.php
?> <!--this is the closing PHP tag - anything after this is HTML -->

我强烈建议您使用快速教程,例如W3Schools PHP Tutorial,这将真正帮助您完成此任务。 JavaScript也是如此。你可以不断询问有关这一切是如何工作的问题,但你永远不会真正理解它,并且无法弄清楚如何把所有的东西放在一起。请给它几个小时!

答案 2 :(得分:0)

感谢所有帮助过的人,非常感谢谢尔盖·库内佐夫(Sergey Kunetsov)的画廊剧本,经过轻微修改后完美无缺。

对于任何想要它的人来说,这是最后工作的PHP。

  

http://pastebin.com/f442f31f3

显示的文件夹是$ path。

享受,再次感谢。