如何在同一页面上打开图像？答案

【问题标题】：How to opening images on the same page?如何在同一页面上打开图像？
【发布时间】：2011-12-08 15:35:39
【问题描述】：

我有一个相册插件 (php)，可以在一个页面中为我的图像创建缩略图，当我单击图像时，会在新页面中打开每个图像。
有没有办法在同一页面上打开图像缩略图页？

这是我的缩略图代码：

    <div class="thumbs">

        <?php foreach (wppa_get_thumbs() as $tt) :  global $thumb; $thumb = $tt; ?>
                <a href="<?php wppa_photo_page_url(); ?>" class="img"><img src="<?php wppa_thumb_url(); ?>" alt="*" /></a>
        <?php endforeach; ?>

    </div>

这是特定照片的代码：

<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
    <a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
    </a><br />
<?php }  ?>

这是创建链接的函数：

// get link to photo
function wppa_photo_page_url($return = FALSE) {
    global $thumb;
    $url = get_permalink()  . wppa_sep() . 'album=' . $_GET['album'] . '&amp;photo=' . $thumb['id'];

    if ($return) {
        return $url;
    } else {
        echo $url;
    }
}

我尝试删除链接代码但不起作用。

【问题讨论】：

“在同一页上”是指在灯箱中吗？

标签： php photo-gallery

【解决方案1】：

在新窗口中打开链接的行为通常与锚点的“目标”属性相关联。例如，这会将链接放在新窗口中：

<a href="wherever" target="_new">text</a>

但是您上面粘贴的代码似乎没有在中包含目标属性，所以我怀疑该行为是在您的 CSS 中控制的，而您的问题中没有包含。

检查您的 CSS 文件，并寻找“目标”。 W3C 有 published documentation 描述了它是如何工作的。

【讨论】：

【解决方案2】：

使用纯 javascript 的 Image 对象实际上很容易做到。你可以有一个函数来做这样的事情：

function load_image(image_path)
{
   var image = new Image();
   image.src = image_path;
   return image;
}

您可以从他们点击的链接中提取图片的网址。

然后，将该图像附加到您拥有的隐藏 div 并使其可见。如果您使用的是 jQuery：

var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();

这是未经测试的，但应该可以工作。

【讨论】：

【解决方案3】：

您可以使用像 Lightbox 这样的 jQuery 插件在当前页面上动态弹出内容。

【讨论】：