Question

I have the following script, which when you click the image within the div, it opens the corresponding a href link in a new window. At the same time, the div that was clicked on the parent page becomes hidden, and the next div is shown.

There is also a “next” button, so in order to advance to the next div without clicking the image. This “next” button does not open the corresponding a href on the current div. It just skips to the next div.

This is all working perfectly, however I’m trying to now add a button that when clicked will take you to the href location of the visible div.

Does that make sense?

Here’s a JSFiddle Demo: http://jsfiddle.net/QTyRq/

And here’s the code…

<div id="container">
    <div class="imgrotation"><a href="http://google.com" target="_blank"><img src="abc.jpg" width="100" height="100" border="0" /></a></div>
    <div class="imgrotation"><a href="http://yahoo.com" target="_blank"><img src="def.jpg" width="200" height="200" border="0" /></a></div>
    <div class="imgrotation"><a href="http://msn.com" target="_blank"><img src="ghi.jpg" width="300" height="300" border="0" /></a></div>
    <div class="imgrotation"><a href="http://bing.com" target="_blank"><img src="jkl.jpg" width="400" height="400" border="0" /></a></div>
</div>

<button id="nextimg">Next Image</button>

<!--This is what I need added to JS -->
<button id="gotourl">Visit Site</button>

Jquery:

var alldoneURL = 'next-image-group.html'; //final click
function next(event, duration) {
    duration = duration || 900; // default value
    var that = $('.imgrotation:visible');
    if (that.next('.imgrotation').length) {
        that.fadeOut(duration, function() {
            that.next('.imgrotation').fadeIn(duration);
        });
    } else {
        window.location.href = alldoneURL;
    }
    return false;
}

$('.imgrotation').not(':first').hide();
$('.imgrotation a').click(

function(e) {
    e.preventDefault();
    var newWin = window.open(this.href), //(this.href, 'newWindow') to load all clicks in one window.open
        duration = 900;
    next(e, duration);
});
$('#nextimg').click(next);

​

Answer 1

Adding this jquery will also work

$('#gotourl').on('click',function(){
      window.open($(".imgrotation:visible a").prop('href'));
});

​
​

http://jsfiddle.net/QTyRq/3/

function$('#gotourl').on('click',function(){
    window.open($(".imgrotation:visible a").prop('href'));
    $('#nextimg').trigger('click');
});

​Updated JSFIDDLE with both