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,469
    Thanks
    8
    Thanked 1,085 Times in 1,076 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
    408
    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..
    If I've helped you out, show your appreciation by clicking the "Thanks" link as well as a link below!

    AdFly
    Facebook | Twitter
    Google | YouTube


  •  

    Posting Permissions

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