Gallery Does not have scroll to Prev/Next image... #138

FA-Bubba · 2021-10-02T19:11:35Z

FA-Bubba
Oct 2, 2021

I just started an implementation of FancyBox 4, and have been testing with just 4 images... 2 from the FancyBox site and two of my own. They all display side-by-side, but when I click on an image, while it DOES display the large version, there is no scrolling to Prev/Next image.

What code might I be missing to implement the scrolling? Here is the code I have now:

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Gal-FB-4</title>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel.autoplay.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel.autoplay.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.controls.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.controls.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.controls.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.min.css">

 </head>
 <body>

<a href="https://lipsum.app/id/1/1024x768" data-fancybox="gallery" data-caption="Optional caption">  Image </a>

<br><br>
<div id="gallery">  

<table border=1>
<tr>
<td><a href="https://lipsum.app/id/1/800x600"><img src="https://lipsum.app/id/1/300x225" /></a></td>
<td><a href="https://lipsum.app/id/2/800x600"><img src="https://lipsum.app/id/2/300x225" /></a></td>
<td><a href="Images/EyeWithTear.jpg" width=500><img width=300 src="Images/EyeWithTear.jpg" /></a></td>
<td><a href="Images/RedHeadHuggingFox.jpg" width=500><img width=300 src="Images/RedHeadHuggingFox.jpg" /></a></td>
</tr>
</table>  
  
</div>

<script>  Fancybox.bind("#gallery a", {    groupAll : true, // Group all items    on : {      ready : (fancybox) => {        console.log(`fancybox #${fancybox.id} is ready!`);      }    }  });
</script>

 </body>
</html>```

fancyapps · 2021-10-02T19:19:24Z

fancyapps
Oct 2, 2021
Maintainer

Hi,

Did you know that:

It is totally unnecessary to include all JS files, you only need one - "fancybox.umd.min.js" (or "fancybox.esm.min.js");
Your HTML code is not valid and your JS code will not work, because it contains comments in the middle of the line?

Your code works fine after fixing validation errors - https://fancyapps.com/playground/Z6

3 replies

FA-Bubba Oct 2, 2021
Author

Thank You!
It does indeed work on the page you posted, so I copied the code you presented, but it isn't working for me -- when clicking on an image on the main page, the large image is displayed, but there are no controls to scroll to next/prev image. The revised file I created is below... perhaps you can tell me where I went wrong:

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Gal-FB-41</title>
 </head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,minimum-scale=0.86">
<title data-react-helmet="true"></title><link rel="stylesheet" href="https://fancyapps.com/assets/css/styles.92d2323c.css">

 <link rel="preload" href="https://fancyapps.com/assets/js/fancybox.umd.min.js" as="script">
 <link rel="preload" href="https://fancyapps.com/assets/js/fancybox.esm.min.js" as="script">

<script>
Fancybox.bind("#gallery a", {
  groupAll: true,
  // Group all items
  on: {
    ready: (fancybox) => {
      console.log(`fancybox #${fancybox.id} is ready!`);
    },
  },
});
</script>

</head>
<body>

<div id="gallery">
  <table border="1">
    <tr>
      <td>
        <a href="https://lipsum.app/id/1/800x600"><img src="https://lipsum.app/id/1/300x225" /></a>
      </td>
      <td>
        <a href="https://lipsum.app/id/2/800x600"><img src="https://lipsum.app/id/2/300x225" /></a>
      </td>
      <td>
        <a href="Images/EyeWithTear.jpg" width="500"><img width="300" src="Images/EyeWithTear.jpg" /></a>
      </td>
      <td>
        <a href="Images/RedHeadHuggingFox.jpg" width="500"><img width="300" src="Images/RedHeadHuggingFox.jpg" /></a>
      </td>
    </tr>
  </table>
</div>
  
 </body>
</html>```

FA-Bubba Oct 3, 2021
Author

Thank you very much it works very well! FYI: I’m doing this for my 12-year-old daughter, who wants to showcase her artwork (about 36 pieces, and increasing by a few more every week or two)…

There was one enhancement we wanted to add: a layered watermark on every image. The one I’m using works OK on static images, but its div tag seems to break the Gallery link... if you can suggest a better way (without editing every image file), we’d be very appreciative. I’ve included code below that I’ve tried.

<style>
  .watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("Images/wMark-5a.jpg");
  background-size: 300px 400px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  opacity: 0.1;
}

</style>

<!-----[ then in the body content area: ]------------->

<div class="watermarked">
        <a href="https://lipsum.app/id/2/800x600"><img src="https://lipsum.app/id/2/300x225" /></a>
</div>

the div tag is supposed to wrap every linked image in the gallery...

...and I have attached the wMark-5a.jpg file for reference:

Our THANKS in advance for any suggestions.

fancyapps Oct 5, 2021
Maintainer

Sorry, I have not yet found perfect solution of adding watermark for zoomable content, see https://fancyapps.com/playground/ZT It is on my todo list.

Also, I have been waiting for this for more than 10 years - https://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements

fancyapps · 2021-10-03T15:34:07Z

fancyapps
Oct 3, 2021
Maintainer

Your code works fine after replacing links with valid sources. In case you missed it, here is a HTML template for the layout with correct includes - https://fancyapps.com/docs/ui/installation#cdn - please, use it, and do not copy/paste code from the source of the homepage that you do not understand.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Gallery Does not have scroll to Prev/Next image... #138

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Gallery Does not have scroll to Prev/Next image... #138

Uh oh!

Uh oh!

FA-Bubba Oct 2, 2021

Replies: 2 comments · 3 replies

Uh oh!

Uh oh!

fancyapps Oct 2, 2021 Maintainer

Uh oh!

FA-Bubba Oct 2, 2021 Author

Uh oh!

FA-Bubba Oct 3, 2021 Author

Uh oh!

fancyapps Oct 5, 2021 Maintainer

Uh oh!

fancyapps Oct 3, 2021 Maintainer

FA-Bubba
Oct 2, 2021

Replies: 2 comments 3 replies

fancyapps
Oct 2, 2021
Maintainer

FA-Bubba Oct 2, 2021
Author

FA-Bubba Oct 3, 2021
Author

fancyapps Oct 5, 2021
Maintainer

fancyapps
Oct 3, 2021
Maintainer