单击图像时显示信息

Question

我正在尝试创建一个页面，其中有一个图像网格，如果您点击其中一个图像，它将会展开。图像展开后，单击其下方的i图标，i图标将显示该图像的信息。

我设法让网格以我需要的方式工作，但是获取i图标以显示有关该图像的信息开始让我疯狂:-D

如果您需要更多信息，请告知我们。

这是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>'; 

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

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

}