WordPress.org

Ready to get started?Download WordPress

Forums

Shadowbox JS
Shadow Box not working on some pages (35 posts)

  1. Deyson
    Member
    Posted 2 years ago #

    Hello, I just wanted to know why the shadow box is not working on this page: http://motion-master-templates.com/test-page-2# and it is working on the home page.

    Click on the thumbnails to see.

    Thank you :)

    http://wordpress.org/extend/plugins/shadowbox-js/

  2. Marventus
    Member
    Posted 2 years ago #

    Hi!
    That's because you don't seem to be including the shadow-box.js script in your pages.
    In your home, on line 682, you have:

    <script type='text/javascript' src='http://motion-master-templates.com/wp-content/uploads/shadowbox-js/b6872cbe471e004ef0fd479a386bcc99.js?ver=3.0.3'></script>

    But that line is not present in your page's code.

  3. Deyson
    Member
    Posted 2 years ago #

    Hello Marventus thank you for the response.

    I see the missing code you pasted above on line 1060 on the test page.

    I made sure to place '<?php get_footer(); ?>’ in the end of the page template, as I saw other people solved the problem with that code.
    Maybe I am placing it wrong, please advice.

    Thank you very much for your time.

  4. Marventus
    Member
    Posted 2 years ago #

    I made sure to place '<?php get_footer(); ?>’ in the end of the page template

    Did you mean wp_footer? because get_footer() would have no effect if you call it that way.

    Also, you seem to be using the Quick Cache plugin on your site. Try emptying and renewing the cache and see if the script call appears in your footer. If nothing happens, try disabling the plugin.
    Here's a piece of code to test whether or not wp_footer is working. Paste this in your functions.php file, anywhere between the first </php and last ?> symbols:

    function mmt_footer_test() {
    echo '<p><strong>The footer works!<strong></p>';
    }
    add_action('wp_footer', 'mmt_footer_test');
  5. Deyson
    Member
    Posted 2 years ago #

    Hello and thank you.

    I have '<?php get_footer(); ?>' in my page template for that page where shadowbox does not work. I have '<?php wp_footer(); ?>’ in the footer.

    I disabled the quick cache and I tested the code you send and it showed up.

    Here is the full code for that page template in question:

    <?php
    
    /* Template Name: Filter */
    
    get_header(); ?>
    
    <div class="category_choice">
    <h2>Choose from the following templates.</h2>
    <div class="hspan"></div>
    <div class="sort">Sort:</div>
    <?php filters_generate(); ?></div>
    
       <div id="container">
    
           <div id="content" role="main">
    
               <?php get_template_part( 'loop', 'page' ); ?>
    
               <?php $temp_query = $wp_query; ?>
               <?php query_posts('category_name=&showposts=400'); ?>  
    
               <?php while (have_posts()) : the_post(); ?>  
    
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>
    
    <h2></h2>
    <div class="csc_post2">
    <div class="csc_post_title">
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><h2><?php the_title(); ?></h2></div>
    
    <div class="entry-summary">
    
    <?php the_excerpt(); ?>
    </div>
    </div>
    </div>
    
    <?php endwhile; ?>  
    
    </div><!-- #content -->
    		</div><!-- #primary -->
    
    <?php get_footer(); ?>

    Thank you for looking into this :)

  6. Marventus
    Member
    Posted 2 years ago #

    I have '<?php get_footer(); ?>' in my page template

    Sorry, my bad. That is the correct way of doing it. I thought you meant you had get_footer() instead of wp_footer in your footer.php file. I'll take a look at the code you posted.
    On a different note, when pasting more than 10 lines of code, you are supposed to use Pastebin as per forum guidelines. That way, threads are easier to read and don't get bloated.
    Thanks!

  7. Matt Martz
    Member
    Plugin Author

    Posted 2 years ago #

    Shadowbox does appear to be loaded on the page correctly. However none of the links contain rel="shadowbox" on them. As such shadowbox will never try to open them. I see some of the URLs are for .mov files, and in general the shadowbox plugin should add them, unless the automation is disabled or your theme is not processing things appropriately.

    You could always add rel="shadowbox" manually to the links. One other thing to note, is it looks like you are also attempting to use some other type of lightbox plugin (lightview) which could be interfering.

  8. Deyson
    Member
    Posted 2 years ago #

    Hello Marventus, sorry about the bloating :)
    Here is the pastebin link: http://pastebin.com/7jEGfATm

    Hello Matt. :)
    The automation is enabled and the same excerpts are working on my home page:
    http://motion-master-templates.com/

    I would love to avoid having to add a rel=shadowbox to all my excerpts.

    In regards to lightview. I removed the code and I still get the same results. I was playing with a future way of presenting my lightbox like this: http://motion-master-templates.com/test-page-shadowbox with inline text.
    I am not sure if shadowbox could achieve the same result though.

  9. Marventus
    Member
    Posted 2 years ago #

    @Matt: You are absolutely right. Thank you for pointing that out.

    @Deyson: After reading Matt's comment, I think I know what the issue might be:
    In the page where shadowbox is not working, your rel attributes are being included with the "bookmark" value instead the proper shadowbox values.
    Since shadowbox is now loading in your pages, I can only think of 2 reasons why that could be happening:
    1. The shadowbox value is being overwritten by the other one (through a plugin or theme feature);
    2. The shadowbox plugin is checking for the existence of a rel attribute, and since it is finding one, it does not add its own.
    You should try to find where and how that rel="bookmark" code is being generated and you'll most likely solve the problem.

  10. Deyson
    Member
    Posted 2 years ago #

    I have rel=“bookmark” inside the page template code like this (part of the code), the full code is linked above.:

    <div class="csc_post2">
    <div class="csc_post_title">
    <a>" rel="bookmark" title="<?php the_title(); ?>"><h2><?php the_title(); ?></h2></div>
    
    <div class="entry-summary">
    
    <?php the_excerpt(); ?>
    </div>
    </div>
    </div>
  11. Marventus
    Member
    Posted 2 years ago #

    What happens if you remove the:

    rel="bookmark"

    chunk? Dos the shadowbox plugin work then?

    Edit: You also seem to have some HTML errors in your page code. Check this out:

    <h2></h2>
    <div class="csc_post2">
    <div class="csc_post_title">
    <a href="http://motion-master-templates.com/member-templates/tablet" rel="bookmark" title="Tablet"><h2>Tablet</h2></div>

    On line 1, you have an empty <h2> tag, and on line 4, the <a> tag opened at the beginning is never closed.

  12. Deyson
    Member
    Posted 2 years ago #

    I removed the <h2></h2>. I removed the rel=“bookmark” and I closed the tag with an . and shadowbox still does not work. :(

    Any more ideas?

    Thank you again for all your time I am very grateful. :)

  13. Deyson
    Member
    Posted 2 years ago #

    Hello. I also discovered that on my search results the shadowbox is not working either. So maybe it is not the page template that is causing the error: http://motion-master-templates.com/?s=final&submit=Search

    Thank you. :)

  14. Marventus
    Member
    Posted 2 years ago #

    Thank you again for all your time I am very grateful. :)

    No problem: I'm stubborn like that, ;-)

    Your HTML seems fine now so it should be working. I have two ideas:
    1. Test a different lightbox plugin see if the issue lies with the shadowbox plugin or your theme;
    2. Force the "rel" stuff from your templates, by changing this:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">

    to this:

    <a href="<?php the_permalink() ?>" rel="bookmark shadowbox[sbpost-<?php echo $post->ID ?>];width=848;height=480" title="<?php the_title(); ?>">

    For option 2, if you don't want to hardcode the width and height of the shadowbox and want to keep it dynamic, you could use a custom field for each value, and then test if those values are set, and if they are not, just go with the regular size of 848*480.

  15. Deyson
    Member
    Posted 2 years ago #

    Any other lightbox you may want to recommend I try out, since there are so many out there? :)

    The thing with the code above is that it pertains to the title of the excerpt that links to the actual post and not the excerpt content itself which is what is holding the shadowbox item. When I changed the code it made the gray area blank.

    The weird thing is that the search results worked before with the shadowbox. Now I have no clue what may have broken it.

    Thank you :)

  16. Marventus
    Member
    Posted 2 years ago #

    Any other lightbox you may want to recommend I try out, since there are so many out there? :)

    We have Fancybox2 (jQuery-based) running in one of your sites: it works pretty well. and it has a lot of options.

    The thing with the code above is that it pertains to the title of the excerpt

    You are right, sorry about that. Could you go back to your Pastebin and create a new version of this paste with the latest changes to your code?

    The weird thing is that the search results worked before with the shadowbox.

    Did you change any options or made changes to your search templates? It seems you might have to run some tests as well, perhaps with an unmodified/earlier version of your theme?

  17. Deyson
    Member
    Posted 2 years ago #

    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: http://pastebin.com/NfK3YKTn

    Here is the paste bin for my search.php template page: http://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 :)

  18. Marventus
    Member
    Posted 2 years ago #

    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.

  19. Deyson
    Member
    Posted 2 years ago #

    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:
    http://motion-master-templates.com/test-page-2

    Thank you very much again for your time :)

  20. Marventus
    Member
    Posted 2 years ago #

    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.

  21. Marventus
    Member
    Posted 2 years ago #

    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();
  22. Deyson
    Member
    Posted 2 years ago #

    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: http://motion-master-templates.com/member-templates/tablet

  23. Deyson
    Member
    Posted 2 years ago #

    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 .

  24. Marventus
    Member
    Posted 2 years ago #

    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:

    http://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?

  25. Marventus
    Member
    Posted 2 years ago #

    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.

  26. Deyson
    Member
    Posted 2 years ago #

    Hello.
    I added the code as above into my functions.php, here is the whole code: http://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: http://motion-master-templates.com/test-page-2

  27. Deyson
    Member
    Posted 2 years ago #

    Thank you very much for your continued help. :)

  28. Marventus
    Member
    Posted 2 years ago #

    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.

  29. Majklas
    Member
    Posted 2 years ago #

    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 http://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..

  30. Majklas
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic