The Divi Theme includes a gallery module which lets you display images in a grid or slider format. Clicking on the images opens them in a lightbox, which includes a '1 of X' slide image count. If you'd like to change the separator of this image count (e.g. to "1 / X" or to suit your site's language), here's how to do it.
Change the Gallery Module Image Counter Separator using Divi Booster
Divi Booster adds hundreds of new options to Divi, including an option to change the Divi gallery module's image count separator. You can find it at:
Gallery Settings > Content > Elements > Image Count Separator
Enter the separator you'd like to use in the 'Image Count Separator' field. If you'd like to have a space between the numbers and the separator, include a space character at either side of your separator, e.g. ' / '.
Now save the module settings and the page to apply the change.
You should then see the modified image count separator displayed beneath your gallery:
This option is available in Divi Booster v4.6.1 upwards.
Change the Gallery Module Image Counter Separator using Divi Gallery Booster
If you don't need the full power of Divi Booster, you can also get the feature in Divi Gallery Booster. Divi Gallery Booster is a cost-effective plugin that adds a wide range of features to the Divi gallery module, including the ability to change the image count separator.
You can use the feature in exactly the same way described above for Divi Booster, by setting it at:
Gallery Settings > Content > Elements > Image Count Separator
This option is available in Divi Gallery Booster v1.1.0 upwards.
Change the Gallery Module Image Counter Separator using jQuery
If you are comfortable adding code to your site, you can use the following jQuery code to change the Divi gallery module's image counter separator:
<script>
jQuery(document).ready(function($) {
setTimeout(
function() {
$('.et_pb_gallery_items').data('magnificPopup').gallery.tCounter = '%curr% / %total%';
},
0
);
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
This code can be added in the "Divi > Theme Options > Integration > Add code to the < head > of your blog" field.
The code changes the image counter separator to " / ". You can modify the separator by changing the value of the tCounter property.
0 Comments