Question

我为其他人建立了一个网站，他将通过CMS（CushyCMS）进行更新。他们想要一个灯箱画廊。我希望能够允许他们上传新图片并将该图片网址复制到标签中，以便灯箱正常工作。

到目前为止，我能够做到这一点，但客户端必须确保文件名和格式与我在php代码中设置的文件名和格式完全相同。有没有办法从img标签中获取img url（可能使用id属性识别它）并将其直接放入标签中？

到目前为止我所拥有的：

 <?php
 $src1 = "images/test1.jpg"; 
 $src2 = "images/test2.jpg"; 
 ?>  

<a href="<?php echo $src1?>" data-lightbox="group-1">
<img class="cushycms profile" name="image1" id="slideshow_image" src="images/test1.jpg"/></a>

<a href="<?php echo $src2?>" data-lightbox="group-1">  
<img class="cushycms profile" id="slideshow_image" src="images/test2.jpg"/></a>

非常感谢！

Answer 1

你可以用jQuery做到这一点：

<a data-lightbox="group-1">
    <img name="image1" src="images/test1.jpg" />
</a>

<script>
var img = $('img[name="image1"]');
var imgSrc = img.attr('src');

img.parent().attr('href', imgSrc);
</script>

如果您有多个图像并希望自动执行此操作，则可以使用地图功能：

<a data-lightbox="group-1">
    <img name="image1" src="images/test1.jpg" class="slideshow" />
</a>

<a data-lightbox="group-1">
    <img name="image2" src="images/test2.jpg" class="slideshow" />
</a>

<a data-lightbox="group-1">
    <img name="image3" src="images/test3.jpg" class="slideshow" />
</a>

<script>
$(".slideshow").map(function() {
    $(this).parent().attr('href', this.src);
});
</script>

Answer 2

假设你在某处使用jQuery，你可以/应该使用一个灯箱插件，就像这里一样：

http://www.jacklmoore.com/colorbox/

在那里使用xamples，然后您将使用：（http://www.jacklmoore.com/colorbox/example1/）

$('a.gallery').colorbox({rel:'group-1'});

这将导致一个lighbox画廊显示在任何带有“gallery”类的锚点上的“click”，而画廊将显示所有具有class =“group-1”的所有锚点的“href”所指向的元素（所以每个锚都会

虽然你必须为jquery和lightbox插件添加一些文件，但我认为它最终会让你的生活更轻松。

还不确定你的php级别是什么，但你在那里要求的示例代码：

<?php 

$images = array(
'images/test1.jpg',
'images/test2.jpg'
);

?>

<?php foreach($images as $i => $url): ?>

<a href="<?php echo $url?>" data-lightbox="group-1">
<img class="cushycms profile" name="image<?php echo $i+1 ?>" id="slideshow_image" src="<?php echo $url ?>"/>
</a>

<?php endforeach; ?>

以防万一你有更多的图像。

如何从特定<img src=""/>获取并放入<a href=""> for use with Lightbox</a>的网址

2 个答案: