单击下一个/上一个图像

Question

<button id="prev">Previous</button>
<button id="next">Next</button>
<div class="post-378 page type-page status-publish hentry" id="post-378">
    <ul id='gallery_square_grid'>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_blue.png'>
                <span class='title'>fpo_blue</span>
                <img src='image/2016/08/fpo_blue-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_orange.png'>
                <span class='title'>fpo_orange</span>
                <img src='image/2016/08/fpo_orange-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_moss.png'>
                <span class='title'>fpo_moss</span>
                <img src='image/2016/08/fpo_moss-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_midnight.png'>
                <span class='title'>fpo_midnight</span>
                <img src='image/2016/08/fpo_midnight-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_magenta.png'>
                <span class='title'>fpo_magenta</span>
                <img src='image/2016/08/fpo_magenta-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_lime.png'>
                <span class='title'>fpo_lime</span>
                <img src='image/2016/08/fpo_lime-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_lavander.png'>
                <span class='title'>fpo_lavander</span>
                <img src='image/2016/08/fpo_lavander-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_dusty_pink.png'>
                <span class='title'>fpo_dusty_pink</span>
                <img src='image/2016/08/fpo_dusty_pink-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_cherry.png'>
                <span class='title'>fpo_cherry</span>
                <img src='image/2016/08/fpo_cherry-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
        <li>
            <a data-caption='This is the caption text' class='gallery_square' href='image/2016/08/fpo_brown.png'>
                <span class='title'>fpo_brown</span>
                <img src='image/2016/08/fpo_brown-120x120.png' alt='Description' />
                <br />
                <span class='description'>Description</span>
            </a>
        </li>
    </ul>

我想使用Jquery或JS来允许用户单击下一个和上一个按钮以全屏点击这些图像。我有一些代码，可以在点击后弹出图片：http://jonsymond.com/alp/gallery/