javascript - 通过javascript在弹出图像上添加下一个和上一个

Question

我有一个弹出图像，它已经运行良好。在此弹出图像上，我需要下一个和上一个来更改图像，但我不知道如何在弹出图像上设置下一个和上一个。这是 HTML:

<div class="row-fluid">
    <div class="col-sm-12">
        <ul class="image-list">
            <li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g3.jpg" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g4.jpg" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g5.jpg" alt="Photo number 5" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g6.jpg" alt="Photo number 6" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g7.jpg" alt="Photo number 7" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g8.jpg" alt="Photo number 8" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g9.jpg" alt="Photo number 9" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g10.jpg" alt="Photo number 10" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
        </ul>
        <div class="navigation" id="nav">
            <span class="previous" id="prev">Prev</span>
            <span class="next" id="next">Next</span>
        </div>
    </div>
</div>

CSS:

ul.image-list{
    padding:0;
    margin: 0;
    list-style: none;
}
 ul.image-list li{
    display: inline-block;
}
 ul.image-list li img{
    width: 190px;
    min-width: 70px;
    transition: all ease 0.4s;
 }
 ul.image-list li img:hover{
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid #000;
 }

Javascript:

    function view(src)
        {
            var viewer = document.getElementById("viewer");
            viewer.innerHTML ='<img src="' + src + '" id="img"/>';
            viewer.innerHTML =
            var img = document.getElementById("img");
            var iw=0, ih=0;
            var dw=0, dh=0;

            img.onload=function(){
                document.getElementById("ov").style.display="block";
                document.getElementById("nav").style.display="block";
                viewer.style.display="block";
                iw = viewer.offsetWidth;
                ih = viewer.offsetHeight;
                dw = window.innerWidth;
                dh = window.innerHeight;
                viewer.style.top = parseInt(dh/2-ih/2) + "px";
                viewer.style.left = parseInt(dw/2-iw/2) + "px";
            };
        }
        function hide2()
        {
            document.getElementById("viewer").style.display="none";
            document.getElementById("ov").style.display="none";
            document.getElementById("nav").style.display="none";
        }

Answer 1

请试试这个

Demo

 $(".popup").popup({
    transparentLayer : true,
    gallery : true,
    galleryTitle : "<a href="http://www.jqueryscript.net/gallery/">Gallery</a>1 Title",
    imgaeDesc : true,
    galleryCounter : true,
    08
    imageDesc : true,
    09
    autoSize : false,

    boxHeight : 600,

    boxWidth : 500,

    shadowLength : 0,

    transition : 0,
        onOpen : function() {

    console.log("opened the box .popup");

    },

    onClose : function() {

    console.log("closed the box .popup");

    }



    });

请尝试另一个例子:

Demo