Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 20, 2013 at 7:11 pm #202656
    penumbra

    Hello –
    I’ve tried a couple ways to disable the lightbox with mixed success.
    Adding class=”noLightbox” to the link works on some although not all my test posts.
    So I created a Child Theme and per other forum posts on disabling the Lightbox
    edited js>avia.js changing the code to:
    //activates the prettyphoto lightbox
    //$(container).avia_activate_lightbox({callback:’avia_lightbox_callback’});
    This did not work. Not sure if there has to be something in the Child Theme to call the js.
    I then edited the avia.js in the parent theme and that also does not work.
    I emptied the cache and reloaded the page each time.
    Any suggestions?
    Thanks for your help.

    • This topic was modified 11 years ago by penumbra.
    December 22, 2013 at 11:08 am #203028
    Dude

    Hey penumbra!

    If you want to disable the lightbox with a child theme add following code to the functions.php file

    
/*
 * Register frontend javascripts:
 */
if(!is_admin())
{
	add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100);
}

function avia_register_child_frontend_scripts()
{
	$child_theme_url = get_stylesheet_directory_uri();

	wp_dequeue_script('avia-prettyPhoto');
	wp_dequeue_style('avia-prettyP');
	wp_dequeue_style('avia-custom');

	//register js
	wp_register_script( 'avia-default-child', $child_theme_url.'/js/avia.js', array('jquery'), 1, false );
}

    Then create a “js” folder within the child theme folder (i.e. enfold_child\js) and create an avia.js file with the folder. Open up the file and insert this code

    
function avia_lightbox_callback(elements,ww,wh){
    (function($){
        elements.each(function()
        {
            var el = $(this);
            if(!el.hasClass('noLightbox'))
            {
                el.addClass('lightbox');
            }
        });
        
        jQuery('a.lightbox').on('click', function() { return false; });
    })(jQuery);
}

    Regards,
    Peter

    December 23, 2013 at 3:06 am #203163
    penumbra

    Hey Peter –
    Thanks so much for this. It would be great to get this to work although I’m getting an error when I activate the Child Theme and the site will not launch with this code in the functions.php file.
    Error:
    Parse error: syntax error, unexpected ‘}’, expecting T_STRING or T_VARIABLE or ‘$’ in /var/www/vhosts/jonathankannair.com/httpdocs/blog/wp-content/themes/enfold-child/functions.php on line 9

    This the contents of the functions.php which I think matches your code above:

    <?php

    /*
    * Register frontend javascripts:
    */
    if(!is_admin())
    {
    add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100);
    }

    function avia_register_child_frontend_scripts()
    {
    $child_theme_url = get_stylesheet_directory_uri();

    wp_dequeue_script('avia-prettyPhoto');
    wp_dequeue_style('avia-prettyP');
    wp_dequeue_style('avia-custom');

    //register js
    wp_register_script( 'avia-default-child', $child_theme_url.'/js/avia.js', array('jquery'), 1, false );
    }
    */

    • This reply was modified 10 years, 12 months ago by penumbra.
    December 23, 2013 at 3:15 am #203167
    penumbra

    And this is the code in enfold-child/js/avia.js:
    function avia_lightbox_callback(elements,ww,wh){
    (function($){
    elements.each(function()
    {
    var el = $(this);
    if(!el.hasClass('noLightbox'))
    {
    el.addClass('lightbox');
    }
    });

    jQuery('a.lightbox').on('click', function() { return false; });
    })(jQuery);
    }

    December 23, 2013 at 9:24 am #203202
    Ismael

    Hi!

    Dude’s code work properly on my end. Please use this on your child theme’s function.php:

    <?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

/*
 * Register frontend javascripts:
 */
if(!is_admin())
{
	add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100);
}

function avia_register_child_frontend_scripts()
{
	$child_theme_url = get_stylesheet_directory_uri();

	wp_dequeue_script('avia-prettyPhoto');
	wp_dequeue_style('avia-prettyP');
	wp_dequeue_style('avia-custom');

	//register js
	wp_register_script( 'avia-default-child', $child_theme_url.'/js/avia.js', array('jquery'), 1, false );
}

?>

    Then create a js folder inside the child theme folder, create the avia.js file. Add this code:

    function avia_lightbox_callback(elements,ww,wh){
    (function($){
        elements.each(function()
        {
            var el = $(this);
            if(!el.hasClass('noLightbox'))
            {
                el.addClass('lightbox');
            }
        });
        
        jQuery('a.lightbox').on('click', function() { return false; });
    })(jQuery);
}

    Please check it again.

    Regards,
    Ismael

    December 23, 2013 at 4:31 pm #203299
    penumbra

    Hi Ismael –
    Thanks for the update. I pasted your code exactly for both files, possibly I missed a line in the functions.php originally. The site launches although I am not sure it’s working correctly. I still have the round hover circle over the images when I remove the class=”noLightbox” from the post text. I assumed that hover was part of the lightbox since the class”noLightbox” turned it off for some images although I want to disable that on all images (the images don’t open in the lightbox frame so that part seems to be working). In one case the hover is a double ended arrow and opens the image and in another case a curved arrow and takes you to the post. I want to remove that hover from most if not all blog images. What’s the best way to do this? Is it part of the lightbox or separate?
    Best,
    Jonathan

    December 24, 2013 at 11:10 am #203535
    Dude

    Hey!

    Please replace the code in avia.js with

    
function avia_lightbox_callback(elements,ww,wh){
    (function($){
        elements.each(function()
        {
            var el = $(this);
            if(!el.hasClass('noLightbox'))
            {
                el.addClass('noLightbox');
            }

            if(!el.hasClass('noHover'))
            {
                el.addClass('noHover');
            }
        });
        
        jQuery('a.lightbox').on('click', function() { return false; });
    })(jQuery);
}

    Best regards,
    Peter

    March 18, 2014 at 1:29 pm #239322
    penumbra

    Thanks for this. I was not successful getting it to work this way. With your help I later took another approach that did work.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘disabling lightbox’ is closed to new replies.