4

hello all i am having this design in my web page

enter image description here

i want different images in each of the block each time the page refreshes the images changes in each block like image1 in block 1 and image2 in block 2 and so on i can not use loop as the divs here are not the same i have this particular pattern

i can get the images from my database and stored in an array but i have no idea how to place them in these divs individual to be distinct from each other

see my code below

   $getimages=mysqli_query($conn,"select uid,vname,thumb,views from 
   tablename where something !='0' and somethingelse !='' order by rand()   limit 21");
   $Results = array();
   while($tmp=mysqli_fetch_assoc($getimages)){
   $Results[] = array('uid' => $tmp['uid'], 
   'vname' => $tmp['vname'], 'thumb' => $tmp['thumb']);
     }
    $i=randim('13');
     function randim($code){
    return rand(0,10);
     }

please give me some hints to solve this i want individual images in each of the block i can not use loop as the divs are non repetative

in my div i am calling images as

  <div class="somethingddd" style="background:url('mem/<?=$Results[$i]['uid']?>/img/<?=$Results[$i]['thumb']?>');background-size:cover;">

            </div>
5
  • I think you can use desandro.github.io/masonry Commented Aug 7, 2015 at 5:12
  • 1
    use array_shuffle to randomize the order of your array then array_pop to get elements off the array for each usage Commented Aug 7, 2015 at 5:15
  • @Orangepill thankyou for the comment but can you plaease post it as an answer with some more hints please ..... Commented Aug 7, 2015 at 5:17
  • @JasbirSinghSohanpal i dont want the the design i have it i want the random images from the array inside the divs .. Commented Aug 7, 2015 at 5:18
  • would be there always 7 div blocks and each block will have 1 image? Commented Aug 7, 2015 at 5:28

2 Answers 2

3

Easiest way that I can think of is to shuffle your array then use fixed offsets to get each positional element.

<?php
    shuffle($Results);
?>
<div class="position0" style="background:url('mem/<?=$Results[0]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>
<div class="position1" style="background:url('mem/<?=$Results[1]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>
<div class="position2" style="background:url('mem/<?=$Results[2]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>
<div class="position3" style="background:url('mem/<?=$Results[3]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>
<div class="position4" style="background:url('mem/<?=$Results[4]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>
<div class="position5" style="background:url('mem/<?=$Results[5]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>
<div class="position6" style="background:url('mem/<?=$Results[6]['uid']?>/img/<?=$Results[0]['thumb']?>');"></div>

Then in your css you can have the styles associated with each of the position based on the class name.

Sign up to request clarification or add additional context in comments.

Comments

1

Try the following after the while loop:

shuffle($Results);

Good luck!

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.