[Plugin: Shadowbox JS] Shadow Box not working on some pages

Hello. My internet went down for a bit.

It seems fancy box does not work with auto recognize video links. So I tried Orangebox and it seems to open a lightbox in the main page ( video did not show up though ) but on the search or filter page it did not try to load at all and it went straight to the video page same as the shadowbox issue I am having now.

Here is the paste bin for my filter.php template page: https://pastebin.com/NfK3YKTn

Here is the paste bin for my search.php template page: https://pastebin.com/PtJm3eW3

I also tried switching themes and shutting off all other plugins and I also reverted to the original search.php and still shadowbox does not work on my filter test page or search results page. ??

Thank you again ??

Hello again. The fancybox2 plugin’s website states the plugin:

Can display images, HTML elements, SWF movies, Iframes and also Ajax requests.

That means it should add the appropriate rel attributes to <img>, <iframe> and <object> tags, so you should give it a try.

If you would rather stick with shadowbox, we can keep looking into this. About the code you posted, I can’t do much with it because both templates seem to rely on the same core function, get_template_part, to retrieve the actual content of your posts.
You need to track down what file(s) the templates are pointing to and add the shadowbox rel stuff I shared earlier there.

Hello Marventus. After a full day of pulling my hair here is my update:

Fancybox does not recognize links so on my homepage nothing happens.

In regards to the excerpts. I tried switching <?php the_excerpt(); ?> to <?php the_content(); ?> and switch the shadowbox works with the linked images. (of course the style is way off since my content images are full size)
So it seems that the problem is with <?php the_excerpt(); ?> it seems to be not executing the shadowbox action.

I assume that using <?php the_excerpt(); ?> is being called straight from the post, just as <?php the_content(); ?> is calling straight from the content.

I have no clue on what else can do, since it seems this is the only way to call in an excerpt is with <?php the_excerpt(); ?>.

Also, on my homepage the excerpts are being called with the “category shortcode plugin”, I tried looking inside the plugin so see how the excerpt is called and I could not figure out the code at all.

Here is my results. The first post labeled “Web Video – Test” I copied the the excerpt and pasted into the content area and as you can see it works there. I am using the <?php the_content(); ?> instead of <?php the_excerpt(); ?> in the filters.php to get this to work, of course the will not solve my problem, but maybe it will help solve this riddle:
https://motion-master-templates.com/test-page-2

Thank you very much again for your time ??

the shadowbox works with the linked images

Yeah, I can confirm that it does work, so good progress there! Did you try keeping the_excerpt call and customizing its contents in the page/post editing window? If you don’t see the excerpt textarea in the page/post options, click on Screen Options (top right hand corner of the admin screen) and make sure “Excerpt” is checked.

Fancybox does not recognize links so on my homepage nothing happens.

How are you going about calling fancybox in your theme? Sometimes it needs to be forced in there for it to work as expected.
The way I do it is like this:
1. Deregister the Fancybox JS script and register it again from my functions.php file:

// START constant definitions (needs to be placed OUTSIDE of any functions
if (!defined('WP_CONTENT_URL'))
      define('WP_CONTENT_URL', get_option('siteurl').'/wp-content');
if (!defined('WP_PLUGIN_URL'))
      define('WP_PLUGIN_URL', WP_CONTENT_URL.'/plugins');
// END Constant definitions

// START Fancybox JS script registration
function mmt_my_fancybox() {
wp_dequeue_script('jquery.fancybox');
wp_enqueue_script('jquery.fancybox', WP_PLUGIN_URL.'/fancybox2/jquery.fancybox.js', array('jquery'), '2.0.3', true);
}
add_action('wp_enqueue_scripts', 'mmt_my_fancybox');

2. Then, in your theme’s general.js or custom.js file (if you don’t have one, you can create one and register it in the php function above):

jQuery(function() {
// Custom Fancybox (add more file extensions as necessary)
   var select = jQuery(
      'a[href$=".bmp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".BMP"], a[href$=".GIF"], a[href$=".JPG"], a[href$=".JPEG"], a[href$=".PNG"]'
      );
      select.attr('rel', 'fancybox');
      select.fancybox({
   });
});

And then it works like a charm.

I forgot to point out that, if you won’t be calling fancybox with any custom parameters, you should change this:

select.fancybox({
   });

to just this:

select.fancybox();

I followed your directions for for fancy box. I registered it like this in the functions.php:
‘function my_scripts_method() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘url of where my custom.js is located’);
wp_enqueue_script( ‘jquery’ );
}

add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);’

And it does not work where shadowbox worked before: https://motion-master-templates.com/member-templates/tablet

I had to remove the above code. It seemed to be causing conflict with a plugin.

The excerpts are there. It is just so wierd that content items work with shadowbox but excerpts do not .

The code you pasted is incorrect. You do not need to deregister jQuery. I strongly recommend you read the following Codex articles to understand what exactly it is we are doing: wp_register_script, wp_deregister_script, wp_enqueue_script

Here is the exact PHP code you should paste in your functions.php. I added another line to completely remove fancybox2 code from wp_head:

/*
START constant definitions (to be placed OUTSIDE of any functions)
*/
if (!defined('WP_CONTENT_URL'))
      define('WP_CONTENT_URL', get_option('siteurl').'/wp-content');
if (!defined('WP_PLUGIN_URL'))
      define('WP_PLUGIN_URL', WP_CONTENT_URL.'/plugins');
/*
END Constant definitions
*/

/*
START Custom Fancybox
*/
function mmt_my_fancybox() {
wp_dequeue_script('jquery.fancybox');
wp_enqueue_script('jquery.fancybox', WP_PLUGIN_URL.'/fancybox2/jquery.fancybox.js', array('jquery'), '2.0.3', true);
wp_enqueue_script('mmt_custom_js', get_bloginfo('template_url').'/rel/path/to/script/custom.js', false, '1.0', true);
}
add_action('wp_enqueue_scripts', 'mmt_my_fancybox');
// Remove default fancybox function
remove_action('wp_head', 'fancybox');
/*
END Custom Fancybox
*/

Make sure to replace:

path/to/script/from/wp-content

with the path to your custom.js file from the wp-content folder.

Example:
if your custom JS script was located in:

https://motion-master-templates.com/member-templates/wp-content/themes/MMT_Theme/includes/js/custom.js

The line containing the path should be:

wp_enqueue_script('mmt_custom_js', get_bloginfo('template_url').'/includes/js/custom.js', false, '1.0', true);

Also, did you try playing with the Excerpt a little?

If that doesn’t work, try replacing the above code with this:

/*
START Custom JS
*/
function mmt_custom_js() {
wp_enqueue_script('mmt_custom_js', get_bloginfo('template_url').'/rel/path/to/script/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'mmt_custom_js');
// Remove default fancybox function
remove_action('wp_head', 'fancybox');
/*
END Custom JS
*/

Same as above for replacing the path to custom.js.

Hello.
I added the code as above into my functions.php, here is the whole code: https://pastebin.com/WigbLcZM

I also changed the custom.js code to include .mov since movie files are being linked:
‘jQuery(function() {
// Custom Fancybox (add more file extensions as necessary)
var select = jQuery(
‘a[href$=”.bmp”], a[href$=”.gif”], a[href$=”.jpg”], a[href$=”.jpeg”], a[href$=”.png”], a[href$=”.BMP”], a[href$=”.GIF”], a[href$=”.JPG”], a[href$=”.JPEG”], a[href$=”.PNG”], a[href$=”.mov”], a[href$=”.MOV”]’
);
select.attr(‘rel’, ‘fancybox’);
select.fancybox();
});’

Yes I played around with excerpt and still nothing. I replaced the href with a new one and I removed some other text on the “Web Video – Test” : I switched back to the excerpt code: https://motion-master-templates.com/test-page-2

Thank you very much for your continued help. ??

Your custom.js script is not being added correctly. Since your theme is a child theme of Twenty Eleven (you neglected to mention this, BTW, but no worries), when you call get_bloginfo('template_url') you get the URL of the parent theme, not the child one.
Try changing this line:

wp_enqueue_script('mmt_custom_js', get_bloginfo('template_url').'/js/custom.js', false, '1.0', true);

To:

wp_enqueue_script('mmt_custom_js', get_bloginfo('stylesheet_directory').'/js/custom.js', false, '1.0', true);

You might also want to merge your jquery_method and mmt_custom_js functions since they both deal with script registration, and comment out the shadowbox iphone function just in case. Here is a new paste with those changes already incorporated.

sorry to bother You here, but when i create a topic, it says TOPIC CLOSED.

Hello,

thank’s for a great plugin. I found it just yesterday looking for something to play my youtube videos in lightbox-popup.
The unfinished site is https://c.nereal.us and in the front page I want to have nivo slider (it was in the theme hardcoded) and in sidebar your awesome “widget”. So maybe I’m messed up with the settings (now left defaults), or the jQueries are killing each other (but nivo still works)..
The page shadow-works is really showing that my install is ok.

Please reply, I’m new to jQuery..

ha, just figured it out ?? disable all the settings and add the rel=”shadowbox” in my youtube link href:)
t.y. 4 Ur time ??

Hello Marventus. I apologize but when it comes wp_enqueue_scripts I get lost, I still can not make sense of it. So I just copy and paste what you sent me.

Unfortunately it does not recognize my href links with movie still: ?? https://motion-master-templates.com/

Maybe it might be just easier for me to go in and hard code in the rel= to either shadowbox or fancy box on each and every post and avoid using a plugin altogether.
What do you think?

Thank you so very much for your time again.

P.S. I like your geek invasion website.