Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Displaying information when image is clicked

    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, but getting the i icon to display the information about that image is starting to drive me insane :-D

    Here is the html
    Code:
    $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
    Code:
    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;                     
    		    }
    Here is the Jquery
    Code:
    function galleryInit(){
    	$('#gallery li').hover(
    	    function(){$('span',this).slideToggle('fast');},
    	    function(){$('span',this).slideToggle('fast');
        });
    
        	$(".portfolio-banner-inner li").click(function(e){
    
    		if($(".activeExpand").length > 0){
    
    			$(".portfolio-active").css({"left":"0%"});
    			$(".portfolio-active").prevAll().css({"left":"-100%"});
    			$(".portfolio-active").nextAll().css({"left":"100%"});
    			$(".portfolio-banner-inner li").removeClass("inactiveExpand").removeClass("activeExpand").removeAttr("style").find("img").removeAttr("style");
    			$(".portfolio-arrow-left-scroll").addClass("portfolio-arrow-left").removeClass("portfolio-arrow-left-scroll");
    	    	$(".portfolio-arrow-right-scroll").addClass("portfolio-arrow-right").removeClass("portfolio-arrow-right-scroll");
    
    
    			return false;	
    		} 
    
    		$this = $(this);
    		$(".portfolio-banner-inner li").addClass("inactiveExpand")
    		$this.removeClass("inactiveExpand").addClass("activeExpand");
    		
    		
    		$(".portfolio-slide").css({"left":"0"})
    
    		$this.parents(".portfolio-slide:first").prevAll().find(".portfolio-slide-inner li").css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"-100%"}).find("img").css({"width":"952px","height":"502px"});
    		$this.parents(".portfolio-slide:first").nextAll().find(".portfolio-slide-inner li").css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"100%"}).find("img").css({"width":"952px","height":"502px"});
    		
    
    		$this.siblings().prevAll().css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"-100%"}).find("img").css({"width":"952px","height":"502px"});
    		$this.siblings().nextAll().css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"100%"}).find("img").css({"width":"952px","height":"502px"});
    
    
    		$this.css({"position":"absolute","width":"100%","height":"100%","top":"0","left":"0"});
    		$this.find("img").animate({
    	        width: '952px',//what the width of the image to be expanded is
    	        height: '502px'//what the width of the image to be expanded is
    	    }, 200);
    
    
    	    $(".portfolio-arrow-left").addClass("portfolio-arrow-left-scroll").removeClass("portfolio-arrow-left");
    	    $(".portfolio-arrow-right").addClass("portfolio-arrow-right-scroll").removeClass("portfolio-arrow-right");
    
    	});
    
    }
    
    function imageSlider(direction){
    
    	$activeExpandWhere = $(".activeExpand");
    	if($(".activeExpand").css("left") != "0px") return false;
    
    	if(direction == "right"){
    		$(".inactiveExpand").css({"left":"100%"});
    
    		$(".activeExpand").animate({"left":-100+"%"},500,"easeInCubic",function(){
    		$(this).removeClass("activeExpand").addClass("inactiveExpand");
    
    		});
    		if($(".activeExpand").next("li").length == 0){
    			if($activeExpandWhere.parents(".portfolio-slide:first").next().length == 0){
    				$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
    				$(".portfolio-slide:first").removeClass("portfolio-inactive").addClass("portfolio-active");
    				$(".portfolio-slide:first").find(".portfolio-slide-inner li").eq(0).animate({"left":0+"%"},500,"easeInCubic",function(){
    					$(this).removeClass("inactiveExpand").addClass("activeExpand");
    				});
    				return false;
    			}
    			$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
    			$activeExpandWhere.parents(".portfolio-slide:first").next().removeClass("portfolio-inactive").addClass("portfolio-active");
    			$activeExpandWhere.parents(".portfolio-slide:first").next().find(".portfolio-slide-inner li").eq(0).animate({"left":0+"%"},500,"easeInCubic",function(){
    				$(this).removeClass("inactiveExpand").addClass("activeExpand");
    			});
    			return false;
    		}
    		$(".activeExpand").next("li").animate({"left":0+"%"},500,"easeInCubic",function(){
    			$(this).removeClass("inactiveExpand").addClass("activeExpand");
    		});
    		return false;
    	}
    
    	$(".inactiveExpand").css({"left":"-100%"});
    
    	$(".activeExpand").animate({"left":100+"%"},500,"easeInCubic",function(){
    		$(this).removeClass("activeExpand").addClass("inactiveExpand");
    
    	});
    	if($(".activeExpand").prev("li").length == 0){
    		if($activeExpandWhere.parents(".portfolio-slide:first").prev().length == 0){
    			$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
    			$(".portfolio-slide:last").removeClass("portfolio-inactive").addClass("portfolio-active");
    			$(".portfolio-slide:last").find(".portfolio-slide-inner li").eq(($(".portfolio-slide:last").find(".portfolio-slide-inner li").length-1)).animate({"left":0+"%"},500,"easeInCubic",function(){
    				$(this).removeClass("inactiveExpand").addClass("activeExpand");
    			});
    			return false;
    		}
    
    		$(".portfolio-slide").removeClass("portfolio-active").addClass("portfolio-inactive");
    		$activeExpandWhere.parents(".portfolio-slide:first").prev().removeClass("portfolio-inactive").addClass("portfolio-active");
    
    		$activeExpandWhere.parents(".portfolio-slide:first").prev().find(".portfolio-slide-inner li").eq(0).animate({"left":0+"%"},500,"easeInCubic",function(){
    			$(this).removeClass("inactiveExpand").addClass("activeExpand");
    		});
    		return false;
    	}
    	$(".activeExpand").prev("li").animate({"left":0+"%"},500,"easeInCubic",function(){
    		$(this).removeClass("inactiveExpand").addClass("activeExpand");
    	});
    
    
    	
    	}
    
    $(document).ready(function(e) {
    
    	galleryInit();
    
    	
    	$(".additional-nav-info1").click(function(){
    		if($(".additional-nav-info-inner1").css("display") == "block"){
    			$(this).removeClass("active");
    			$(this).addClass("inactive");
    			$(".additional-nav-info-inner1").stop().slideToggle(250);
    		} else {
    			$(this).removeClass("inactive");
    			$(this).addClass("active");
    			$(".additional-nav-info-inner1").stop().slideToggle(250);
    		}
    	});
    
    	$(".additional-nav-info-inner1 a").hover(function(){
    		$(this).find("img").eq(0).fadeOut(250);
    		$(this).find("img").eq(1).fadeIn(250);
    	}, function(){
    		$(this).find("img").eq(0).fadeIn(250);
    		$(this).find("img").eq(1).fadeOut(250);
    	});
    
    }

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,539
    Thanks
    8
    Thanked 1,093 Times in 1,084 Posts
    Is there a way you can provide a link so we can see it in action?

    I don't have a solution for you at this moment, but if we could see it, it might be easier to visualize. We can't run your script to test it ourselves.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    I don't see how this is PHP related and should be either in the HTML or javascript section..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •