[creativecoding]

I'm trying to get the effect of a new slide, but it's not working. Here's my script:

var nextImage = $('<img />');
var nextImageHolder = $('<div>');
 
$(document).ready(function () {
        loadNextImage();
 
        var options = {
                target:        '#submit_rawform',
                beforeSubmit:  loading
        };
 
        $('#submit_rawform').ajaxForm(options);
       
        $('#submit_btn').click(function() {
                $('.submit_form').fadeIn('medium');
                $('.overlay').fadeIn('medium');
        });
       
        $('#file_front').click(function() {
                $('#file').click();
        });
       
        $('#submit_close').click(function() {
                $('.submit_form').fadeOut('medium');
                $('.overlay').fadeOut('medium');
        });
});
 
$(document).keydown(function(e){
    if (e.keyCode == 37) {
        window.location.replace("?prev");
    } else if(e.keyCode == 39){
        forward();
    }
});
 
function loading() {
        $('#submit_rawform').innerHTML = "Uploading...";
}
 
function forward(){
        $('body').prepend(nextImageHolder);
        $('#background').animate({
                left: '2%'
        }, 350, function(){
                $('#background').animate({
                        left: '-100%'
                }, 1000, function(){
                        $('#background').remove();
                        $('#n_background').attr('id', 'background');
                        $('#n_bg').attr('id', 'c_bg');
                });
        });
        loadNextImage();
        return false;
}
 
function loadNextImage() {
        $.get("ajax/next.php", function(data){
                nextImage = $('<img />').attr('src', 'walls/' + data);
                nextImage.attr('class', 'stretch');
                nextImage.attr('id', 'n_bg');
                nextImageHolder.attr('class', 'background');
                nextImageHolder.attr('id', 'n_background');
                nextImageHolder.html(nextImage);
        });
}

And here's the body of the page:

<div class="background" id="background">
		<img id="c_bg" src="walls/<?php echo $wall; ?>" class="stretch"/>
	</div>

	<div class="overlay"></div>

	<img src="images/loading.gif" class="loading">

	<div class="submit_form">
		<a href="#" id="submit_close">
		<div class="close_btn">X</div>
		</a>
		<form action="upload.php" id="submit_rawform" method="post" encoding="multipart/form-data" enctype="multipart/form-data">
			<input type="file" id="file" name="wall">
			<input type="button" id="file_front" value="Wall"><br>
			<input type="submit" id="submit_wall" value="Share">
		</form>
	</div>
	
	
	<a href="?prev" class="left">
	<
	</a>
	
	<a href="#" class="right" onclick="forward();">
	>
	</a>

	<div class="report">
		<a href="#" id="report_btn">Report</a>
	</div>
	
	<div class="submit">
		<a href="#" id="submit_btn">Submit</a>
	</div>

What happens is the first one works. It slides 2% to the right and then slides -100% (off the screen to the left), but after that the background just stays at 2%. Whenever the right arrow is pushed, the next background is loaded at 2%.

[creativecoding]

Fixed it by putting nextImage = $('<img />');
nextImageHolder = $('<div>'); after line 58

[no2pencil]

Thank you for sharing your solution.

[e_i_pi]

I know it's a bit late in the piece, but the reason why putting those lines in at line 58 is due to an error in the function itself. Here is your original code:

function loadNextImage() {
        $.get("ajax/next.php", function(data){
                nextImage = $('<img />').attr('src', 'walls/' + data);
                nextImage.attr('class', 'stretch');
                nextImage.attr('id', 'n_bg');
                nextImageHolder.attr('class', 'background');
                nextImageHolder.attr('id', 'n_background');
                nextImageHolder.html(nextImage);
        });
}

Note in line 3 (above) you assign a string value to nextImage. This has two effects.

Firstly, because you have not declared the variable nextImage by using var nextImage = ..., then that variable becomes declared in the global namespace due to hoisting. (There is a good article on scope and hoisting located here).

Secondly, because the .attr() function returns a string value rather than a jQuery, you cannot utilise the result as a jQuery object (i.e. - by calling .attr() again, or by chaining). I believe that Javascript will encounter an error in line 4 of the code above, though I'm not currently on my dev box to test that idea.

You should be able to fix the problem you were having by simply amending the syntax of that function:

function loadNextImage() {
        $.get("ajax/next.php", function(data){
                var nextImageUrl = nextImage.attr('src', 'walls/' + data);
                nextImage.attr('class', 'stretch');
                nextImage.attr('id', 'n_bg');
                nextImageHolder.attr('class', 'background');
                nextImageHolder.attr('id', 'n_background');
                nextImageHolder.html(nextImageUrl);
        });
}