Displaying information when image is clicked

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

cerberus47813
New php-forum User
New php-forum User
Posts: 1
Joined: Tue May 20, 2014 4:04 am

Displaying information when image is clicked

Postby cerberus47813 » Tue May 20, 2014 4:07 am

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: Select all

$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: Select all

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: Select all

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

}      

Return to “PHP coding => General”

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 2 guests

cron