将图像缩略图链接到不同页面中幻灯片中的相同图像

Question

我有一个砖石画廊，目前，如果您单击任何缩略图，它会链接到不同页面中的幻灯片，无论您单击哪个缩略图，幻灯片都会显示第一个图像。我想知道是否有办法让幻灯片以缩略图点击的图像开始。

我尝试了这篇文章，但似乎没有这样做。

Linking to specific headers on other pages

我是怎么做到的，

缩略图：

<a href="#the_slide">
            <div class="m_overlay"><div class="m_txt"><?php echo $image['title']; echo $image['caption'];?>"</div></div>
            <img src="<?php echo $image['url'];?>" title="<?php echo $image['title']; echo $image['caption'];?>" alt="<?php echo $image['alt']; ?>">
</a>

幻灯片中的图片

       <?php
        global $post;
        $parent_id = $post->post_parent;
        $parentlink = get_permalink($parent_id);
        $images = get_field('gallery', $parent_id);
        ?>


        <ul class="slideshow">

        <?php foreach( $images as $image ): ?>
        <li>
            <h2 class="slideshow_title"><?php echo $image['title'];?></h2>
        <table>
        <tr>
        <td>


            <div class="slideshow_image"><a name="the_slide"></a><img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']; ?>"></div>
        </td>
        </tr>
        </table>
        </li>
        <?php endforeach; ?>
        </ul>

感谢您的帮助！

Answer 1

我能想到的最好方法是使用 $_GET 变量来告诉您的页面首先回显哪个图像，因为您的插件本身不支持它。它看起来像这样：

在您的图库页面上，让幻灯片的链接包含一个名为“thumb”的 $_GET 变量，该变量存储您要首先显示的缩略图的 ID 号：

<a href="/slideshow/index.php?thumb=3"><img .../></a>

其中 3 代表第三个缩略图。

然后在您的幻灯片放映的 PHP 文件中，您可以更改回显顺序。在拇指索引处回显图像（零索引减一），然后是其余部分的 for 循环，跳过您已经回显的图像（您可以使用 continue; 执行此操作

<ul class="slideshow">

    <?php 
        $thumb = $_GET["thumb"];

        $firstImage = $images[$thumb-1];
        //echo first image here

        for($i = 0; $i < count($images); $i++): 

        if($i == ($thumb-1)) continue;
        $image = $images[$i];
    ?>
    <li>
        <h2 class="slideshow_title"><?php echo $image['title'];?></h2>
    <table>
    <tr>
    <td>


        <div class="slideshow_image"><a name="the_slide"></a><img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']; ?>"></div>
    </td>
    </tr>
    </table>
    </li>
    <?php endfor; ?>
</ul>