CODEWITHSUNDEEP
phpjqueryarraysimage
David
David

Reputation: 136

How can I display a random image from a php array using jQuery?

I have been trying to create a random picture display animation, in the style of a slot machine wheel. The user clicks 'spin' and a gif image appears, giving the effect of a slot wheel spinning. When the wheel stops, the spinning effect gif image is replaced by a random member's picture. However, the random member's picture is not appearing. In firebug, I can see that the array is being populated correctly, and the member pictures (with correct url) are all present. The issue seems to be that the jQuery script is not prepending the tag to the in which the image is to appear, and I cannot work out why. The PHP to gather the information for the array is here:

$q = "SELECT id, username FROM members WHERE my_sex =:req_sex";
$stmt = $dbo->prepare($q);
$stmt->execute(array(":req_sex" => $req_sex));
while($r = $stmt->fetch()) {
$m_id = $r['id'];
$m_name = $r['username'];
$m_pic .= '"members/'.$m_id.'/minis/resized_image_'.$m_id.'_0.jpg", ';
}
$m_pic = rtrim($m_pic, ', ');

and the jQuery which I am sure is incorrect somewhere is here:

 $(document).ready(function(){ 
 images = new Array(<?php echo $m_pic; ?>);
 var length = images.length; 
 var which = Math.round(Math.random()*(length-1)); 
$('<img src="'+images[which]+'" alt="" class="randomMember"/>').prependTo('div#wheel');
};

I have been playing around with this and tried various methods, and using firebug to investigate, the best I have managed to achieve is to get the following line showing in the html.

<img class="randomMember" alt="" src="" />

I cannot remember how I did this, but I think it was using document.write and not wrapping it in a function. I have only been using javascript and jQuery for a week or so, and despite a whole lot of Googling and reading up, I cannot see why this isn't working out. Thanks in advance!

EDIT: the html is as follows:

  <div class="hidden_sidebox">
  <div id="chat_view">
  <div id="wheel">
  <img src="members/0/default_pic.jpg" alt="" class="preSpin" />
  <img src="images/randomChatWheel.gif" alt="" class="spinAnimation" style="top: -220px;" />   
 </div>

//here is where the problem jQuery script is...I think this is the correct place for it, as it will prependTo the previous div element (which I have explicitly specified anyway, just in case)

 <div id="btnPanel">
 <div id="chatButton">CHAT</div>
 <div id="spinButton">SPIN</div>
 </div>
 <div id="chatSplash"></div>
 </div>
 </div>

and the function for the wheel spin (which works perfectly apart from the final image failing to display) is here:

$(document).ready(function() { 

$("div#chatSplash").click(function () { 
    $("div#chatSplash").slideUp("fast");
    $('img.randomMember').hide();
    $('img.spinAnimation').hide();
    $('div#spinButton').removeClass('ButtonDisabled');
    $('div#chatButton').removeClass('ButtonDisabled');
 });    

 $("div#spinButton").click(function () {
    $("img.preSpin").hide();
    $("img.spinAnimation").show();
    $('div#spinButton').addClass('ButtonDisabled');
    $('div#chatButton').addClass('ButtonDisabled');
    setTimeout(function(){$("img.spinAnimation").hide();
    $('img.randomMember').show();
    $('div#spinButton').removeClass('ButtonDisabled');
    $('div#chatButton').removeClass('ButtonDisabled');
    }, 2500);

        });
    });

Upvotes: 0

Views: 835

Answers (2)

Miha Rekar
Miha Rekar

Reputation: 1546

Try this in PHP:

$pictures = array();
while($r = $stmt->fetch()) {
    $pictures[] = sprintf('members/%d/minis/resized_image_%d_0.jpg', $r['id'], $r['id']);
}

and then in JS:

images = <?php json_encode($pictures); ?>;

Upvotes: 0

Vaughan
Vaughan

Reputation: 162

There is a simple error here, you're not closing parentheses. You have:

$(document).ready(function(){ . . .};

Which should be

$(document).ready(function(){ . . .});

Upvotes: 1

Related Questions