Open multiple tabs in the same browser window after clicking image

Question

I'm using wordpress, and I want to open multiple tabs in the same browser window after user click image.
I don't know how to achieve it using wordpress so I'm using javascript/jquery tutorial from stackoverflow, I want the script work on all browser like chrome, firefox, ie etc.

I write this code at html wordpress -- user click small image to download bigger image file:

<a href="http://www.example.com/cutecat1500x1250.png"><img src="http://example.com/wp-content/uploads/2014/12/cutecat125x125.png" border=0></a>

At the same time after user click small image and download process begin, browser will open multiple url in new tabs:
example : http ://www.example.com/cute-dog-collection and http ://www.example.com/cute-owl-collection

From this source :
Open a URL in a new tab (and not a new window) using JavaScript
open multiple tabs on a single window by a single click using JavaScript

This is what I do:
1. make folder js, create new file : newtab.js and then add this code -- I want the script only run on certain page and post, not all pages and posts. Also not blocked:

var win = window.open('url-link', '_blank');
if(win){
    win.focus();
}else{
    alert('Please allow popups for this site');
}

// hijack first anchor that has target=_blank, change href, next document click triggers it
var a = $('a[target="_blank"]')[0];
a.setAttribute('href', 'url-link');
$(document).click(function(){
    $('a[target="_blank"]')[0].click();
});

// create an anchor, add to body, next document click triggers it
var a = document.createElement('a');
a.setAttribute('href', 'url-link');
a.setAttribute('target', '_blank');
document.body.appendChild(a);
$(document).click(function(){
    a.click();
});

var linkArray = []; // your links
for (var i = 0; i < linkArray.length; i++) {
    // will open each link in the current window
    chrome.tabs.create({
        url: linkArray[i]
    });
}

then I add this code at function.php:

function new_tab_script() { wp_enqueue_script('my-newtab-script', get_template_directory_uri() . '/js/newtab.js', array('jquery')); } add_action( 'wp_enqueue_scripts', 'new_tab_script' );
I test it, but after I click small image, nothing happen. I think I must be wrong in the script.

Please help, thank you

score 0 · Answer 1 · answered Dec 16 '14 at 04:11

I think I have the solution for your problem. Here's the code I tested.

<script type="text/javascript" src='JS/jquery-1.9.0.min.js'></script>
<script type="text/javascript">
  jQuery(function () {
    $('#firstLink').off('click');
    $('#firstLink').on('click', function (e) {
      e.preventDefault();
      window.open('PageTwo.html', '_blank');
      window.open('PageThree.html', '_blank');
    });
  });
</script>
</head>
<body>
   <a id="firstLink" href="#">Click me!</a>
</body>

This code is working pretty much the way you want. However you might have the issue about browser blocking your popups (Strictly talking this is a popup window and pretty much the same way the publicity works). You cannot not do anything about that. The user must manually allow you to open the tabs.

I hope it solves your problem.

Thank you for your answer, sch4v4.. Where should I put your code? In function.php? or newtab.js? I'm sorry newbie here, really confused — Kimberly Sonic, Dec 16 '14 at 11:11
Put the code on the newtab.js. You need to import that JS on the main page (I think your main page is function.php right?). And in the window.open function you must put all the pages you need to open. One window.open sentence per page. — sch4v4, Dec 16 '14 at 15:21

Open multiple tabs in the same browser window after clicking image

1 Answers1