Question

我一整天都在网上搜索结果来解决我的问题......

我想要一个选项列表，每个选项都链接到不同的图像。但是，我不想在新窗口中打开图像，而是希望图像在同一页面上的灯箱中打开（wordpress的灯箱演变是我正在使用的插件）。

我尝试在输入字段中使用onclick，灯箱将打开（如果class =“lightbox”）但没有图片加载。

我不知道是否需要添加一个允许输入识别选择了哪个选项的功能，以便在单击输入按钮时，该特定图像在灯箱中打开。

如果我确实需要一个功能，我不知道在哪里添加功能... onclick？选项标签中的某个位置，还是选择标签？

<form>
<select>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
<input type="button" value="submit" />
</select>
</form>

任何帮助都会受到赞赏，即使它是一个很好的链接，可以解释我如何创建一个函数并将其添加到我的代码中，然后使用一个解决方案将该函数调用到我的下拉列表中。

由于

Answer 1

如果使用iLightBox http://ilightbox.net/，您可以这样做：

<select id="selectImage">
    <option>Select Image</option>
    <option value="linkimage1.jpg">image 1</option>
    <option value="linkimage2.jpg">image 2</option>
    <option value="linkimage3.jpg">image 3</option>
</select>

<script>
    jQuery(document).ready(function($){
        $('select#selectImage').change(function(){
            var $this = $(this),
                url = $this.val();

            $.iLightBox(url);
        });
    });
</script>

如何在单击提交按钮后从下拉选项列表中打开灯箱中的图像

1 个答案: