Question

From the top:

I’m using the Yin & Yang WP theme (‘http://onioneyethemes.com/yin-and-yang/‘) for my portfolio and I’ve run into a little bit of a snag with/on the jQ side of things. I’ve copied the code over into a separate template to use in the same fashion, but I want the thumbnail links to open external pages. If the links are internal – it’s fantastic. External ..not so much. It hangs.

You can see a ‘working’ [not really] version here: http://ii.colorspace.am/events

I rifled through the code and systematically pulled out js references to find the offender.

This seems to be the culprit: http://ii.colorspace.am/wp/wp-content/themes/yin_and_yang/js/jquery.easing.1.3.js?ver=3.3.1 BUT I could be totally off the mark.

Unfortunately, it also seems to control the slider functions (on the thumbnail/drop down contact).

If anyone can tell me what I need to do to allow me to link externally (be it tweak a little code or duplicate the easing file and make some modifications), that’d be greatly appreciated.

I’m guessing the solution can be found in here http://css-tricks.com/snippets/jquery/smooth-scrolling/ but it’s all greek to me, so I wouldn’t have the slightest idea what to do with it 🙁

Answer 1

It’s because of cross-origin policy. You can’t open stuff via ajax unless hosts, ports and protocols match. If you can’t get events.colorspace.am to be ii.colorspace.am there’s two things you can try:

1. on ii.colorspace.am host a .php file that acts as a proxy. Basically it would only contain <?php die(file_get_contents($_GET['url'])); ?> and on top of that some basic validation to make sure that $_GET['url'] is actually a valid address within events.colorspace.am. After you put this file on, you would have to update the link on the gallery so that instead of http://events.colorspace.am/g/20120331 it will be http://ii.colorspace.am/file.php?url=http://events.colorspace.am/g/20120331. So either this, or:

2. Redirect the user. If the gallery link allows you to enter javascript:window.open('http://events.colorspace.am/g/20120331') this would be easy. But in reality some pop-up blockers might cancel that and you’re safer residing to method 1, but replacing the die(file_get_contents(...)) code with this one

   <script> window.location.href=<?php echo json_encode($_GET['url']); ?>; </script> Please wait you will be redirected...
   

   Which should basically redirect the user.

/EDIT:

Finally understood the question. Here’s what you need to do:

1. On <a class="project-link" href="http://events.colorspace.am/...> add the target="_blank" attribute.
2. Open in Notepad or whatever /wp-content/themes/yin_and_yang/js/jquery.quicksand.init.js

3. Towards the start of the file locate a line saying

   eQgetProjectViaAjax = function(e) { 
   

4. Immediately below it, add these lines:

   var href = $(this).attr('href');
   if(href.indexOf('://')!==-1){
       href = href.split('://');
       host = window.location.href.split('://');
       if(href[0]!==host[0]) return setTimeout(function(){ $('#overlay').hide(); },500);
   
       href = href[1].split('/');
       host = host[1].split('/');
       if(href[0]!==host[0]) return setTimeout(function(){ $('#overlay').hide(); },500);
   }
   

5. Save everything and try it again. It will work this time.