how cant i sort an array in to div in pairs (odd and even) ?

ricky-spires · April 17, 2013

hello

so i have the numbers 1 to 50 for a book

i want the first number and last number to be front and back pages.

ie.

1

2+3

3+4

4+5

5+6

7

this is the div structure

im giving the front cover a class of fCover then left for the left pages and right for the right pages.

<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
                
        //FRONT PAGE      
	<div class="bb-item" id="item1">
	    <div class="content">
		<div class="scroller fCover">
		<img src="assets/images/pages/1.jpg" ALT="page1">
		</div>
	    </div>
	</div>
                    
                    
	//PAGES 2 & 3
        <div class="bb-item" id="item2">
            <div class="content">

                //PAGE 2
		<div class="scroller left">
		     <img src="assets/images/pages/2.jpg" ALT="page2">
		</div>

                //PAGE 3
                <div class="scroller right">
		     <img src="assets/images/pages/3.jpg" ALT="page3">
		</div>
	    
            </div>
	</div>

</div>
</div>

This is the php that i have:

<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
                
   <?php
	foreach($pageImg as $file){
	echo'
	<div class="bb-item" id="item'.$file.'">
		<div class="content">';
						
		if($file == "1"){
		echo'
		<div class="scroller fCover">
		<img src="assets/images/pages/'.$file.'.jpg" ALT="page'.$file.'">
		</div>';
		}
		echo'	
		</div>
	</div>';
	}?>
                    
</div></div>

that give me the first page but im stuck on the paired pages ?

thanks

rick

Edited April 17, 2013 by ricky-spires

lemmin · April 17, 2013

You can loop through your pages and check the page number:

if ($page_number&1)
	// $page_number is odd
else
	// $page_number is even

The last digit in a binary string will alternate between 0 and 1 as it is incremented, so you can use a "bitwise and" against the number 1 to check if it is odd or even.

ricky-spires · April 17, 2013

this is another way i tried it but it doesnt pair them together.

foreach($pageImg as $file){
					
					if($file == "1"){
					
					echo'
					<div class="bb-item" id="item'.$file.'">
						<div class="content">
						<div class="scroller fCover">
								<img src="assets/images/pages/'.$file.'.jpg" ALT="page'.$file.'">
							</div>
						</div>
					</div>';
					
					}else{
					
						echo'
						<div class="bb-item" id="item'.$file.'">
						<div class="content">
						<div class="scroller ';
						
						if ($file % 2 == 0) { 
							echo 'right'; 
						} else { 
							echo 'left';
						}
						echo' "><img src="assets/images/pages/'.$file.'.jpg" ALT="page'.$file.'">
						</div>
						</div>
					</div>';
						
					}
					
				}

lemmin · April 17, 2013

What do you mean by "it doesn't pair them together?" Have you created the styles for .right and .left?

Your logic should work from what I can see.

ricky-spires · April 17, 2013

thanks lemmin,

but thats doesnt solve the grouping issue im having

say i have numbers 1,2,3,4,5,6,7,8,9,10

how do i put pair in to a div.

so

<div>

image 1 class="left"

image 2 class="right"

</div>

<div>

image 3 class="left"

image 4 class="right"

</div>

<div>

image 5 class="left"

image 6 class="right"

</div>

all im getting now is

<div>

image 1 class="left"

</div>

<div>

image 2 class="right"

</div>

<div>

image 3 class="left"

</div>

<div>

image 4 class="right"

</div>

Edited April 17, 2013 by ricky-spires

lemmin · April 17, 2013

How about this:

$pageImg = array(1,2,3,4,5,6,7,8,9,10,11,12);
$n = sizeof($pageImg)-1;

echo '<div class="firstPage">Image '.$pageImg[0].'</div>';

for ($i=1;$i<$n;$i+=2)
{
	echo
	'<div>
		Image '.$pageImg[$i].' class="left"<br/>
		Image '.$pageImg[$i+1].' class="right"
	</div>';
}

if (!($pageImg[$n] % 2))
	echo '<div class="lastPage">Image '.$pageImg[$n].'</div>';

ricky-spires · April 17, 2013

ok. im getting there.

this is what i get when i use fire bug. the problem now is that its skipping the first left.

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller ">

<div class="scroller right">

</div>

</div>

<div id="item3" class="bb-item">

<div class="content">

<div class="scroller left">

<div class="scroller right">

</div>

</div>

<div id="item4" class="bb-item">

<div class="content">

<div class="scroller left">

<div class="scroller right">

</div>

</div>

this is the code i used:

<?php
			
				foreach($pageImg as $file){
					
					if($file == "1"){
					
					echo'
					<div class="bb-item" id="item'.$file.'">
						<div class="content">
						<div class="scroller fCover">
								<img src="assets/images/pages/'.$file.'.jpg" ALT="page'.$file.'">
							</div>
						</div>
					</div>';
					
					}else{
					
						echo'
						<div class="bb-item" id="item'.$file.'">
						<div class="content">';
						
						if($file % 2 != 0){ $left = "left"; }
						if($file % 2 == 0){ $right = "right"; }	
						
						echo'	
						<div class="scroller '.$left.'"><img src="assets/images/pages/'.$file.'.jpg" ALT="page'.$file.'">
						</div>
						
						<div class="scroller '.$right.'"><img src="assets/images/pages/'.$file.'.jpg" ALT="page'.$file.'">
						</div>
						
						
						</div>
					</div>';
						
					}
					
				}
				
				?>

SCRAP THAT

its putting the same image in the divs

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

<div class="scroller ">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

</div>

</div>

<div id="item3" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

<div class="scroller right">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

</div>

</div>

let me try your code. thanks

Edited April 17, 2013 by ricky-spires

ricky-spires · April 17, 2013

Hello lemmin

thats great. THANKS

just 1 more thing.. they seem to start at the number 10

after the first page which is the cover it need to start from the number 2 (1 being the cover)

this is what im getting

<div id="item10" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page10" src="assets/images/pages/10.jpg">

</div>

<div class="scroller right">

<img alt="page11" src="assets/images/pages/11.jpg">

</div>

</div>

</div>

<div id="item11" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page11" src="assets/images/pages/11.jpg">

</div>

<div class="scroller right">

<img alt="page12" src="assets/images/pages/12.jpg">

</div>

</div>

</div>

this is the code:

<div class="bb-custom-wrapper">
				<div id="bb-bookblock" class="bb-bookblock">
                
					<?php
                    $n = sizeof($pageImg)-1;
                    
                    echo '
                    <div class="bb-item" id="item'.$pageImg[0].'">
                        <div class="content">
                        	<div class="scroller fCover">
                                <img src="assets/images/pages/'.$pageImg[0].'.jpg" ALT="page'.$pageImg[0].'">
                            </div>
                        </div>
                    </div>';
                    
                    for ($i=1;$i<$n;$i+=1)
                    {
                        echo'
                        <div class="bb-item" id="item'.$pageImg[$i].'">
							<div class="content">
								<div class="scroller left"><img src="assets/images/pages/'.$pageImg[$i].'.jpg" ALT="page'.$pageImg[$i].'"></div>
								<div class="scroller right"><img src="assets/images/pages/'.$pageImg[$i+1].'.jpg" ALT="page'.$pageImg[$i+1].'"></div>
							</div>
						</div>';
                    }
                    /*
                    if (!($pageImg[$n] % 2)){
                        echo '<div class="lastPage">Image '.$pageImg[$n].'</div>';
                    }
                    */
                    ?>
                </div>
            </div>

thanks so much

ricky

ricky-spires · April 17, 2013

i see the problem.

its not being sorted

lemmin · April 17, 2013

its not being sorted

That was my guess!

Also, I notice in your output that page11 is repeated. That is because the for loop should be incrementing by 2 instead of 1.

ricky-spires · April 17, 2013

getting there

<div id="item1" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page1" src="assets/images/pages/1.jpg">

</div>

<div class="scroller right">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

</div>

</div>

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

<div class="scroller right">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

</div>

</div>

i did this at the start:

sort($pageImg);
  $n = sizeof($pageImg);

now.. how do i start from the number 2 and not 1 ?

lemmin · April 17, 2013

It should be starting the loop from the second page. The code you posted prints out the front page separately from the rest. If that isn't what you want, I'm not sure what you're asking.

ricky-spires · April 17, 2013

hello.

the items are sorted and incrementing correctly which is great

<div id="item1" class="bb-item">

<div id="item2" class="bb-item">

<div id="item3" class="bb-item">

<div id="item4" class="bb-item">

<div id="item5" class="bb-item">

<div id="item6" class="bb-item">

<div id="item7" class="bb-item">

but the page number are starting from the wrong number: the last ans first are the same:

<div id="item1" class="bb-item">

<div class="content">

<div class="scroller fCover">

<img alt="page1" src="assets/images/pages/1.jpg">

</div>

</div>

</div>

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

<div class="scroller right">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

</div>

</div>

<div id="item3" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

<div class="scroller right">

<img alt="page4" src="assets/images/pages/4.jpg">

</div>

</div>

</div>

<div id="item4" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page4" src="assets/images/pages/4.jpg">

</div>

<div class="scroller right">

<img alt="page5" src="assets/images/pages/5.jpg">

</div>

</div>

</div>

i noticed that if i change

for ($i=1;$i<$n;$i+=1)

to

for ($i=1;$i<$n;$i+=2)

it fixes the problem but the the item number go up in event numbers . ie... 2,4,6 etc..

how can i seperate them

this is the code so far. i removed some divs to make it easier.

sort($pageImg);
                    $n = sizeof($pageImg)-1;
                    
                    echo '
					
							<div class="bb-item" id="item'.$pageImg[0].'">
								<div class="content">
									<div class="scroller fCover">
										<img src="assets/images/pages/'.$pageImg[0].'.jpg" ALT="page'.$pageImg[0].'">
									</div>
								</div>
							</div>
						';
					
					
                    for ($i=1;$i<$n;$i+=1)
                    {
                        echo'
					
								<div class="bb-item" id="item'.$pageImg[$i].'">
									<div class="content">
									
											<div class="scroller left"><img src="assets/images/pages/'.$pageImg[$i].'.jpg" ALT="page'.$pageImg[$i].'"></div>
											<div class="scroller right"><img src="assets/images/pages/'.$pageImg[$i+1].'.jpg" ALT="page'.$pageImg[$i+1].'"></div>
										
									</div>
								</div>
							';
                    }

thanks

lemmin · April 17, 2013

I'm not sure how you want the item numbers to relate. If you want the item numbers to increment separately, you will need a separate counter:

$j=1;
for ($i=1;$i<$n;$i+=2)
{
	echo'

			<div class="bb-item" id="item'.$j.'">
				<div class="content">
				
						<div class="scroller left"><img src="assets/images/pages/'.$pageImg[$i].'.jpg" ALT="page'.$pageImg[$i].'"></div>
						<div class="scroller right"><img src="assets/images/pages/'.$pageImg[$i+1].'.jpg" ALT="page'.$pageImg[$i+1].'"></div>
					
				</div>
			</div>
		';
		$j++;
}

ricky-spires · April 17, 2013

<div id="item1" class="bb-item">

<div class="content">

<div class="scroller fCover">

<img alt="page1" src="assets/images/pages/1.jpg">

</div>

</div>

</div>

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

<div class="scroller right">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

</div>

</div>

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page4" src="assets/images/pages/4.jpg">

</div>

<div class="scroller right">

<img alt="page5" src="assets/images/pages/5.jpg">

</div>

</div>

</div>

I THOUGHT THAT WAS IT.

all the items are getting the number 2. they should also go up (1,2,3,4 etc)

$j=1;
                    for ($i=1;$i<$n;$i+=2)
                    {
                        echo'
					
								<div class="bb-item" id="item'.$pageImg[$j].'">
									<div class="content">
									
											<div class="scroller left"><img src="assets/images/pages/'.$pageImg[$i].'.jpg" ALT="page'.$pageImg[$i].'"></div>
											<div class="scroller right"><img src="assets/images/pages/'.$pageImg[$i+1].'.jpg" ALT="page'.$pageImg[$i+1].'"></div>
										
									</div>
								</div>
							';
                    }

Edited April 17, 2013 by ricky-spires

ricky-spires · April 17, 2013

ok.. i missed a bit

now im getting

<div id="item1" class="bb-item">

<div id="item1" class="bb-item">

<div id="item2" class="bb-item">

<div id="item3" class="bb-item">

<div id="item4" class="bb-item">

<div id="item5" class="bb-item">

<div id="item6" class="bb-item">

<div id="item7" class="bb-item">

<div id="item8" class="bb-item">

<div id="item9" class="bb-item">

<div id="item10" class="bb-item">

just need to skip the first number

ricky-spires · April 17, 2013

DONE IT

<div class="menu-panel">

<div id="item1" class="bb-item">

<div class="content">

<div class="scroller fCover">

<img alt="page1" src="assets/images/pages/1.jpg">

</div>

</div>

</div>

<div id="item2" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page2" src="assets/images/pages/2.jpg">

</div>

<div class="scroller right">

<img alt="page3" src="assets/images/pages/3.jpg">

</div>

</div>

</div>

<div id="item3" class="bb-item">

<div class="content">

<div class="scroller left">

<img alt="page4" src="assets/images/pages/4.jpg">

</div>

<div class="scroller right">

<img alt="page5" src="assets/images/pages/5.jpg">

</div>

</div>

</div>

just need to do $j=2;

THANKS FOR ALL YOUR HELP

i have learnt alot today

rick

lemmin · April 17, 2013

Just start $j at 2 instead of 1

Sign In

how cant i sort an array in to div in pairs (odd and even) ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information