CODEWITHSUNDEEP
javascripthtmlcssimagelightbox
Robert Miller
Robert Miller

Reputation: 1

Lightbox images are all black and white

For a while now I've been working on a rather simple website for myself. I wanted to add a Lightbox since I thought it would suit the design, but I made a mistake in the process. Since I chose to use black and white images I decided to use the grayscale function. Now all the Images that I view with my Lightbox are black and white.

This is the Lightbox I use:

http://lokeshdhakar.com/projects/lightbox2/

This is a small but very important piece of my html:

<a href="img/Baking-Lightbox.jpg" data-lightbox="Baking" img src="img/Baking.jpg" data-title="My caption">
    <img src="img/Baking.jpg">
</a>

can anybody tell me what I did wrong

Thank you in advance

Upvotes: 0

Views: 190

Answers (1)

William Callahan
William Callahan

Reputation: 639

According to how you implement this lightbox and based on the code you put into your HTML, it seems as though you have implemented the lightbox incorrectly. First, inside the head tag of your HTML, make sure that you include the CSS and links to the javascript files as follows:

<head>
     <script src="js/jquery-1.11.0.min.js"></script>
     <script src="js/lightbox.min.js"></script>
     <link href="css/lightbox.css" rel="stylesheet" />
</head>

Once you have included those files, you should add images to you HTML using the following format ONLY:

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
  • Replace "img/image-1.jpg" with the path to your image.
  • Replace "image-1" with any name that you would like to group your images together with. Make sure that any images that you would like to show together have this same value.
  • Replace "My caption" with what you would like to appear as a caption in the lightbox.
  • Replace "Image #1" with something that you would like to have appear in the HTML.

You can add as many anchor (a) tags as you need for each image.

Example

In the following example, I have two lightbox groups. One will show cars, and the other will show animals:

<a href="frog.jpg" data-lightbox="animals" data-title="A Frog">FROGS</a>
<a href="dog.jpg" data-lightbox="animals" data-title="A Dog">DOGS</a>
<a href="suv.jpg" data-lightbox="cars" data-title="An SUV">My SUV</a>
<a href="camry.jpg" data-lightbox="cars" data-title="A Camry">A Toyota Camry</a>

Upvotes: 1

Related Questions