Question

Here’s what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.

Example: http://jsfiddle.net/rzTHw/

Here’s the working code so far…

<div class = "box"><a href="link1.html" target="_blank"><img src="http://placehold.it/300x150/cf5/&text=img+1"></a></div>
<div class = "box"><a href="link2.html" target="_blank"><img src="http://placehold.it/300x150/f0f/&text=img+1"></a></div>
<div class = "box"><a href="link3.html" target="_blank"><img src="http://placehold.it/300x150/fb1/&text=img+1"></a></div>
<div class = "box"><a href="link4.html" target="_blank"><img src="http://placehold.it/300x150/444/&text=img+1"></a></div>​

Jquery:

$('.box').not(':first').hide();
$('.box a').click(
    function(e){
        e.preventDefault();
        var newWin = window.open(this.href,'newWindow'),
            that = $(this).closest('.box'),
            duration = 1200;
        if (that.next('.box').length){
            that.fadeOut(duration,
                         function(){
                             that.next('.box').fadeIn(duration);
                         });
        }
    });

What I am having trouble with is:

1. Creating a “next” button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
2. Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the “next” button when the last div is shown, simply redirect the user.

What’s the best way to go about this? Thanks!

Answer 1

Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:

var redirectUrl = 'http://www.google.com'; // replace in your code

function next(event, duration) {
    duration = duration || 1200; // default value
    var that = $('.box:visible');
    if (that.next('.box').length) {
        that.fadeOut(duration, function() {
            that.next('.box').fadeIn(duration);
        });
    } else {
        window.location.href = redirectUrl;
        // the above line doesn't work inside jsFiddle, but should on your page
    }
    return false;
}

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

function(e) {
    e.preventDefault();
    var newWin = window.open(this.href, 'newWindow'),
        duration = 1200;
    next(e, duration);
});
$('.next').click(next);

jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.