/**
* Divi Gallery Custom Arrows — dgca-script.js
* Version: 1.0.1
*
* Fix: Use correct Divi pagination selectors (a.page-numbers.prev / .next)
* and jQuery .trigger('click') so Divi's jQuery-bound AJAX handlers fire.
*
* Flow:
* Custom Arrow Click
* → Find nearest .et_pb_gallery sibling above the nav
* → Locate Divi's hidden a.page-numbers.prev / a.page-numbers.next
* → jQuery .trigger('click') — fires Divi's internal AJAX handler
* → Update browser URL via history.replaceState() (no reload)
*/
(function ($) {
'use strict';
// -----------------------------------------------------------------------
// URL HELPERS
// -----------------------------------------------------------------------
function getCurrentPage() {
var params = new URLSearchParams(window.location.search);
var page = parseInt(params.get('et_gallery_page'), 10);
return isNaN(page) || page < 1 ? 1 : page;
}
function updateURL(page) {
var url = new URL(window.location.href);
url.searchParams.set('et_gallery_page', page);
window.history.replaceState({}, '', url.toString());
}
// -----------------------------------------------------------------------
// GALLERY FINDER
// -----------------------------------------------------------------------
/**
* Walk backwards through siblings of `nav` to find the nearest
* .et_pb_gallery element. Falls back to parent-level search.
*/
function findGallery(nav) {
var sibling = nav.previousElementSibling;
while (sibling) {
if (sibling.classList.contains('et_pb_gallery')) {
return sibling;
}
sibling = sibling.previousElementSibling;
}
// Fallback: last .et_pb_gallery inside the parent container
var parent = nav.parentElement;
if (parent) {
var galleries = parent.querySelectorAll('.et_pb_gallery');
if (galleries.length > 0) {
return galleries[galleries.length - 1];
}
}
return null;
}
// -----------------------------------------------------------------------
// DIVI PAGINATION TRIGGER
// -----------------------------------------------------------------------
/**
* Divi Gallery outputs pagination like:
*
*
*
* Divi binds jQuery click handlers to these elements.
* We MUST use jQuery .trigger('click') — native .click() won't fire
* jQuery-only event handlers.
*
* @param {Element} gallery
* @param {string} direction 'prev' | 'next'
* @returns {boolean}
*/
function triggerDiviPagination(gallery, direction) {
var $gallery = $(gallery);
var $target;
if (direction === 'prev') {
// Divi uses: a.page-numbers.prev (may also be .prev.page-numbers)
$target = $gallery.find('a.page-numbers.prev, a.prev.page-numbers, .page-prev');
} else {
$target = $gallery.find('a.page-numbers.next, a.next.page-numbers, .page-next');
}
if ($target.length) {
$target.trigger('click');
return true;
}
console.warn('[DGCA] Divi pagination link not found for direction:', direction,
'nDOM inside gallery:', gallery.innerHTML.substring(0, 600));
return false;
}
// -----------------------------------------------------------------------
// ARROW CLICK HANDLER
// -----------------------------------------------------------------------
function handleArrowClick(e) {
var $arrow = $(e.currentTarget);
var navEl = $arrow.closest('.custom-gallery-nav')[0];
var gallery = findGallery(navEl);
if (!gallery) {
console.warn('[DGCA] Could not locate .et_pb_gallery for this nav block.');
return;
}
var isPrev = $arrow.hasClass('gallery-prev');
var isNext = $arrow.hasClass('gallery-next');
if (!isPrev && !isNext) { return; }
var direction = isPrev ? 'prev' : 'next';
var clicked = triggerDiviPagination(gallery, direction);
if (!clicked) { return; }
// Sync URL
var currentPage = getCurrentPage();
var newPage = isPrev ? Math.max(1, currentPage - 1) : currentPage + 1;
updateURL(newPage);
}
// -----------------------------------------------------------------------
// INIT
// -----------------------------------------------------------------------
$(document).ready(function () {
// Event delegation — works even after Divi AJAX rebuilds the DOM
$(document).on(
'click',
'.custom-gallery-nav .gallery-prev, .custom-gallery-nav .gallery-next',
handleArrowClick
);
});
})(jQuery);