Jump to content

Displaying information when image is clicked

cerberus478

By cerberus478
in Javascript Help

 Share

Recommended Posts

cerberus478 Member

cerberus478

Posted
Posted

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

}
Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted (edited)

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

Edited by Psycho
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.