Open multiple tabs in the same browser window after clicking image

1 Views

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:

Read More
<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]
    });
}

  1. 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’ );

  2. I test it, but after I click small image, nothing happen. I think I must be wrong in the script.

Please help, thank you

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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.