Question

对于项目，我必须实现基于JavaScript的LightBox脚本。我使用了我朋友的剧本。问题是，该脚本仅适用于页面上的1个图像。这意味着其他4个不起作用。所以基本上我的猜测是它只调用5中的一个图像来实际工作。我对JavaScript仍然非常基础，我无法自己解决问题。

这是Lightbox脚本的JavaScript代码：

var smallimg = document.getElementsByClassName("small")[0];
var bigimg = document.getElementsByClassName("big")[0];
var close = document.getElementsByClassName("close")[0];
var el = document.getElementsByClassName("back")[0];

smallimg.addEventListener("click", function() { fadeIn() });

function fadeIn() {
el.style.display = "block";
el.style.opacity = 0;

tick();
showpicture();
}

 function tick() {
el.style.opacity = +el.style.opacity + 0.03;

if (+el.style.opacity < 1) {
    (window.requestAnimationFrame && requestAnimationFrame(tick)) ||     setTimeout(tick, 16)
}
}

function showpicture() {
var NewSrc = smallimg.src.split(".png")[0] + "1.png";
console.log(NewSrc);
bigimg.src = NewSrc;
}

close.addEventListener("click", function() { closing() });

function closing() {
el.style.display = "none";
}

这是前两张图片的HTML代码＆amp;文本。

 <aside>
<img class="small" name="small1" src="../images/Rambla.png" alt="La Rambla"      />
   </aside>

    <h2>La Rambla</h2>
    <article>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.


        </article>

    <aside>
        <img class="small" name="small2" src="../images/Sagrada.png"  alt="La Sagrada Familia" />
    </aside>

   <br> <h2>La Sagrada Familia</h2>
    <article>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
        <br/><br/>


        </article>

Answer 1

这会奏效。请试一试。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SSIndex</title>
    <link href="~/Content/lightbox.min.css" rel="stylesheet" />
</head>
<body>
    <aside>
        <img class="example-image small" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="0" />
        <img class="example-image el big close back" 
                style="display:none" alt="0" />
    </aside>
    <h2>La Rambla</h2>
    <article>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    </article>
    <aside>
        <img class="example-image small" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="1" />
        <img class="example-image el big close back" 
             style="display:none" alt="1" />
    </aside>
    <br> <h2>La Sagrada Familia</h2>
    <article>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
        <br /><br />
    </article>
    <script src="~/Scripts/lightbox-plus-jquery.min.js"></script>
    <script type="text/javascript">
        //var smallimg = document.getElementsByClassName("small")[0];
        //var bigimg = document.getElementsByClassName("big")[0];
        //var close = document.getElementsByClassName("close")[0];
        //var el = document.getElementsByClassName("back")[0];

        //smallimg.addEventListener("click", function () { fadeIn() });
        var index = 0;

        $(".small").click(function () {
            fadeIn($(this));
        });

        function fadeIn(small) {
            //get index
            index = small.attr("alt");

            //get big
            var el = $(".back")[index];

            el.style.display = "block";
            //changed this to 1
            el.style.opacity = 1;

            tick(el);

            //get small
            var small = $(".small")[index];
            showpicture(small, el);
        }

        function tick(el) {
            el.style.opacity = +el.style.opacity + 0.03;

            if (+el.style.opacity < 1) {
                (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
            }
        }

        function showpicture(smallimg, bigimg) {
            //var NewSrc = smallimg.src.split(".png")[0] + "1.png";
            //get the filename
            var filename = smallimg.src.split('/').pop();
            //get the pathname
            var pathname = smallimg.src.substr(0, smallimg.src.indexOf(filename));
            //replace filename small with big
            filename = filename.replace("thumb", "image");
            //put it together
            var NewSrc = pathname + filename;
            console.log(NewSrc);
            bigimg.src = NewSrc;
        }

        //close.addEventListener("click", function () { closing() });
        $(".close").click(function () {
            closing($(this));
        });

        function closing(el) {
            el.css("display", "none");
        }
    </script>
</body>
</html>

灯箱Var问题

1 个答案: