Solved

I would like to be able to expand off the included jquery plugin.

Posted on 2014-04-21
10
480 Views
Last Modified: 2014-04-23
I'm trying to achieve this effect below but also have access to the HTML that is listed in the details section instead of the data being dynamically generated within in the links themselves if you review the source. I found another one like jquery apps folder but it's bloated and doesn't work as nicely as this one.

The only other requirement is that it's responsive. Maybe somebody out there has done this before and it's more simple than I'm making it.

http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Thanks for the help,

Brian
0
Comment
Question by:brihol44
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40014000
I will leave you to work out the fine detail of the complete css, but this is the general idea of what to do  http://jsbin.com/qisil/1

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git1.js"></script>
  <meta charset="utf-8">
  <title>padas Q_28417183</title>
  <style>
    .pics{
      float:left;
      margin:5px;
    }
    .pics_detail{
      display:none;
     
      width:100%;
      height:150px;
      background-color:red;
     clear:both;
    }
   
    </style>
  <script>
$(function(){
  $('.pics a').click(function(){
    var pic_id=$(this).prop('id');
       $('div.pics_detail').hide();
       $('[data-pic='+pic_id+']').show();
  });
  
});
    </script>
</head>
<body>
  <!-- box -->
  <div class="pics"><a href="#" id="1"><img src="http://placehold.it/150"></a></div>
  <div class="pics_detail" data-pic="1">big info 1</div>
  
   <!-- box -->
  <div class="pics"><a href="#" id="2"><img src="http://placehold.it/150"></a></div>
  <div class="pics_detail" data-pic="2">big info 2</div>
  
   <!-- box -->
  <div class="pics"><a href="#" id="3"><img src="http://placehold.it/150"></a></div>
  <div class="pics_detail" data-pic="3">big info 3</div>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:brihol44
ID: 40014071
Thanks for your efforts so far. That's actually as far as I got but when you click on the others like 1 and 2 you see how they move to next row? I just don't know how to handle it from moving like that.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40014091
I'm not trying to recreate the script, just show you how to display a hidden div.  Here it is a little nicer.  Keep in mind, this sample uses 5 lines of jquery.  The sample page you point to uses 350 lines.  

I do think the sample you point to is a much better choice in using ajax to place the image on the browser only when needed.  The way you are asking may be easier to understand, but if you have 50 images, you are now loading an additional 50 larger images all at the same time and that could be a speed issue.
http://jsbin.com/qisil/2/edit

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git1.js"></script>
  <meta charset="utf-8">
  <title>padas Q_28417183</title>
  <style>
    .pics{
      display:inline-block;
      margin:5px;
    }
    .pics_detail{
      display:none;
      position:absolute;
      width:100%;
      height:150px;
      left:0px;
      background-color:red;
     clear:both;
    }
     
   
    </style>
  <script>
$(function(){
  $('.pics a').click(function(){
     var pic_id=$(this).prop('id');
 
       $('div.pics_detail').hide();
       $('[data-pic='+pic_id+']').show();
  });
  
});
    </script>
</head>
<body>
  <!-- box -->
  <li class="pics"><a href="#" id="1"><img src="http://placehold.it/150"></a>
  <div class="pics_detail" data-pic="1">big info 1</div>
  </li>
  
  
   <!-- box -->
  <li class="pics"><a href="#" id="2"><img src="http://placehold.it/150"></a>
  <div class="pics_detail" data-pic="2">big info 2</div>
  </li>
  
  
   <!-- box -->
  <li class="pics"><a href="#" id="3"><img src="http://placehold.it/150"></a>
  <div class="pics_detail" data-pic="3">big info 3</div>
  </li>
  
 
</body>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40014387
How about this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('li').click(function () {
    $('.og-expander').remove();
    $('.og-expanded').removeClass('og-expanded');
    $(this).addClass('og-expanded');
    var data = $(this).data('html');
    $(this).append(
      $('<div/>')
        .addClass('og-expander')
        .append(
          $('<div/>')
            .addClass('.og-expander-inner')
            .html('My Custom Html for item ' + data)
          )
        .css(
          {
            transition : 'height 350ms ease 0s', 
            height: '500px'
          }
        )
    );
  });
});
</script>
<style type="text/css">
ul {
list-style: none;
}
ul li {
  display: inline-block;
  height: 250px;
  width: 250px;
  margin: 10px 5px 0;
  vertical-align: top;
}
ul li img {
  width: 250px;
  height: 250px;
}
ul li.og-expanded {
  height:760px;
  transition: height 350ms ease 0s;
}
.og-expander {
  background: none repeat scroll 0 0 #DDDDDD;
  height: 0;
  left: 0;
  margin-top: 10px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: auto;
  width: 100%;
}
.og-expander-inner {
  height: 100%;
  padding: 50px 30px;
}
</style>
</head>
<body>
<ul>
  <li data-html="item-1">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" />
  </li>
  <li data-html="item-2">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" />
  </li>
  <li data-html="item-3">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" />
  </li>
  <li data-html="item-4">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/4.jpg" />
  </li>
  <li data-html="item-5">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/5.jpg" />
  </li>
  <li data-html="item-6">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/6.jpg" />
  </li>
  <li data-html="item-7">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/7.jpg" />
  </li>
  <li data-html="item-8">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/8.jpg" />
  </li>
</ul>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t636.html
0
 

Author Comment

by:brihol44
ID: 40016788
julianH ... Awesome! Is there a way I can reference to a <div class="content"></div> selector maybe like this?

 <li data-html="item-8">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/8.jpg" />
      <div id="content-8" style="display:none">My Content Goes Here</div>
  </li>

and still work the same way? I just want to have more flexibility and generate more content than just text so I need the flexibility.

Thx!
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40016870
You can manipulate the text however you want - I used a simplistic example because I don't know where you are sourcing your content from.

Where are you planning on getting the content for the div?
0
 

Author Comment

by:brihol44
ID: 40017558
Thx, from the last snippet I posted is how I wanted to build it.
0
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40017791
Yes but the <div> is created and destroyed dynamically based on the <li> clicked - so you would need an alternative source for the html

Either that or you would need to do something like this - the code below has the div's with the content persistently there - the javascript just hides or shows it depending on which element is clicked.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('li').click(function () {
  if (!$(this).hasClass('og-expanded')) {
    $('.og-expanded div.og-expander').css({height: 0}).hide();
    $('.og-expanded').removeClass('og-expanded');
    $(this).addClass('og-expanded').find('div.og-expander').show().animate({height: '500px'}, 350).addClass('selected');
  }
  });
});
</script>
<style type="text/css">
ul {
list-style: none;
}
ul li {
  display: inline-block;
  height: 250px;
  width: 250px;
  margin: 10px 5px 0;
  vertical-align: top;
}
ul li img {
  width: 250px;
  height: 250px;
}
ul li.og-expanded {
  height:760px;
  transition: height 350ms ease 0s;
}
.og-expander {
  background: none repeat scroll 0 0 #DDDDDD;
  height: 0;
  left: 0;
  margin-top: 10px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: auto;
  width: 100%;
  display: none;
}
.og-expander-inner {
  height: 100%;
  padding: 50px 30px;
}
</style>
</head>
<body>
<ul>
  <li data-html="item-1">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-1</div>
  </div>  
  </li>
  <li data-html="item-2">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-2</div>
  </div>  
  </li>
  <li data-html="item-3">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-3</div>
  </div>  
  </li>
  <li data-html="item-4">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/4.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-4</div>
  </div>  
  </li>
  <li data-html="item-5">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/5.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-5</div>
  </div>  
  </li>
  <li data-html="item-6">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/6.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-6</div>
  </div>  
  </li>
  <li data-html="item-7">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/7.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-7</div>
  </div>  
  </li>
  <li data-html="item-8">
    <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/8.jpg" />
  <div class="og-expander">
    <div class="og-expander-inner">My Custom Html for item item-8</div>
  </div>  
  </li>
</ul>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:brihol44
ID: 40018077
Nice! Do you by chance know how I can get it to stop jumping to the top of the page on image click? I like the example I sent in the first message because it's so smooth but I can't see what I'm missing in my additions.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40018261
Will have a look at it - this was just a quick and dirty to demonstrate the concept.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Coding for the first time 9 67
Debugging Html 8 31
Session on Html 8 39
Table header must be on top 2 27
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question