当前位置：文江博客话题详情

动态图库

发布于 2024-08-14 18:00:56 字数 2690 浏览 2 评论 0 原文

大家好，我的第一篇文章：D

问题：

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

它需要从选定的目录中读取所有图像文件。（jpg、gif、png、bmp）它需要能够在不更改任何代码的情况下更新内容。（从文件夹动态加载）它需要将 img 标签写入查看的页面。（使用 JavaScript 进行定制/CSS？）

从 php/JavaScript 输出的一组 img 标签需要是缩略图，单击该缩略图将链接到完整的默认图片，这可以在最初创建链接时使用 JavaScript 来处理。

进展：

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

例子：

root/index.htm-pastebin[.]com/m52568ed5
root/images/getimages.php-pastebin[.]com/f5395a572
根/images/pic01.png
根/images/pic03.jpg
根/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>")
 }
}

预先感谢，布雷登。

编辑：这是我的沙箱来显示发生了什么

-编辑：删除链接

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

<!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，我认为我做得还不错。

原文

Hey all, my first post :D

Problem:

I'm trying to make a template gallery, not a slide show, which i can easily reuse on multiple sites.
Mostly for quick folio sites, where the owner wont know how to update the code to add pictures.

It needs to read all of the image files from a selected directory. (jpg, gif, png, bmp)
It needs to be able to update content without any code changes. (dynamic load from folder)
It needs to write out img tags to the viewed page. (using JavaScript for customization/css?)

The set of img tags output from the php/JavaScript need to be thumbnails which when clicked will link to the full def pictures, this can probably be handled with JavaScript when making the links initially.

Progress:

I found a php script that will read the files from a folder and save the urls to an array for use in JavaScript.
However the code used to display the picture is done as a single block slide show, where as i need it to post all images separately not just replace the src of the same image.

Example:

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

So how do i get JavaScript to loop through the galleryarray[curimg] and write out my links?

I got this far, and got stuck.

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>")
 }
}

Thanks in advance, Braden.

EDIT:
heres my sandbox to show whats going on

-EDIT: removed link

No matter how i change the output per item for example if i replace the whole section with a simple echo all i ever get is the following:

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

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

Seems like it gets stuck when it tries to run the 'foreach()'

Heres the current 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>';

considering as i have Never done php before i started this, i think im doing ok.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凡间太子 2024-08-21 18:00:56

非常简单的自动图库脚本，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>';

我还使用 lightbox 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 脚本的输出将位于标签之间。

Very simple auto gallery script, 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>';

Also I use the lightbox jQuery plugin to make this gallery comfortable to view.

And also managing photos for this page is very-very simple - you just need to upload .jpg files to your photos directory ('/foto/', for this example).

index.php:

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

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

This file will include photos.php file and runs it, output of photos.php script will come between tags.

回复收藏 0 原文

对你而言 2024-08-21 18:00:56

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

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

编辑：看看你的pastebin，看起来你误解了PHP 的工作原理。将不起作用，因为脚本标签是在客户端读取的。 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 教程，它将真正帮助您完成此任务。对于 JavaScript 也是如此。你可以不断地问这一切是如何运作的，但你永远不会真正理解它，也无法弄清楚如何将所有这些部分组合在一起。只要给它几个小时！

You can use PHP to write out the img tags.

Also, your for loop will run infinitely, because it has an end condition which is always true.

EDIT: Looking at your pastebin, it looks like you've misunderstood how PHP works. <script src="res/getimages.php"></script> will not work, as script tags are read on the client side. PHP is run on the server side. To run res/getimages.php, you'll have to do something like:

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

I would highly recommend working through a quick tutorial, such as the W3Schools PHP Tutorial, which will really help you through this. Same for JavaScript. You can keep asking questions about how this all works, but you'll never really understand it, and won't be able to work out how to put all the bits together. Just give it a few hours!

回复收藏 0 原文

魂ガ小子 2024-08-21 18:00:56

感谢所有提供帮助的人，非常感谢谢尔盖·库涅佐夫（Sergey Kunetsov）的画廊脚本，经过轻微修改后效果非常好。

对于任何想要它的人来说，这是最终的工作 php。

http://pastebin.com/f442f31f3

显示的文件夹是 $path。

享受，并再次感谢。

回复收藏 0 原文

~没有更多了~

关于作者

折戟

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

动态图库

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

动态图库

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。