Displaying information when image is clicked

[cerberus478]

Hi

I'm trying to create a page where there is a grid of images and if you click on one of those images it will expand. Once the image has expanded and you click on the i icon that is below it, the i icon will display the information about that image.

I have managed to make the grid work the way I need it to, now I just need the i icon

Here is the html

$str.='<div class="portfolio-banner-wrapper'.$langClass.'" style="position: relative;">';
$str.=      '<a class="portfolio-arrow-left'.$langClass.' portfolio-navigate'.$langClass.'" href="javascript:void(0);"><img src="images/left-arrow.png" onmouseover="this.src=\'images/blue-left-arrow.png\'" onmouseout="this.src=\'images/left-arrow.png\'" /></a>';
$str.=      '<a class="portfolio-arrow-right'.$langClass.' portfolio-navigate'.$langClass.'" href="javascript:void(0);"><img src="images/right-arrow.png" onmouseover="this.src=\'images/blue-right-arrow.png\'" onmouseout="this.src=\'images/right-arrow.png\'"/></a>';
$str.=      '<div class="portfolio-banner-inner">';
$str.=          $this->getPortfolioTest();
$str.=      '</div>';
$str.='</div>';

$str.='<div class="overlay-bg'.$langClass.'">';
$str.=      '<div class="additional-navigation-wrapper'.$langClass.'">';
$str.=          '<div class="info'.$langClass.'" style="display: none;">';
$str.=              '<a class="border-bottom-white padding-level-one inactive additional-nav-info1" href="javascript:void(0);">';
$str.=                  '<img class="icon" src="images/i_icon.png" />';
$str.=                  '<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" />';
$str.=                  '<span class="clearboth"></span>';
$str.=              '</a>';
$str.=              '<div class="additional-nav-info-wrapper1">';
$str.=                  $this->i_icon();                   

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

Here is the php

function getPortfolioTest(){
        global $_PRODUCTS_TABLE, $_HTTP_ADDRESS, $_PRODUCTS_IMAGES_DIR;
        $i=0;
        $cpt = 1;
        $str = '';
        $whichCount = 1;
        $jobSearch='';
        $query = mysql_query("SELECT * FROM $_PRODUCTS_TABLE WHERE `active`='1' AND `image` LIKE '%.%'".$jobSearch." ORDER BY `client` ASC");
        $combineArr = mysql_num_rows($query);
        while( $result = mysql_fetch_object($query) ){
        	$product = new Product($result->id);
        	$product->setFromDatabase();

    	$linkOut = getSEOLink($product->id);
    	$target = "";
    	if(trim($product->linkout) != ""){
    		$linkOut = $product->linkout;
    		$target = ' target="_blank"';
    	}

    	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.=							'<a'.$target.' href="javascript:void(0);">';
        $str.=								'<img src="'.$_HTTP_ADDRESS.'products_images/'.$result->image.'">';
        								echo "this is getPortfolioTest";
        $str.=							'</a>';
        $str.=							'<span>';
        $str.=								'<h3>'.$result->name.'</h3>';
        $str.=								$result->description;
        $str.=							'</span>';	
        $str.=						'</li>';

		if($whichCount % 9 == 0 && $whichCount < $combineArr){

			$i++;
			$str.=						'<div class="clearboth"></div>';
			$str.=					'</ul>';
            $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.=						'<div class="clearboth"></div>';
			$str.=					'</ul>';
            $str.=				'</div>';

            $str.=			'</div>';
            $str.=		'</div>';
            $str.='</div>';				
        }
		$whichCount++;

        $cpt++;

    }
    return $str;
}

function i_icon(){
	global $_PRODUCTS_TABLE, $_HTTP_ADDRESS, $_PRODUCTS_IMAGES_DIR;

	$str = '';
	$i = 0;

	$query = mysql_query("SELECT * FROM $_PRODUCTS_TABLE WHERE `active`='1'");
                while($result = mysql_fetch_object($query)){
	$str.=                  '<div class="additional-nav-info-inner'.$i.' overlay-bg" style="display:none;">';
	$str.=                      '<ul>';
	$str.=                          '<h3>'.$result->name.'</h3>';
	$str.=                          '<p>';
	$str.=                             $result->overview;
	$str.=                          '</p>';
	$str.=                      '</ul>';
	$str.=                  '</div>';
	$i++;  
	                    }

	return $str;                     
	    }