morganestes / h5-lightbox

A jQuery lightbox built on the HTML5 data attribute

Hi there 👋

I'm mainly a web developer (PHP, JS, CSS, and WordPress are my bread and butter), but love to try new languages and ideas to create solutions for problems I encounter. I've dabbled in Python, Ruby, Perl, shell scripting, C++, C#, VB.NET, and a few others, but PHP is my go-to language.

When I'm not writing code, I spend time with my family or on my ham radio (W3PHP is my call sign cuz I'm nerdy like that).

• 🔭 I’m currently working on multiple WordPress products for LOCALiQ.
• 🌱 I’m currently learning React.
• 💬 Ask me about WordPress and I'll try to help.
• 📫 How to reach me: morganestes.com
• 😄 Pronouns: he/him

h5-lightbox's Issues

Missing alt text on imgLarge

To make the lightbox more Pinterest friendly I suggest the following modification:

     return this.each(function()
    {

        var $this = $(this),
            imgLarge = $this.attr(opt.target),
            altText = $this.attr("alt"),
            /**
             * check if the image has the proper data attribute
             * @param {String} img_large Attribute set in options.
             * @returns {Boolean}
             */
            isLightbox = function(imgLarge)
            {
                return (typeof imgLarge !== "undefined");
            };

        if (isLightbox(imgLarge))
        {
            $this.wrap("<a class='" + opt.wrapperClass + "' href='" + imgLarge + "'" + "' alt='" + altText + "'></a>");
        }

        // lightbox implementation
        $("a." + opt.wrapperClass).click(function(e)
        {
            e.preventDefault();
            var lightbox,
                lbImageHref = $(this).attr("href"),
                lbImageAlt = $(this).attr("alt");

            if ($("#lightbox").length)
            {
                $("#lightbox-img").html("<img src='" + lbImageHref + "'' alt='" + lbImageAlt + "' />");
                $("#lightbox").show();
            }
            else
            {
                lightbox =
                    "<div id='lightbox'>" +
                    "<p>Click to close</p>" +
                    "<div id='lightbox-img'>" +
                    "<img src='" + lbImageHref + "'' alt='" + lbImageAlt + "' />" +
                    "</div>" +
                    "</div>";

                $("body").append(lightbox);
            }
        });

        $(document).on("click", "#lightbox", function()
        {
            $(this).hide();
        });

Issue about enlarging images

Hi.
I 've got 3 images on a page.
When I want that each image can be enlarge when i click on it, i have to refresh the page before each enlargement else it's only the first one a click which enlarge.

thank you to help me

Test ticket from Code Climate