Support » Plugin: Easy SwipeBox » Use custom icons

  • My goal is to use custom icons in the lightbox displa for X < and >.

    A designer provided png version of icons. I placed a icons.png in the public/img directory and unchecked the Use SVG Icons box in the WordPress Easy Swipe Box plug-in settings page.

    However, the lightbox display is still using the svg image.

    I then set the plug-in to debug mode and did some checking in the jquery.swipebox.js file and found that plugin.settings.useSVG is true at line 172 eventhough the Use SVG icons check box. is unchecked. (The value for useSVG is 0 in easySwipeBox_lightbox option in wp database)

    // jquery.swipebox.js
    build: function()

    alert(plugin.settings.useSVG); // returns true even though use SVG is unchecked
    if ( supportSVG && plugin.settings.useSVG === true )

    So there may be a bug somewhere in the javascript that is ignoring the use SVG plug-in setting.

    Other than creating a replacement icons.svg is there a workaround for me to use my own icons.png?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Leonardo Giacone

    (@leopeo)

    Hi @aviarts,
    thanks for posting your issue.

    I tried to replicate the bug on my own but with no luck.
    Here the steps I followed:

    1) Changed the gif I found in /public/img/ – I just changed the background color.
    2) Unchecked the “Use SVG” option in admin.

    I see my gif loaded instead of the default one.

    The code you mention:

    I then set the plug-in to debug mode and did some checking in the jquery.swipebox.js file and found that plugin.settings.useSVG is true at line 172 eventhough the Use SVG icons check box. is unchecked. (The value for useSVG is 0 in easySwipeBox_lightbox option in wp database)

    // jquery.swipebox.js
    build: function()

    alert(plugin.settings.useSVG); // returns true even though use SVG is unchecked
    if ( supportSVG && plugin.settings.useSVG === true )

    This is the javascript core default:
    if you alert the plugin.settings.useSVGwill always show true.
    The settings are overwritten later in /public/js/jquery.init.js using the values stored in the database.

    Could you please copy and paste here the content of easySwipeBox_localize_init_var?
    You find it in the HTML of every page of your website.

    Could you also copy and paste the value stored in your database?

    Thank you!

    Thread Starter aviarts

    (@aviarts)

    thanks for your help and prompt response.

    This is what I see when Use SVG Icons is “unchecked”

    Here is the database option value:
    easySwipeBox_lightbox

    a:9:{s:6:”useCSS”;b:1;s:6:”useSVG”;b:0;s:18:”removeBarsOnMobile”;b:1;s:23:”hideCloseButtonOnMobile”;b:0;s:13:”hideBarsDelay”;i:3000;s:13:”videoMaxWidth”;i:1140;s:10:”vimeoColor”;s:7:”#cccccc”;s:9:”loopAtEnd”;b:1;s:14:”autoplayVideos”;b:0;}

    Here is the value of easySwipeBox_localize_init_var as it appears in the HTML

    var easySwipeBox_localize_init_var = {“lightbox”:{“useCSS”:true,”useSVG”:false,”removeBarsOnMobile”:true,”hideCloseButtonOnMobile”:false,”hideBarsDelay”:3000,”videoMaxWidth”:1140,”vimeoColor”:”cccccc”,”loopAtEnd”:true,”autoplayVideos”:false},”autodetect”:{“autodetectImage”:false,”autodetectVideo”:false,”autodetectExclude”:”.no-swipebox”}};

    Here is what I see when Use SVG Icons is checked:

    a:9:{s:6:”useCSS”;b:1;s:6:”useSVG”;b:1;s:18:”removeBarsOnMobile”;b:1;s:23:”hideCloseButtonOnMobile”;b:0;s:13:”hideBarsDelay”;i:3000;s:13:”videoMaxWidth”;i:1140;s:10:”vimeoColor”;s:7:”#cccccc”;s:9:”loopAtEnd”;b:1;s:14:”autoplayVideos”;b:0;}

    var easySwipeBox_localize_init_var = {“lightbox”:{“useCSS”:true,”useSVG”:true,”removeBarsOnMobile”:true,”hideCloseButtonOnMobile”:false,”hideBarsDelay”:3000,”videoMaxWidth”:1140,”vimeoColor”:”cccccc”,”loopAtEnd”:true,”autoplayVideos”:false},”autodetect”:{“autodetectImage”:false,”autodetectVideo”:false,”autodetectExclude”:”.no-swipebox”}};

    So, it looks like the init.js script is getting the value from the database correctly.

    Thread Starter aviarts

    (@aviarts)

    However, I still only get the SVG image regardless of checking or unchecking the Use SVG box. Any other debugging suggestions?

    Plugin Author Leonardo Giacone

    (@leopeo)

    Thanks @aviarts,
    the values in the database look right.
    I know it sounds stupid but could you try to empty the browser cache?

    Please let me know.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Use custom icons’ is closed to new replies.