Javascript 单击“图像库”时选择“带说明”

我正在尝试创建一个带有缩略图的图库，因此当您单击缩略图时，它将显示在顶部，并使用不同的描述使其变大。图像显示正确，但我不知道如何将“跨度”显示到右侧

谁能让这个js更好

就像：：

图像一

图二

图三

---

和JS:

$（“#big image p”）.eq（index.show（）.sides（）.hide（）
span内容在哪里？哦，我刚刚在big image div中放了一个span。
$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

<div id="big-image">
    <p><img src="http://lorempixel.com/400/200/sports/1/"><span>Image One</span></p>
    <p><img src="http://lorempixel.com/400/200/fashion/1/"><span>Image Two</span></p>
    <p><img src="http://lorempixel.com/400/200/city/1/"><span>Image Three</span></p>
</div>