Sometimes we show ajax loaded content in fancybox popup which might include some HTML elements instead of just images. Further we might have navigation enabled due to group of elements (via setting common value for rel attribute) that make the previous and next links available with popup. So while working with fancybox, you might have noticed that any button or link or input inside fancybox popup just behaves like previous/next item slider, making that coming item to appear in popup rather of doing it’s assigned code on click.
So now issue is that the previous/next item is shown in popup instead of performing something desired on clicking inside the popup. There is nothing trivial with this. All the reason is the width specified for fancybox-nav class with higher z-index for it. To overcome the issue follow the little adjustment specified below:
Fancybox ajax content & navigation issue in group & popup
- Go to your fancybox files and open the CSS file named fancybox.css.
- Find the class name
fancybox-navand inspect rules for it. - Here you will find width set as 40% by default. Set it to 5 or 10% as you wish.
- Reload your page and open the popup, click on any element inside it.
- Now the AJAX loaded HTML content should work fine instead of sliding for previous/next navigation.
Got the reason for fancybox ajax content & navigation issue in group & popup and the simple solution as well? Need any support related to fancybox in your project or have any query then comment below.