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

sch4v4 sch4v4 · Accepted Answer · 2014-12-16T04:11:18

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.

Open multiple tabs in the same browser window after clicking image

1 Answers