Hi!
Just a push in the right direction would be very helpful.
I am trying to make a simple thumbnail gallery (will be colorbox.js powered)
draggable horizontaly for screen and touch.
I read in the description that drags vs clicks are detected,
however I cannot figure out how to create this functionality.
Drag only works when the containing div is dragged,
not the thumbnails, it contains.
How can I set this up so that the entire gallery is
draggable unless a thumb is clicked
or is there a simple solution that i am overlooking?
I have created a codepens:
http://codepen.io/anon/pen/bhtLp
http://codepen.io/anon/pen/fuoki
HTML
<div class="gallery_block">
<ul class="thumbnail_list">
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
<a href="http://placehold.it/150x150">
<li>
<img src="http://placehold.it/150x150">
</li>
</a>
</ul>
</div>
CSS
.gallery_block {
float: left;
width: 500px;
height: 400px;
border: 1px solid #bebebe;
overflow: hidden;
}
.thumbnail_list {
float: left;
width: 800px;
height: 100%;
list-style: none;
}
.thumbnail_list li img {
float: left;
}
.thumbnail_list a {
margin-right: 5px;
margin-bottom: 5px;
float:left;
}
JS
<src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js'></script>
<script>
var gridWidth = 150;
Draggable.create(".thumbnail_list", {
type:"x",
edgeResistance:1.0,
});
