尝试想出一种方法为每个图像动态添加文本


Trying to think of a way to dynamically add text for each image

我正在想办法实现这一点。

我使用一个jQuery幻灯片来显示图像,并使用一个简单的php脚本从用户选择的库的文件夹中提取图像:

    $handle = opendir(dirname(realpath(__FILE__)).'/../images/gallery/'.$gallery);
while($file = readdir($handle)){
    if($file !== '.' && $file !== '..'){
        $pictures .= '<img src="images/gallery/'.$gallery.'/'.$file.'" alt="" />';
    }
}

我这样做是因为有6个不同的画廊,每个画廊的照片数量各不相同,从大约25到40张不等。如果我静态地做这个网站,或者有一个数据库运行,那就没有问题,但我想不出用PHP来做这件事。

基本上,这里是我希望做的一个例子:我对所有的图像和文本进行了硬编码

但在这个页面上,我想不出一个好的方法来完成

您可以添加到每个文件夹文件中,如带有说明的info.txt。加载时检查file_exists()并从文件中获取数据。

如果你想为每张照片设置desc,你可以这样做:

对于文件:

  • 花.jpg
  • cloud.jpg
  • 女孩.jpg

info.txt:

flower.jpg::This is flower
cloud.jpg::This is cloud
girl.jpg::This is girl

所以你读了info.txt,按行分解,最后按行分解。结果得到了一个包含描述和文件名的数组。

可能不是最好的方法,但下面是我完成它的方法:`我重命名了这些图像:01-A Bird,02-A Cat

$handle = opendir(dirname(realpath(__FILE__)).'/../images/gallery/'.$gallery);
while($file = readdir($handle)){
    if($file !== '.' && $file !== '..'){
        $alt = substr($file, 3, -4); //Removes the "##-" and the ".jpg"
        $id = substr($file, 0, 2); // Removes EVERYTHING after the "##"
    // The image
        $pictures .= '<img src="images/gallery/'.$gallery.'/'.$file.'" alt="'.$alt.'" data-caption="#cap'.$id.'" />';
    // The text
        $span .= '<span class="caption" id="cap'.$id.'">'.$alt.'</span>';
    }
}`