Link 'Out' of jQ

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 :(

So your problem is that it's not loading the post when you click on the little image thumbs? If you inspect the ajax response, it looks like it's throwing an error... — Matthew Blancarte, Apr 16 '12 at 06:40
I'm not actually trying to load the posts - I want to maintain the aesthetic but instead of linking to a blog entry as on http://onioneyethemes.com/yin-and-yang/ I want to link off site. I changed the target URL on the demo site w/ Chrome - worked fine when linking internally, hung when external. How do I find the response? — Alex Masters, Apr 16 '12 at 06:53

Silviu-Marian · Accepted Answer · 2012-04-17T04:07:16.643

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:

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:
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:

On <a class="project-link" href="http://events.colorspace.am/...> add the target="_blank" attribute.
Open in Notepad or whatever /wp-content/themes/yin_and_yang/js/jquery.quicksand.init.js
Towards the start of the file locate a line saying
```
eQgetProjectViaAjax = function(e) { 
```

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);
}

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

edited Apr 17 '12 at 04:07

answered Apr 16 '12 at 07:06

Silviu-Marian

10,565
6
50
72

I'll give the first one a try in a second ..but just wondering.. is there no way to have a div (or something of the sort) that exists outside but on top of the ajax functions? Aside: RE: #2 - can it not just be in the parent window vs a new one? – Alex Masters Apr 16 '12 at 07:12
A bit lost. I made 'link.php' in the root and it contains only I changed the link to /link.php?url= and then the web address but.. it doesn't appear to be doing anything. Where would the – Alex Masters Apr 16 '12 at 09:15
Yes, but first make sure the link on the thumbnail is right. `http://ii.colorspace.am/link.php?url=http://events.colorspace.am/g/20120331` works for me. – Silviu-Marian Apr 16 '12 at 09:49
Just c+p'd the URL into the href thingy. No dice :( – Alex Masters Apr 16 '12 at 10:12
Into the href? Href as in ``? Anchor href property? Using like... standard html? I was assuming from the start that there'd be a wordpress admin option (maybe as defined by the theme?) which allows you to tell the gallery what link it should load. In the absence of something like that, it means the gallery takes posts from the blog and turns them into a gallery. Which means you have to create a post for the gallery which's source contains this: `` – Silviu-Marian Apr 16 '12 at 11:50
What I'm doing is external to the portfolio. It employs the same design, but it's essentially hard coded. I manually add and arrange each entry, and it's simply to avoid the less than appealing interface of my print provider. – Alex Masters Apr 17 '12 at 03:16
Updated the answer. Check it out. – Silviu-Marian Apr 17 '12 at 04:07
I couldn't find the code you spoke of - only $( "#filter li a" ).click( function(e) { ..trying beneath there. Will let you know how it goes. – Alex Masters Apr 17 '12 at 04:59
I contacted the author of the theme - he said to strip 'the call' for it from http://ii.colorspace.am/wp/wp-content/themes/yin_and_yang/js/jquery.header.custom.js?ver=3.3.1 and then it'll work just dandy. Only problem is, then it won't work on the main page. I'd create two versions of the file and have it based on the template, but that link is within wp_head and things just get real messy from there. – Alex Masters Apr 17 '12 at 05:06
The reference you made was to/within jquery.header.custom.js (?). Not.. quicksand. Having a go now. SORTED! YOU ARE A GOD. – Alex Masters Apr 17 '12 at 05:11

Link 'Out' of jQ

1 Answers1