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

Ha! The problem was very simple and obvious, but only because I created it. When I made that first demo with the images, I added window.stop() to init function, which stops the browser from downloading. I added that as an easy way to stop the images from downloading when you change the tile size. I really wasn't thinking about how it would affect other things because it was intended only for that demo. So your video wasn't downloading because I stopped it.  :oops:

 

Glad to hear you're learning the dev tools. It's definitely worth taking the time to learn them. I was able to identify the problem very quickly because I saw in the console that the download was being stopped.

 

GreenSock support is only for GreenSock related issues, so you're not going to get help with other issues. If you're just starting out, I would probably hire somebody. Plus you would probably learn a lot from them. If somebody is freelancing, there probably isn't going to be any conflict of interest unless they have some NDAs that specify that.

 

As far Safari goes, I can't tell because my Mac won't start. I didn't test the image demos in other browsers, but it's probably a CSS issue. My best guess is that it has to deal with the transform origin or the scaling.

 

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

 

  • Like 1
Link to comment
Share on other sites

Thanks for the input and update on my code in the other forum. I asked you a question over there and am also posting it here to be thorough. 

 

My main purpose for the sortable gallery is to have my client sort his photographs on his end as a way for me to see his desired order. Until now, he has been emailing me a long list of image numbers in a certain order and its a royal pain. 

 

I realize that the gallery you created opens each time with the order as the images are listed in the script. Is there any way possible to do like a data save that the page will reopen to? The optimum would be an administrator save and reset button for the state of the gallery and also a user reset button that just puts the images back to the order at page open after they have played with the drag feature. 

 

I hope this kind of thing isn't super complicated and time consuming. First let me know if its possible, and then what it would take to add it. 

 

Todd

Link to comment
Share on other sites

Is there any way possible to do like a data save that the page will reopen to? The optimum would be an administrator save and reset button for the state of the gallery and also a user reset button that just puts the images back to the order at page open after they have played with the drag feature. 

 

I hope this kind of thing isn't super complicated and time consuming. First let me know if its possible, and then what it would take to add it. 

 

 

Hi Todd,

 

Something like that would involve some level of server communication, data storage and a reasonable amount of custom programming.

Another option would be to configure your tool to generate a list of thumbs (from your client) in a way that the tool could also read that list and display the thumbs appropriately. So basically your client would give you a sting of text that you paste into your code and it all updates.

 

These are all things that go way beyond what we support. 

Link to comment
Share on other sites

Had I known that my demo was going to be so so popular, I would have written it differently. I really didn't think people would actually try to use the code line for line, so I didn't include a way to handle or manage any data.

 

That said, there's nothing super complicated about the code. I even made a really basic version of it that should be pretty easy to understand. See if you can make your own version. The way I learned JavaScript was by recreating other people's work line by line, figuring out what every piece of code did.

 

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

 

And you don't need another library to filter anything, you just need to learn how to use arrays. Here are some array methods that you should learn: forEach, sort, filter, reduce, map, indexOf, some, every. You can find info about these in the link below, which has a list all of the array methods.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

 

Here's the grid using filters. Study it. It uses most of those array methods. Open up the console and you will see that it is outputting json for the images, which could be used to rebuild the grid. Again, study the code, and then break it so you can figure out how things work and maintain it yourself. 

 

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

 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Hey Blake - Thank for that last message. I haven't logged on in a while, so I had missed it. That's very helpful. 

 

So, I added a click event to the gallery to enlarge each image to a bigger viewing size. I wanted to show you on codePen, but it was the strangest thing. I kept trying to make a pen but each time, something would keep it from working - sometime the #list wouldn't even appear in inspect element and sometimes Dev Tools would say that the jQuery cdn was undefined, etc. So it was becoming a thing that was more and more unbelievable every time. So I finally broke down and just forked your pen with the loremPixel images and then changed that by hand - and of course that worked. 

Then I took a 5 min snack break and came back and the pen opened to a blank page. After so many strange obstacles in a row - I was in total disbelief. Then I opened another Pen and that one was blank, and EVERY Pen I opened with that grid was blank. So I thought I was in the Twilight Zone and then I thought - IT has to be loremPixel. SO I tried to log on to their site and the site was temporarily down. What are the odds of that happening within 5 min of a string of obstacles for something so simple...

 

I'll add a link to that pen once I see that lorempix is back up, I want to see it working before I include it. 

Link to comment
Share on other sites

Here the pen:

 

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

 

After you hover, click the image and watch it bounce up in size. I really like the affect , but the only problem is after the image grows, it stops with a sustained blur. I'm guessing that this is due to the image being held between two states. It seems to be still in hover cuz when you move the cursor it shrinks. 

I'll need to fix that along with Keeping the bigger sizes from stretching off the screen. I could either center each image or somehow set the viewport or containing element as a boundary> think it would look better if they floated above their thumb, like they are now, but just push off the edge. 

 

If you have any tips on this, you might keep pointed in the right direction as I imagine there are a lot of different ways to do this and I wouldn't want to pick a method with complications. 

 

As for the blur, I figure if I kill the hover on click (or something similar) - that might free it up and clear the blur. If you think its something else, let me know.  

 

We'll see how I do on it... Later

Link to comment
Share on other sites

Ok - I'm missing something that's causing me to go in circles trying to find a workaround. (code below is my click to enlarge more than hover, pen link also included)

 

    element.on("click", function() { 
        zoomIn2(); 
    });
        function zoomIn2(time) {
        if (tile.isDragging) return;
        time = time || zoomTime2;
 
              - - >                            TweenLite.to(element, time, { left:0, top:0, scale: tileScale2, zIndex: "+=10000"});
               - - >                           TweenLite.to(image,   time, { scale: ratio});
 
I put this click event in, but I couldn't get the - .tile/ element to acknowledge a parent container, so I had no reference to center it. No matter what I did, they would shoot off into 1000% or shoot left etc... I tried binding it to the window, I created an overlay as a parent and appended each tile over, I tried all changing the tile to relative onclick to push the images on the edge toward the middle with padding - Then I realized I was being foolish not to just ask you. I've enjoyed exploring the code but I'm in hot water with my deadlines and learning/tinkering doesn't work well under pressure. I'm living proof, LOL. 
 
I'm really on the 1 yard line with this gallery, all I need to either create a boundary so the outer images don't get cropped overflowing out of the viewport when they scale , or to just center them. 
 
Check out the IMG blur once the image stops growing. Is there a quick workaround for this type of thing? Also, I didn't use a second hover on the click function on purpose, It just happened and I decided to roll with it cuz it returns automatically on mouseout.  Do you foresee any problems down the road basing this animation on a hack? I'm wearing of it but  am loosing time and money and I'm hastily going for the easy way. If a proper toggle is just as easy, please let me know. 
 
Take a look at the latest pen below. Oh - I had the stagger working on my desktop but then messed it up and decided there's no hurry on that. But at least I got something to go!!! For a minute...

 

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

Link to comment
Share on other sites

Well, the reason for the blur is because the images are being scaled. You would need to load the images at that size to prevent the blur. Another way would be to load two images, one for a thumbnail and the other for the full size.

 

As for the centering, I don't see anything wrong. However, I can't check on Safari right now.

Link to comment
Share on other sites

  • 1 year later...

No. I didn't set it up for that. I've also been using a different technique to do this type of stuff. 

http://greensock.com/forums/topic/14575-how-to-create-a-sortable-list-with-draggable/

 

It uses an array based grid, and could presumably be setup to handle different widths and heights just like a tetris board. Unfortunately, I haven't had much time to work on a version like that.

 

fY8GhfV.png

  • Like 3
Link to comment
Share on other sites

  • 5 months later...
  • 9 months later...
  • 2 years later...

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...