brihol44
asked on
I would like to be able to expand off the included jquery plugin.
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
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
ASKER
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.
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
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>
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>
Working sample here http://www.marcorpsa.com/ee/t636.html
ASKER
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!
<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!
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?
Where are you planning on getting the content for the div?
ASKER
Thx, from the last snippet I posted is how I wanted to build it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Will have a look at it - this was just a quick and dirty to demonstrate the concept.
Open in new window