Jump to content
Search Community

Sortable grid with draggable tiles Demo - Put content/images in tiles?

T.Gregory test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

On this Demo grid with sortable tiles via dragging, I'm not sure how one would put content into the tiles, I tried a few obvious things but there must be something I'm missing. This is becoming a theme for me here at GSAP - i always seem to be missing one key element that has no mention or reference anywhere - surely it's not intended to be a page of numbered green tiles...


If anyone can point me in the right direction, please let me know. I'd like to try it as an image gallery...

See the Pen dPZLEp by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Great, I'm looking forward to seeing it. I've looked into many of these grids and I like this design the best. If inserting images into the tile containers is done any other way than straight up html, (like js) please remember that I'm a newbie to js and Jquery when explaining the process. Thanks...

Link to comment
Share on other sites

Unfortunately the tiles aren't created with HTML, but the jQuery part of it is really easy. Most of the code you need to change is at the top of the createTile() function.


The most basic way to add an image to the tile is to do something like this.

// Change this...
var element = $("<div/>").addClass("tile").html(label++);

// to this
var element = $("<div/>").addClass("tile").html("<img src='my-picture.jpg'/>");

The only problem with this is that all the pictures will be same, so you're going to need a way to feed it an image. You can pass in the url of your image where the createTile() function gets called in the init function(). So now you would need to add this to the createTile() function.

function createTile(url) {

  var image = $("<img />").attr("src", url);
  var element = $("<div/>").addClass("tile").append(image);

That's really all you need to do to add an image. However, there are other factors you may need to consider, like how to deal with the loading of an image, and if you should display the tile if the image hasn't loaded yet. The demo I made makes sure an image is loaded before it is displayed, so you will notice a delay when adding a new image. The demo is also getting images from lorempixel, so I'm not feeding it a url like I described above. I have to manually create the image in the createTile() function and setup some parameters to get the right sized image from lorempixel.


I know the code in that demo can be hard to understand if you're new to JavaScript, so the other day I created a really simple version of it which should be easier to follow. The only thing it does is basic sorting when you stop dragging, but it's the exact algorithm used by the other demo to determine the order of the tiles.


Simple version:

See the Pen pJKRWy by osublake (@osublake) on CodePen


Full demo:

See the Pen rVKEQm by osublake (@osublake) on CodePen








  • Like 2
Link to comment
Share on other sites

Thanks a bunch, simple works for me... 


I've created a depth-of-field hover effect for gallery images that has the image set zoomed in and cropped with overflow hidden and


when hovered, it zooms back while the framing div scales out at the same rate. Before I go putting man hours into integrating the


code into the grid, would you be able to tell if there are any conflicts just by taking a look at it? Its sortable now, but with UIKit and


there "draggable" code is too restricting for my ultimate purposes.


I have a demo on my server: http://skybluepreviews.com/sorTest


Also the coded is simply: (this is streamlined after the above demo) HTML:
<div class="depth" id="depth2"><img src="gallery/001.jpg" width="300px" id="dImg"> </div>
<div class="depth" id="depth2"><img src="gallery/002.jpg" width="300px" id="dImg"> </div>
<div class="depth" id="depth2"><img src="gallery/003.jpg" width="300px" id="dImg"> </div>
<div class="depth" id="depth2"><img src="gallery/004.jpg" width="300px" id="dImg"> </div>
.depth{  position:relative;
border:8px solid white;
-webkit-transition:All 1s .2s ease;
-webkit-transform: scale3d(1, 1, 1);
.depth:hover {
border:4px solid white;
-webkit-transition:All 1s ease;
-webkit-transform: scale3d(1.3, 1.3, 1.3);
.depth img{
-webkit-transition:All 1s ease;
-webkit-transform: scale3dscale3d(2,2,2);
.depth:hover img{
-webkit-transform: scale3d(1, 1, 1);
Link to comment
Share on other sites

I wouldn't use UIKit for the simple fact that their draggable is broken. It will not work on webkit browsers (Chrome, Opera) when there is a touch screen present. I don't know if they realize this, but touch screens are pretty common in Windows devices, especially laptops. The source of this problem is very apparent in the first couple lines of code they copied their sortable script from, but I'll let them figure that out.


So about your code... I don't see anything that would cause a problem. In fact, I tested it out, but I used GSAP instead of CSS. I think results are pretty amazing. I never really thought about using it for an image gallery before, but it seems to work great.


See the Pen jPpOaO by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

That looks sweet. Its so nice to see it working the way it should with no jerks or wiggles. When you get used to seeing the thumbs open up like that - the old way looks so disappointing.  I can't believe I haven't seen this anywhere else.


I keep coming up with clever dynamic interface ideas but I'm not skilled enough with code to complete them - maybe I could start sharing the ideas in return for some help taking the code to the proper level... 


Right now I'm working on some layered absolute-nested html5 video players as abstract backgrounds with some animation applied to/and clipping frames that change shapes and the possibilities are overwhelming... I'm looking for a reliable way to kill all buffering when a video is paused as well as the most efficient way to switch clips in the player via click - but stack overflow is a hodgepodge of opposing opinions and methods for managing video. Until I can minimize the load of multi vids, its not quite reasonable yet.. Let me know if you have an opinion or a favored methods for handling video. 

Link to comment
Share on other sites

Wow! That's a pretty cool parallax effect you got going on there.


I haven't used video much, so I really can't offer much advice on that front. But if you are using video as a background, you might want to look into drawing it on a canvas. That will give you more control over the video like manipulating it in real time.


Learning how to use the canvas can be hard, but it also has a great side effect. You will become much better at JavaScript because you kind of have to use your imagination and build everything yourself.


So this is kind of old and you may have seen this before, but I still think it's pretty amazing. Blowing up a video in canvas...



Link to comment
Share on other sites

That's amazing... Do you have any advice on sources to learn Jquery and JS? What I could use the most right now is a source for examples of syntax. Its frustrating that a majority of the examples I find when searching always have something missing or are specific to an odd situation. It took me days and hundreds of examples just to find a usable toggle example.


Also, I'm going to try to put my images into the grid by using the method you suggested above. If I get stuck I'll ask for advice....

Link to comment
Share on other sites

It's been a while since I've learned JS and jQuery, so I'm not really not up to date on any good resources for those topics. Perhaps somebody else could recommend something.


I've always found video tutorials to be the best way to learn new topics. That's why I maintain a subscription to PluralSight, which also includes Digital Tutors and Code School. It may not be free, but it's definitely worth the price. It's so much easier trying to learn something when you have somebody explaining the key concepts to you. And in most of their courses you usually build something that is practical and applicable to the real world.

Link to comment
Share on other sites

Thanks - vid tutorials work best for me too. 


So - I tried to figure out how to append multiple images into the grid and I understand what's happening but need some help with the particulars. 


If I have a folder named = "img" with a list of images inside sequentially named as such: "001.jpg, 002.jpg    etc... (or however recommended)


To append all images to tile divs, I had figured I'd need to change the baseURL to the relative path to the img folder and then do image.src = reference to img file + variable name to add it to the tile list ...


However close I may or may not be, could you show me how the code should look? 

Link to comment
Share on other sites

  • 2 weeks later...

Hey Blake - The gallery has been working just fine . . . until I put YTplayer in my site. Its a responsive background player that plays Youtube vids, have you heard of it?

Well - my gallery grid and the YTplayer are conflicting each other somehow, and I was wondering if you might know off hand what this kind of thing usually is. Or maybe you're curious to take a look. I have narrowed the conflict down to the js script, which was what I expected. 


I think it'd be wise for me to get advice before I dig into it and ruin everything. 


Here's the github where the player files are: https://github.com/pupunzi/jquery.mb.YTPlayer


and you know the code for the draggable grid. 


I hope its something super simple.... Let me know if you take a look...

Link to comment
Share on other sites

What's going on? It's hard to tell without seeing the problem. If you can create a CodePen with the problem, I'm sure I'll be able to figure it out real quick.


And where is the YTplayer in your HTML? If you have it inside the div#list, that might cause a problem because it is updated dynamically in the code.


  • Like 1
Link to comment
Share on other sites

I've never made a pen before and this file has multiple dependancies and external stylesheets - but its only 1 page of html, so I figured I'd just drop it on my server for this time and then learn how to properly make a pen when I have a moment. 


I've narrowed it down even more as the grid code does the same thing to a totally different player I put in for another layer. So this will probably be good for you to figure out now to keep the grid compatible. Here's the link and a few pointers about where the pertinent stuff is in the file. 




I assume you can pull the whole file to your desktop with Site Sucker or something. I can also drop it in my FTP, if you need. 



*Right now the div#list is dormant in the index.html at: <!--draggable- * * *   gallery HERE --> (flag for you) about 5 or six little blocks of code down from the head. The html "list" is inside the div classes "galleryBlock"(absolute) < "frame1Rel"(relative) < "frame1"(absolute)


1) These are the names of the YTplayer external files:





If cheking-out the file doesn't work this way for you - are there code pen instructions somewhere that I could take a look at? Mainly how to upload external sheets and dependancies - 


If this works for you . . . there are a few other glitches in the grid code - in Chrome - the set zoom on the bg imageis is somehow way too zoomed in, and in Safari the margins and borders are pretty far off sych. Maybe this is just cus I didn't hook up the prefix free js sheet right or something? Just a hopeful guess for a possible quick fix. 

Link to comment
Share on other sites

I really can't setup anything on my computer right now because I'm preparing to do a wipe for Windows 10.


CodePen doesn't have a file system, so use Plunker instead. You build it just like a normal website, and there is a button to run and stop it. You can't upload files directly, but you can copy and paste them into a file by clicking on the new file button. There's also no folders, so you might need to change the paths. Also, you can't save images on Plunker, so just use loremPixel instead.

var baseUrl = "http://lorempixel.com/";

// set the width/height of image
var images = [
Link to comment
Share on other sites

I went to Plunker and pasted all my files. I didn't know whether to include my heading with links, or name my new files the same,  or if it connects them for you etc etc and - of course - no instruction from plunker. So I assumed the files would connect internally and just named the new files new names. 


I opened it in preview and it just acted like there was no style attached - oh, I just realized I forgot to include the dependencies, I assume I would need local copies of "draggable" by why couldn't I just link them.. Why can't anybody just leave basic instructions. 




If the plunker pen isn't just the flip of a switch from making it work you can just grab a copy of my desktop file from my FTP at:

Server: ftp.skybluepreviews.com

username:  upload@skybluepreviews.com

password: upload


File Is named: player+draggable

Link to comment
Share on other sites

There is no style attached. I told you to change the paths because there are no folders.

<link rel="stylesheet" href="css/grid.css">
<script src="js/index.js"></script>

<link rel="stylesheet" href="grid.css">
<script src="index.js"></script>

And you're missing a ton of files. The files don't have to be local. You can link to anything, including your own server.


I can help you figure out problems with the sortable grid, but you need to fix things on your end first. I'm guessing you don't know how to use your developer's tools, because you'd probably find the source of your problem real quick. Before you do anything else, please learn how to use them, especially the console. The console will show you errors and what file and line number they occurred on. 


Here's a good place to start, but there's also some pretty good videos on YouTube you can check out.




Show me an error free version of your site and I will look at any problems with the grid. I would start the script.js file because it's not using valid JavaScript.

  • Like 1
Link to comment
Share on other sites

I was tired and totally misread what you said about the Plunkit site. I was thinking I couldn't attach my own. No worries - I'm caught up sleep finally and I get what to do about uploading the site... 


I'll give the devtools a shot first, It's time I learned it anyhow. Ive been learning so many different things all at once lately that it felt like one more new thing and my brain would blow. But the dev tools thing is a must right now... 

  • Like 1
Link to comment
Share on other sites

Dev tools is great - how did I survive without it? 


I'm doing the tutorials, but in the meantime - I made a pen of a hybrid of the YTPlayer plugin and the draggable grid. It hit me that the rest of my site wasn't relevant to the conflict, so I made this pen:


See the Pen vOveWP by code-a-la-mode (@code-a-la-mode) on CodePen


If you delete line 31:

<div id="list"></div> (the grid div#list)


the BG video appears as the grid goes away and does the opposite when you paste the code back.



I'm guessing the conflict will be so simple and obvious to you that it'll be funny. I have major holes in my knowledge cuz I started with Zero understanding of code and have only learned by taking apart websites and then searching the web through a mess of horrible (and often incorrect) explanations etc...


If I get this big design bid I'm going to need to hire a freelance coder/co-designer. But do you think that if I just stick to the Greensock framework I could get enough support from full membership to handle the developing myself - or should I find someone in a position like yours for freelance support, and is that ever done? or would there be a conflict of interest with the company that the support-individual is associated with?


Just spitballing - any input would be appreciated...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...