Lightbox Var Problems

Question

For a project I have to implement a JavaScript based LightBox script. I used a script of a friend of mine. The thing is, the script works for only 1 image on the page. That means that the other 4 are not working. So basically my guess is that it only calls one image out of the 5 to actually work. I am still very basic with JavaScript and I can't figure the problem out on my own.

This is the JavaScript code of the Lightbox script:

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";
}

This is the HTML code of the first 2 images & text.

 <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>

score 0 · Answer 1 · answered Aug 04 '16 at 00:01

This will work. Please try it.

@{
    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>

jquery selectors pull in dom order consistently http://stackoverflow.com/questions/1636201/is-the-order-objects-are-return-by-a-jquery-selector-specified 2) a better solution would be to get an object array of elements and find an element in this object instead of using the alt property :) — kblau, Aug 04 '16 at 23:07
I changed the opacity from 0 to 1 on the large image, but I think there should be a gradual opacity going on — kblau, Aug 04 '16 at 23:33

Lightbox Var Problems

1 Answers1