Skip to content

Commit

Permalink
Updated docs to reflect default options changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@marekdedic
marekdedic committed Oct 6, 2024
1 parent 7f43264 commit 60a01cc
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 171 deletions.
120 changes: 2 additions & 118 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,49 +25,15 @@ <h2>Image Lightbox, Responsive and Touch‑friendly</h2>

<div id="main_content">
<section class="options">
<h2>With activity indication</h2>
<ul data-testid="activity">
<h2>Basic example</h2>
<ul data-testid="basic">
<li><a href="images/demo1.jpg" data-imagelightbox="a"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="a"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="a"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="a"]'),
{
activity: true,
},
);
</code></pre>

<h2>With overlay</h2>
<ul data-testid="overlay">
<li><a href="images/demo1.jpg" data-imagelightbox="b"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="b"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="b"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="b"]'),
{
overlay: true,
},
);
</code></pre>

<h2>With "close" button</h2>
<ul data-testid="close-button">
<li><a href="images/demo1.jpg" data-imagelightbox="c"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="c"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="c"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="c"]'),
{
button: true,
quitOnDocClick: false,
},
);
</code></pre>

Expand All @@ -86,73 +52,6 @@ <h2>With caption</h2>
);
</code></pre>

<h2>With navigation</h2>
<ul data-testid="navigation">
<li><a href="images/demo1.jpg" data-imagelightbox="e"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="e"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="e"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="e"]'),
{
navigation: true,
},
);
</code></pre>

<h2>With arrows</h2>
<ul data-testid="arrows">
<li><a href="images/demo1.jpg" data-imagelightbox="f"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="f"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="f"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="d"]'),
{
caption: true,
},
);
</code></pre>

<h2>All of the above</h2>
<ul>
<li><a href="images/demo1.jpg" data-imagelightbox="g" data-ilb2-caption="Sunset in Tanzania"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="g" data-ilb2-caption="Traffic jam in Tanzania"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="g" data-ilb2-caption="Just another sunset in Tanzania"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="g"]'),
{
activity: true,
arrows: true,
button: true,
caption: true,
navigation: true,
overlay: true,
quitOnDocClick: false,
},
);
</code></pre>

<h2>Quiting on reaching the end or clicking the image</h2>
<ul data-testid="quit">
<li><a href="images/demo1.jpg" data-imagelightbox="quit"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="quit"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="quit"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="quit"]'),
{
quitOnEnd: true,
quitOnImgClick: true,
},
);
</code></pre>

<h2>With manual trigger</h2>
<ul>
<li><a href="images/demo1.jpg" data-imagelightbox="h"><img src="images/thumb1.jpg"></a></li>
Expand Down Expand Up @@ -256,21 +155,6 @@ <h2>Video support</h2>
</ul>
Add data-ilb2-video to the link, containing the parameters of a HTML5 video tag as JSON. You can also include a sources field - a list of source tags similarily encoded.

<h2>Fullscreen button</h2>
<ul data-testid="fullscreen">
<li><a href="images/demo1.jpg" data-imagelightbox="fullscreen"><img src="images/thumb1.jpg"></a></li>
<li><a href="images/demo2.jpg" data-imagelightbox="fullscreen"><img src="images/thumb2.jpg"></a></li>
<li><a href="images/demo3.jpg" data-imagelightbox="fullscreen"><img src="images/thumb3.jpg"></a></li>
</ul>
<pre><code>
new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="fullscreen"]'),
{
fullscreen: true,
},
);
</code></pre>

<h2>Filter images by extension</h2>
<h3>Allow gif only</h3>
<ul>
Expand Down
46 changes: 0 additions & 46 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,57 +15,11 @@ new ImageLightbox(
},
);

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="b"]'), {
overlay: true,
...(isTest && { animationSpeed: 0 }),
});

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="c"]'), {
button: true,
quitOnDocClick: false,
...(isTest && { animationSpeed: 0 }),
});

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="d"]'), {
caption: true,
...(isTest && { animationSpeed: 0 }),
});

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="e"]'), {
navigation: true,
...(isTest && { animationSpeed: 0 }),
});

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="f"]'), {
arrows: true,
...(isTest && { animationSpeed: 0 }),
});

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="quit"]'), {
quitOnEnd: true,
quitOnImgClick: true,
...(isTest && { animationSpeed: 0 }),
});

new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="fullscreen"]'),
{
fullscreen: true,
...(isTest && { animationSpeed: 0 }),
},
);

new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="g"]'), {
activity: true,
arrows: true,
button: true,
caption: true,
navigation: true,
overlay: true,
quitOnDocClick: false,
...(isTest && { animationSpeed: 0 }),
});

const manualOpenGallery = new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="h"]'),
{
Expand Down
6 changes: 3 additions & 3 deletions tests/basic.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ test("has correct title", async ({ page }) => {

test("opens and closes the lightbox", async ({ page }) => {
await page.goto("/");
await page.getByTestId("activity").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-activity-indicator")).toBeVisible();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-activity-indicator")).toBeHidden();
Expand Down Expand Up @@ -53,7 +53,7 @@ test("can add images dynamically", async ({ page }) => {

test("quits on end", async ({ page }) => {
await page.goto("/");
await page.getByTestId("quit").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-image")).toHaveAttribute(
"src",
Expand All @@ -75,7 +75,7 @@ test("quits on end", async ({ page }) => {
);
await page.keyboard.press("ArrowRight");
await expect(page.locator("#ilb-image")).toBeHidden();
await page.getByTestId("quit").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-image")).toHaveAttribute(
"src",
Expand Down
4 changes: 2 additions & 2 deletions tests/decorations.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {

test("shows the overlay", async ({ page }) => {
await page.goto("/");
await page.getByTestId("overlay").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-image")).toHaveAttribute(
"src",
Expand All @@ -22,7 +22,7 @@ test("shows the overlay", async ({ page }) => {

test("can be closed with the close button", async ({ page }) => {
await page.goto("/");
await page.getByTestId("close-button").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-image")).toHaveAttribute(
"src",
Expand Down
4 changes: 2 additions & 2 deletions tests/navigation.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {

test("can be controlled with image clicks", async ({ page }) => {
await page.goto("/");
await page.getByTestId("overlay").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-image")).toHaveAttribute(
"src",
Expand Down Expand Up @@ -49,7 +49,7 @@ test("can be controlled with image clicks", async ({ page }) => {

test("can be controlled with keyboard", async ({ page }) => {
await page.goto("/");
await page.getByTestId("fullscreen").getByRole("link").first().click();
await page.getByTestId("basic").getByRole("link").first().click();
await expect(page.locator("#ilb-image")).toBeVisible();
await expect(page.locator("#ilb-image")).toHaveAttribute(
"src",
Expand Down

0 comments on commit 60a01cc

Please sign in to comment.