Displaying information when image is clicked

cerberus478 · May 19, 2014

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.

This isn't like a popup or anything like that, because when you click on the image and it expands, it expands in the same spot and it doesn't popup.

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;                     
		    }

Here is the Jquery

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);
	});

}

Psycho · May 19, 2014

This is a JavaScript issue, and should be in the JavaScript forum.

Second, if you are wanting help on a JavaScript issue then you need to post the relevant HTML source of the page. If you post the PHP that generates the page it makes it very difficult for us to backward engineer the code to determine what the output will be like. In fact, when trying to create JavaScript functionality such as this, you should start with a hard-coded page with a couple of representative records. Once you get it working - THEN create the PHP code to create the page dynamically.

I haven't read through all of the code you posted - but it looks awfully complicated based upon what you say you want to do.

<< Moved to JS forum >>

Sign In

Displaying information when image is clicked

Recommended Posts

cerberus478

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information