The <li> tag not display images in <ul>

[cerberus478]

Hi

 

I'm trying to create a loop where 9 images are displayed and then you click on the arrow and the rest is then displayed.

 

For example: In my database I have 15 images and at the frontend I need 9 images to be displayed and next to those images is 2 arrows one on the left and one on the right. If I click on the arrow on the right then the 6 images is then displayed and if I click on the left arrow the previous 9 images is displayed.

 

What the problem that I have is, is that the <li> tag doesn't want to be work inside the <ul> tag.

If I use firebug I get this

 

<div class="portfolio-slide-inner">

        <div class="portfolio-banner-content portfolio-banner-left">

               <div class="portfolio-banner-header"></div>

                      <div class="portfolio-banner-copy">

                             <ul id="gallery">

                                  <li>

                                       <img src="http://www.server.com/cms/grid_images/">

                                  </li>

                            </ul>

                      </div>

               </div>

        </div>

</div>

<li>

     <img src="http://www.server.com/cms/grid_images/puppy.jpg">

</li>

<li>

 

The <li> that is inside the <ul> doesn't locate the image, but the <li> that is outside the <ul> locates the image and displays the images.

 

What I would like is for the <li> that is inside the <ul> to locate the images and for the <li> that is outside the <ul> to not be there.

 

Here is the code

function putGrid($pageid){
    global $_GRID_FRAMES_TABLE, $_GRID_TABLE, $_GRID_CROSS_GRID_FRAMES_TABLE, $_GRID_CROSS_PAGES_TABLE, $_HTTP_ADDRESS;

	$i=0;
	$cpt=1;
	$str='';
	$whichCount = 1;

        $query = mysql_query("SELECT * FROM $_GRID_CROSS_PAGES_TABLE WHERE id_page='$pageid'");
        $combineArr = mysql_num_rows($query);
        if( mysql_num_rows($query) ){
            $result = mysql_fetch_object($query);
	    $grid = new Grid($result->id_grid);
			
            foreach($grid->getSwfMultiple() as $gridSwf){

            	if($whichCount == 1){
		   $portfolioClass="portfolio-active";
		   $style = "position: absolute; left:0%; top:0; width:100%;";	
		}else{
		   $portfolioClass="portfolio-inactive";	
		   $style = "position: absolute; left:-100%; top:0; width:100%;";	
		}

        	if($whichCount == 1){
		   $str.='<div id="portfolio-slide'.$i.'" class="portfolio-slide '.$portfolioClass.'" style="'.$style.'">';
	           $str.=		'<div class="portfolio-slide-inner">';
	           $str.=			'<div class="portfolio-banner-content portfolio-banner-left">';
	           $str.=				'<div class="portfolio-banner-header">';
	           $str.=				'</div>';
	           $str.=				'<div class="portfolio-banner-copy">';
	           $str.=					'<ul id="gallery">';	
		}

		$str.=						'<li>';
                $str.=							'<img src='.$_HTTP_ADDRESS.'grid_images/'.$gridSwf['image'].' />';	
                $str.=						'</li>';
			//}
			if($whichCount % 9 == 0 && $whichCount < $combineArr){

				$i++;

				$str.=					'</ul>';
	            $str.=				'</div>';
	            /*$str.=				'</div>';*/
	            $str.=			'</div>';
	            $str.=		'</div>';
	            $str.='</div>';		

	            $str.='<div id="portfolio-slide'.$i.'" class="portfolio-slide '.$portfolioClass.'" style="'.$style.'">';
	            $str.=		'<div class="portfolio-slide-inner">';
	            $str.=			'<div class="portfolio-banner-content portfolio-banner-left">';
	            $str.=				'<div class="portfolio-banner-header">';
	            $str.=				'</div>';
	            $str.=				'<div class="portfolio-banner-copy">';
	            $str.=					'<ul id="gallery">';					
			}
			
			if($whichCount == $combineArr){
				
				$str.=					'</ul>';
	            $str.=				'</div>';
	            /*$str.=				'</div>';*/
	            $str.=			'</div>';
	            $str.=		'</div>';
	            $str.='</div>';				
	        }
			$whichCount++;

			}
			$cpt++;
        }
		return $str;
	}

If there is anything you don't understand please let me know

 

[adam_bray]

It's kinda hard to understand the problem without seeing the code you're aiming for. 

 

My shot in the dark is that your foreach loop is wrong and you're looping the whole slider instead of just the list-items.

 

I would expect it to look something like -

function putGrid( $pageid )
	{
		global $_GRID_FRAMES_TABLE, $_GRID_TABLE, $_GRID_CROSS_GRID_FRAMES_TABLE, $_GRID_CROSS_PAGES_TABLE, $_HTTP_ADDRESS;

		$i = 0;
		$cpt = 1;
		$str = '';
		$whichCount = 1;
		
		$query = mysql_query( 'SELECT * FROM'. $_GRID_CROSS_PAGES_TABLE .'WHERE id_page=\''.$pageid.'\';' )or die( 'Error:' . mysql_error());
        
		$combineArr = mysql_num_rows( $query );
		
        if( $combineArr > 0 ) // Do you want to know if there's actually results or just if the function worked? 
		{
            $result = mysql_fetch_object( $query );
	    	$grid = new Grid($result->id_grid);
			
			$str .= '		<div id="portfolio-slide'.$i.'" class="portfolio-slide">
								<div class="portfolio-slide-inner">
									<div class="portfolio-banner-content portfolio-banner-left">
										<div class="portfolio-banner-header"></div>
										<div class="portfolio-banner-copy">
											<ul id="gallery">';	
			
			foreach( $grid->getSwfMultiple() as $gridSwf )
			{
				// Change the class and styles depending on the item
            	$portfolioClass = ( $whichCount > 9 ) ? 'portfolio-active' : 'portfolio-inactive';
				$style = ( $whichCount > 9 ) ?  'position: absolute; left:0%; top:0; width:100%;' : 'position: absolute; left:-100%; top:0; width:100%;';	
				
				// Loop the list items
				$str.= ' <li class="'.$portfolioClass.'" style="'.$style.'"><img src='.$_HTTP_ADDRESS.'grid_images/'.$gridSwf['image'].' /></li>';
				
				$whichCount++;
			}
			
			$str.= '							</ul>
											</div>
										</div>
									</div>
								</div>';

	     
			$cpt++;
        }
		else
		{
			$str = 	'<div id="portfolio-slide" class="portfolio-slide">There are no results to display</div>';
		}
		
		return $str;
	}

Edited April 14, 2014 by adam_bray

[cerberus478]

Hi I tried the code that you gave and I only got 1 image showing. On firebug all the images are there.

[adam_bray]

That'll be down to the CSS positioning. I've got a feeling the images could be sitting on-top of each other.

 

You need to edit this line so they're displayed how you need them -

$style = ( $whichCount > 9 ) ?  'position: absolute; left:0%; top:0; width:100%;' : 'position: absolute; left:-100%; top:0; width:100%;';