- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家好,我的第一篇文章:D
问题:
我正在尝试制作一个模板库,而不是幻灯片放映,我可以轻松地在多个站点上重复使用它。
主要用于快速作品集网站,所有者不知道如何更新代码以添加图片。
它需要从选定目录中读取所有图像文件。 (jpg, gif, png, bmp)它需要能够在不更改任何代码的情况下更新内容。 (从文件夹动态加载)它需要写出 img 标签到被查看的页面。 (使用 JavaScript 进行定制/CSS?)
从 php/JavaScript 输出的一组 img 标签需要是缩略图,当点击它时将链接到完整的 def 图片,这可能可以在最初建立链接时用 JavaScript 处理。
进度:
我找到了一个 php 脚本,它可以从文件夹中读取文件并将 url 保存到一个数组中,以便在 JavaScript 中使用。然而,用于显示图片的代码是作为单 block 幻灯片放映完成的,因为我需要它来单独发布所有图像,而不仅仅是替换同一图像的 src。
示例:
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
那么我如何让 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: removed link
无论我如何更改每个项目的输出,例如,如果我用一个简单的 echo 替换整个部分,我得到的都是以下内容:
<!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,我认为我做的还可以。
最佳答案
非常简单的自动画廊脚本,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/”,对于本示例)。
索引.php:
<!DOCTYPE html>
<html>
<head>
<title>My Gallery</title>
</head>
<body>
<?php require_once('photos.php') ?>
</body>
</html>
此文件将包含 photos.php 文件并运行它,photos.php 脚本的输出将出现在标签之间。
关于php - 动态图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1896147/
我正在尝试制作一个图片库,我在使用以下代码时遇到的问题是图像不会向左浮动,因为图像大小不同。同样,当我单击图像以查看全尺寸时,它非常 pig 。有没有办法解决这个问题,或者在厨房模式下显示一半的图片。
我正在开发一个简单的照片库/图书馆。到目前为止,我只了解 CSS。我有一个 2 x 3 的 div 网格(很快就会成为照片图标)。 我想做的是给每个 div 图标一个独特的背景图像。现在我该怎么做,因
我正在为 iPhone(照片查看器)寻找一个简单的图片库。我用的是 EasyGallery在 iOS 4 上,我在 iOS 5 下遇到这个画廊的一些问题。Three20 的画廊对我来说太复杂了,有很多
(我的编码经验有限) 我有一个网站模板文件,目前该网站的图片库在新页面中打开,我希望图片库不要打开其他页面/选项卡,而是包含五行和一行的图片同一页面内所有行下方的大主图像,我希望用鼠标滚动时主图像会放
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 6 年前。
我使用模式制作了一个图像库,因此当我单击任何图像时,它将在模式中打开,但有一个问题,我不知道为什么不起作用,任何人都可以看一下下面的代码并尝试帮助我?我认为 JavaScript 代码一切正常,但我不
有数百个 jquery 图像 slider 示例,但找不到文件夹图像库。这是完美的候选人jquery-photo-gallery但不能创建多个组。基本上会有如下的专辑结构: -root_folder
我将使用 Galleriffic jquery 插件来显示我的图像(请查看此处的演示:http://www.twospy.com/galleriffic/advanced.html 我想在图库上方包含
我如何从一个不是最上面的 ul 中隐藏所有 li。 代码:http://jsfiddle.net/mSmbv/375/ 我需要顶部的 li 是唯一隐藏的。所有其他的都应该隐藏起来,直到它们向上滑动进入
我正在尝试在 Django 中制作一个图片库模板,当新图片添加到博客时,它会引入新图片。我想要的是网格中的三列或四列缩略图大小的图像。 到目前为止,我的模板如下所示: {% for image in
所以我是 HTML、CSS、Bootstrap 和 JavaScript 的新手,我制作了这个画廊,它看起来不错,但我需要为移动设备和较小的屏幕修复它。我应该改变什么? 那些#myImg4,5,12,
我的图库在滚动时工作正常,虽然在图像放大的部分,我希望图库中的第一张图片自动出现在那里,目前它只显示一个空白框,直到你悬停在图像上。 Welcome! M0
I wanted to do something similar to this. 在这种情况下,当用户单击图像时,该图像将以 100% 的浏览器高度显示,并且用户可以转到下一张/上一张图像。当用户再
我有一个使用 jquery 的图片库,我应该从头开始创建它。我无法从左右导航的一部分开始,其中它应该导航到每个图像以全 View 预览并在右侧的右侧缩略图图标上为当前所选图像提供事件类。 我已经做了这
谁能推荐一个好的 javascript 图片库,它具有图像处理功能,例如裁剪、旋转和缩放? 我到处搜索,只找到一个或其中一个,但没有找到两者的组合。 谢谢。 最佳答案 StudioJS 是一个快速增长
所以我基本上希望能够单击任何小图像并让它们显示在它们上方的较大图像区域中。就像一个画廊。无论如何,它可以用 HTML/CSS 做到这一点吗? 这是我的代码: HTML
您好,感谢您花时间回答我的问题。 我有一个带有典型文件上传 html 元素的自定义 portlet。但是,我被告知用户应该能够选择已经上传的图像而不是上传新图像。目前,我正在随机页面上加载 Web 内
我将要开发一个需要向用户显示图像组的触摸屏应用程序(不是网络应用程序)。期望呈现具有页面向前/向后功能的 3x3 图像网格。他们可以选择一些,我将只展示这些图片。 我没有看到 ListView 完全符
我尝试结合 react-image-gallery与 react-image-magnify获得具有放大预览效果的画廊并根据react-image-gallery我正在传递的文档 MyReactIma
我正在寻找一个带有水平缩略图和灯箱的 jQuery 图片库。基本上,看起来像 Steam 创意工坊的图片库:http://steamcommunity.com/sharedfiles/filedeta
我是一名优秀的程序员,十分优秀!