Showcase Your Creations in a Gallery


So you have created your own CSSDeck platform and made loads of creations. But you need a way to show them somewhere on your website or web app. Like a gallery with small previews of the items that other people can browse through and click to view a specific creation. So how to do this ?

Image Preview

This is the easiest way. Take screenshots of your items and place them in a gallery. Gallery can have a grid view or a list view, whatever you feel is right for you. Oh, that rhymed.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

Iframe Preview

A bit trickier but nicer approach (in my opinion anyway), is to add iframes in your gallery that points to a page which loads your creations. Using CSS3 you can scale them down by about half:

iframe.creation {
	transform: scale(0.5);
	transform-origin: top left;
}

Now ofcourse you need to be careful about this. If you load tons of items on the page then the browser will get laggy and slow down the visitor’s computer. Chrome and Opera can handle a lot of pain, but Firefox and IE can be dissapointing. Especially with CSS3 Animations, Canvas demos, WebGL experiments or other JS based animations your browser may explode.

So, now we have yet another set of problems that needs to be solved. First of all, as I said do not load too many items. Load about 6-10 creations at a time. Add a pagination then (or an endless scroll). No one is stopping you from implementing lazy loading either but still you could be facing quite a bit of the performance issues.

Implementing Lazy Loading is not too hard. Bind a scroll event on the window and instead of src, use a temporary attribute like data-src on the iframes. As you scroll, the event handler gets fired where you can loop over the NodeList (or a static Array) of the iframes. In the loop callback check if the iframe is in the view port or not:

  var elementInViewPort = function(el) {
    var rect = el.getBoundingClientRect()
    //console.log(rect)
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
        )
  }

If the iframe element is in the view port, swap data-src for src and add a specific class that can denote that the iframe has been scrolled off. This way you only loop over iframes that does not have that class.

Make sure your iframe’s src is on a different origin to prevent the same security issues we had discussed in an earlier post. In the server-side code, that iframe[src] routes to, all you need to do is:

  1. Fetch the HTML, CSS and JS code from the Database or File or some remote API or wherever you stored it.
  2. Inject them into a Base Template. So, the CSS code goes inside the head while HTML and JS goes inside body. Something like this seems good:
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
        <%= item.css %>
      </style>
    </head>
    <body>
    
      <%= item.html %>
    
      <script>
        <%= item.js %>
      </script>
    </body>
    </html>

So, that’s it! Your creations will load in a small resolution inside the iframes. You’re all set to have your own gallery that others can browse through.

Next Up

Ok, I lied! You’re not all set yet if you have some memory intensive CSS3 and JS Animations. Its important to understand that the animations can kill your user’s browser and computer eventually. Hence, we need to find a fix to this problem. On thinking hard, all that comes to mind is to cancel all the animations after a small interval on page load. Exactly! That’s what we’re going to cover in the next post.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

2 thoughts on “Showcase Your Creations in a Gallery”

    1. Forking a creation is not tough really. Your backend application basically has to create another entry in the DB holding the new values with a pointer (parent_id for instance) to the parent entry. This way you can manage relations.

Leave a Reply

Your email address will not be published. Required fields are marked *