Take the 2-minute tour ×

I am using UberGallery for my site: http://www.ubergallery.net/

Here is a sample of the page with Uber Gallery called directly in the HTML http://www.goloyal.com/clients/dealers-mlm.php

If you click on a thumbnail it opens the popup div.

Some pages have a lot of thumbs, so they load slowly, so I tried to call the Uber Gallery through an Ajax so the page would load, then the thumbs could take their time: /old-dealers-mlm.php

The loader works exactly as I hoped, however when you click on the thumbnails it opens in a new page (not the pop up div)

I am calling THIS div in my ajax /div-dealers-mlm.php Which also has the popups showing correctly.

I do understand that the pages are loaded separately, and I know it requires a special conversation to tell one page to do something in the other. However, I am not sure what I need to relay to the parent/original page, or how to do it to start testing. Any ideas?


share|improve this question
I don't know which page you're referring to but on the homepage you're loading script.js before jQuery is included so it's throwing the Can't find variable: $ error. If you're including your ajax code in the same order then it might be that jQuery isn't on the page yet. Try using your browser's developer tools to see if there are any errors. Here are some instructions for using developer tools in...Firefox, Chrome, IE. –  Joe Jun 25 '13 at 21:21
This is the page I am trying it on: goloyal.com/clients/old-dealers-mlm.php I moved AJAX to the top... it does not show the pop up when you click the thumbails. This is the page called by the AJAX - goloyal.com/clients/div-dealers-mlm.php and the pop up DOES work fine on that page. Error console shows a corrupt png and bad encoding on the inner div (since I did not make it a full HTML page) but my concern is more along the lines of having one inside the other, the pop ups do not know where to show up? Kind of like target=parent... but I know thats not jquery –  Joe Manzo Jun 26 '13 at 22:05
add comment

1 Answer

up vote 0 down vote accepted

The problem is that you're setting up the colorbox on links that don't exist yet. You need to replace your current colorbox code with this:

    $(document).on("click", "a[rel='colorbox']", function(e){
        var url = this.href;
        $.colorbox({href: url, maxWidth: "99%", maxHeight: "99%", opacity: ".5"});

This uses jQuery .on() to bind the click event to all current and future a elements with a rel attribute that equals colorbox.

share|improve this answer
I added that in and it actually looks like it starts to think about loading it on the same page... but then it ends up going to a new page. goloyal.com/clients/old-dealers-mlm.php I am thinking I may have it buried somewhere else in my code, but I haven't been able to find it. I do see colorbox is loaded twice (because of a testing issue) but I did change both occurrences. I hope I am just missing something small? –  Joe Manzo Jun 27 '13 at 23:42
@JoeManzo - really sorry about that, I forgot to use e.preventDefault();. This prevents the default action (going directly to the image) and so the colorbox will fire. I've updated my answer - just change function(){ to function(e){ and add in e.preventDefault(); and it will work. –  Joe Jun 28 '13 at 9:59
DONE & DONE! Thank you so much. +++ And thank you for explaining each part. Both issues made sense, assigning colorbox to non-existing links, since both pages are created at the same time. And then the use of the preventDefault, I had no idea they had a function for that ;) Exactly what I needed –  Joe Manzo Jun 28 '13 at 15:23
@JoeManzo - no problem :) glad it's working for you! –  Joe Jun 28 '13 at 15:28
add comment

Your Answer


