www.webdeveloper.com
Results 1 to 4 of 4

Thread: hide and show div on click

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    3

    Angry hide and show div on click

    I have the following php code:

    PHP Code:
            $files glob('martingallery/*');
            
    natcasesort($files);
            
            foreach(
    $files as $file){
                echo 
    '<a href="' $file '"><img src="' $file '" height="150px" width="auto"/></a>';
            } 
    what I would like it to look like:

    PHP Code:
            $files glob('martingallery/*');
            
    natcasesort($files);
            
            foreach(
    $files as $file){
                echo 
    '<a onclick="SET THE $FILE DIV TO VISIBLE"><img src="' $file '" height="150px" width="auto"/></a>
    <div id="' 
    $file '" style="visible:noooooooooo;"><img src="' $file '" height="auto" width="auto"/></div>';
            } 

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,115
    Here's an easy method with jQuery. Add this CSS and JS to your HTML:

    Code:
      <style type="text/css">
        .show-hide div {display: none;}
        .show-hide.show div {display: block;}
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $('.show-hide a').click(function(){
            var parentDiv =  $(this).parent();
            // if parents div already has class show, remove it otherwise, add it
            if ($(parentDiv).hasClass('show')) {
               $(parentDiv).removeClass('show');
          } else {
             $(parentDiv).addClass('show');
        }
          });
        });
      </script>
    And modify your PHP to this:

    Code:
         $files = glob('martingallery/*'); 
            natcasesort($files); 
             
            foreach($files as $file){ 
                echo '<div class="show-hide"><a><img src="' . $file . '" height="150px" width="auto"/></a> 
    <div id="' . $file . '"><img src="' . $file . '" height="auto" width="auto"/></div></div>'; 
            }
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Feb 2013
    Posts
    3
    so the user clicks a thumb to open it up as a big image then they click the big image to close it so they can choose another to view =p well i will develop this so that they is a way to navigate the images once in the "enlarge" but i would still want a way to exit it? =s

  4. #4
    Join Date
    Feb 2013
    Posts
    3
    thanks for the reply cbVision although I am needing this to use on a photo gallery, this code allows the user to click a image and show a larger image straight underneath or beside it i understand all i have to do is style it to solve this, however how would i go about closing the enlarged image when the user clicks it?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles