Member Avatar for alexanderlegend

Colorbox is a modal window that is jQuery based and is lightweight. I decided to use it in my blogger blog for a one-time subscription box based on the tutorial at: http://www.bloggermint.com/2011/06/how-to-create-modal-subscribe-box-using-jquery/

On a test blog, it worked perfectly. : (Ignore the missing images)

However, when I tried the same thing on the main blog(http://neuronhub.com), it failed to load. The main blog has few other jQuery plugins that I thought might be interfering. So, I tried eliminating them one by one to see if the modal window shot up. But no luck.

Could you have a look at the page source code and give a possible explanation or solution?

Thank you!

  • 2 Contributors
  • 1 Reply
  • 223 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Sorcher

Dani AI

Generated

Short expert summary and targeted checks (builds on 's rel observation and 's test-vs-main symptoms).

Start with quick diagnostics that reveal the common causes when something works on a stripped test blog but not the full template:

  • Inspect the browser console (F12) and the Network tab for JavaScript errors and 404s (missing colorbox.js or colorbox.css) or mixed‑content blocks when the blog is HTTPS.
  • Verify which jQuery instance the template exposes and whether ColorBox actually attached to it (conflicts from multiple jQuery versions are the usual culprit).
  • Confirm the ColorBox script and CSS load before the initialization runs and that the HTML anchor/inline target the script expects is present in the final DOM (Blogger can rewrite or escape attributes).

Quick snippets for safe checks and fixes (different approach than the examples already posted):

/* plugin presence check */
if (typeof jQuery === 'undefined') {
  console.log('jQuery not present');
} else if (!jQuery.fn || !jQuery.fn.colorbox) {
  console.log('ColorBox not attached to this jQuery instance');
} else {
  console.log('ColorBox ready');
}

If multiple libraries are present, isolate ColorBox on a private jQuery handle:

var $B = jQuery.noConflict();
$B(function(){
  if ($B.fn.colorbox) $B('a.subscribeModal').colorbox({inline:true, width:'480px'});
});

Notes and blogger-specific gotchas:

  • Mixed protocol (http vs https) will silently block resources; ensure all scripts/CSS use the same protocol or protocol-relative URLs.
  • If loading ColorBox inline (targeting a hidden div), ensure that div exists and is display:none at page load; missing inline content makes the modal appear broken.
  • Caching/minification or gadgets that inject jQuery asynchronously can cause init code to run too early — place init after the plugin <script> or initialize on a user interaction (click) or window.load.

One-time subscription behavior: prefer localStorage or a short-lived cookie to avoid repeated popups. Common troubleshooting checklist: console errors, network 404s, duplicate jQuery, plugin load order, protocol mismatch, and missing CSS.

Member Avatar for Sorcher

Hello Alexander.
i am using ColorBox myself.
As i view your source code i see you have not set the <a href that comes right before the <img link correctly. You are missing the rel=""

The jQuery code provided from ColorBox looks like this: (i removed some that i personally dont use)

<script type="text/javascript">
$(document).ready(function(){
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
});
</script>

if you got the necessary jQuery codes from ColorBox you make an image appear in the colorbox like this:

<a href="anytarget.php" rel="example3"><img src="image.jpg"/></a>
Edited by Sorcher because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.