Disable image lightbox from theme

  • Resolved Albatros Desta

    (@albatros-desta)


    6 years, 3 months ago

    Hello Patryk,

    First of all thank you for creating this great theme.

    Secondly, we have a conflict with another plugin (JT Calendar – for events). It looks when user opens a image from a event gallery (a special page of that plugin) your theme initiates a lightbox on top of the other lightbox theme. You can check it here:
    https://www.dorozkarnia.pl/new_wordpress_2/events_list/raz-dwa-trzy-warszawiakiem-jestes-ty/

    Can you tell us how to disable that event, opening lightbox when image is clicked on that page, or at least point us what is the event/function initiated in WordPress that generates that, so we can try to disable the other lightbox?

    Thank you,
    Jan Kalinowski
    Desta Design

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Patryk Kachel

    (@limestreet)

    Hi Jan,

    the code you need to adjust is located in /js/pencil.js ~lines 242-274 (you can see it there, but enqueued file is named pencil.min.js)

    Best way would be to dequeue file from parent directory, copy it to child theme directory, then modify it and enqueue new one…
    Please see: https://codex.www.ads-software.com/Function_Reference/wp_dequeue_script
    and: https://codex.www.ads-software.com/Plugin_API/Action_Reference/wp_enqueue_scripts

    I hope it helps you a bit ??

    Thread Starter Albatros Desta

    (@albatros-desta)

    Great, that’s exactly what I was looking for.

    What if I just modify the pencil.js/pencil.min.js file manually and upload it /overwrite it via FTP?

    Your solution would allow to leave your .JS file untuouched, but just override it with modified one. Is that it?

    Jan
    Ps. Thank you for rapid response!

    Theme Author Patryk Kachel

    (@limestreet)

    If you modify it directly, it will be overwritten when you update theme…
    Here is the link to resource about child themes: https://developer.www.ads-software.com/themes/advanced-topics/child-themes/

    Thread Starter Albatros Desta

    (@albatros-desta)

    A good point, thank you. We’ll do that. I’ll let you know in case of any issues.

    Thread Starter Albatros Desta

    (@albatros-desta)

    Actually I can’t get that Child Theme to work.

    When I activate it, and run dequeue your pencil.min.js (‘pencil-scripts’ handle), and enqueue my changed one JS (in my Child Theme functions.php), I got error in browser console: 

    pencil.min.js?ver=1.1:2 Uncaught ReferenceError: pencil is not defined
    at HTMLDocument.<anonymous> (pencil.min.js?ver=1.1:2)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
(anonymous) @ pencil.min.js?ver=1.1:2
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2.

    Which points to this line of pencil.js:
    var pageNum = parseInt(pencil.startPage, 10) + 1;".
    I cannot get this to work.

    This is my functions.php:
    https://www.dorozkarnia.pl/new_wordpress_2/wp-content/themes/pencil-child/functions.php.txt

    Also some messages you got entered in function “pencil_scripts()”, like “loadMoreText”, and this cannot be modified by Child Theme, I believe. Plus “requires” commands (eg. “/inc/template-tags.php”), that cannot be handled by WordPress dependencies, so I cannot modify those otherwise than directly in your code…
    Do you really think a sensible Child Theme can be created out of this Theme?

    Theme Author Patryk Kachel

    (@limestreet)

    If you look carefully at functions.php file in pencil theme, then on lines ~220 to ~239 you’ll see extra variables passed to pencil-scripts (via wp_localize_script function)

    
global $wp_query;
$pencil_ajax_max_pages = $wp_query->max_num_pages;
$pencil_ajax_paged = ( get_query_var( 'paged' ) > 1 ) ? get_query_var( 'paged' ) : 1;
$home_page_slider_play_speed = get_theme_mod( 'home_page_slider_play_speed', 0 );
$home_page_slider_autoplay = ( 0 == $home_page_slider_play_speed ) ? false : true;

// Passing theme options to pencil.js.
wp_localize_script(
 'pencil-scripts', 'pencil', array(
 'home_page_slider_img_number' => get_theme_mod( 'home_page_slider_img_number', 1 ),
 'home_page_slider_play_speed' => $home_page_slider_play_speed,
 'home_page_slider_autoplay' => $home_page_slider_autoplay,
 'loadMoreText' => esc_html__( 'Load more posts', 'pencil' ),
 // 'loadingText' => esc_html__('Loading posts...', 'pencil'),
 'noMorePostsText' => esc_html__( 'No more posts to load', 'pencil' ),
 'startPage' => $pencil_ajax_paged,
 'maxPages' => $pencil_ajax_max_pages,
 'nextLink' => next_posts( $pencil_ajax_max_pages, false ),
 )
);

    You need to pass them to your script (or use the same handle in your script).

    Thread Starter Albatros Desta

    (@albatros-desta)

    Thank you again for quick reply, Patryk.

    But I have problem more fundamental than passing params from Child Theme.
    I cannot even dequeue your script, because of the error I’ve shown above (the pencil.js script crashes).

    Where am I suppose to dequeue your JS script (‘pencil-scripts’ handle; pencil.min.js)? In functions.php of my Child Theme or in the functions.php of your Parent Theme (and with what priority)?

    If in my Child Theme’s functions, than it does not make sense, as I can only dequeue scripts that are already enqueued, as stated here wp_dequeue_script (“To be dequeued, the script must have been enqueued.”) – AND – my functions.php is loaded “right BEFORE” your functions.php, as stated here advanced-topics/child-themes/ (“it is loaded right before the parent’s file”).

    It would make sense if I would dequeue from your script after enqueuing, or with some ordered priority like, but than this change would be lost after update, so it’s also no good. I’ve tried everything and I still cannot dequeue your file without any errors.

    It looks like I can’t get the order and dependencies, right. It’s quite complex here.

    Theme Author Patryk Kachel

    (@limestreet)

    Can you share the code you used to dequeue the script?

    Your function should be hooked into wp_enqueue_scripts with low priority (for example 100)
    pencil_scripts function is hooked with priority 10 (default):
    add_action( 'wp_enqueue_scripts', 'pencil_scripts' );

    So your function should be hooked like this:
    add_action( 'wp_enqueue_scripts', 'your_custom_function', 100 );

    Then dequeue script in function named your_custom_function

    Hope it’s clear ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Disable image lightbox from theme’ is closed to new replies.