Tags: flickr, gallery, JavaScript, jQuery
How to make a gallery for Flickr photos
This post is for those who want to showcase photos stored by Flickr. There is a commercial product for this purpose (see Flickr Pack). But you can easily do the same (say, almost) absolutely for free. I have already covered the theme of usage of Moon Gallery plugin in two little posts (see here and here). Now it’s time to go further and to tell about its usage with Flickr API. You can read all about Flickr API here. The general scheme of using this API is as follows: The script sends an appropriate query to the server, using one
The gallery with photo-filters
Today I want to continue talking about Moon Gallery jQuery library. It’s time to consider photo-filters. There are two ways to transform images in JavaScript: 1. You can draw a canvas element and replace your image with it. 2. Or you can use SVG-filters. First way consumes significantly more resources, but it’s supported by almost all modern browsers. Second way is preferable, but it’s not supported by old Android devices. Moon Gallery supports both technics. You can even set your gallery so that SVG-filters will be used if a browser supports them, otherwise canvas will be used. Canvas filters The
JQuery: making a masonry gallery for free
When you want to make a photo gallery you will likely find the Moon Mega Grid Plugin among others. It’s a great tool for building galleries with a bulk of templates and settings. But it’s not free. Fortunately, there is a free version of this plugin: the Moon Gallery. It has the same functionality. But there are only two simple templates in the Free Pack. If you need something special you ought to create a template by yourself. Features integrated support for canvas and svg filters perfect for mobile devices simple templating tools built-in lightbox with retina support 2 retina
Let’s create a Slider. Again…
There have been three posts about creating a Slider with Scala.js already. The first post was about how to do it in principal. The second post was about the ScalaCSS library in general and how one could use it with our Slider in particular. The third post was about how to use a JSON object with our Slider. Now it’s time to compare Scala.js with its closest alternative: I mean TypeScript (a typed superset of JavaScript that compiles to plain JavaScript). It’s fun: the first version of this Slider was written in CoffeeScript. It took me about 3 hours. I
Scala.js and unidirectional data flow
During the last two years the one of the most popular subjects for discussion in the JavaScript society is so-called “unidirectional data flow”. Those happy years, when we used JavaScript for organizing of some effect on the page or for loading some widget by Ajax, gone to the past. Today JavaScript is used for building client-side web applications. There are several frameworks for doing such things. I used React in my last projects. It’s a great library. It allows doing everything you want. Except unidirectional data flow. You have to use Flux or Redux for that purpose. But what about
Designing facades in Scala.js
Scala.js builds a bridge from the Scala world to the JavaScript world. Today Scala developers can take all the magic of Scala with many powerful libraries and use it in front-end applications. But after passing the bridge our developer suddenly might find himself in very different environment. Does he know something about transition animation, or about event system on mobile devises? Fortunately JavaScript itself is ready to give a huge bulk of awesome libraries for all cases. All we need to do is to find an appropriate library and write a facade. You can find this in the Scala.js documentation: When
Slider 2: a JavaScript object instead of case classes
Two weeks ago we talked about how to create a beautiful Slider in Scala.js Our Slider works well (See Demo). But there was one thing that worried me. We need to define a Slider property as a Scala case class. It’s not bad, if our Slider is a part of a single Scala/Scala.js application. But what if we need to install our Slider into some HTML page. In that situation we should think how to pass some JavaScript object into the Slider. At first sight this is a frightening problem. It turned out that it is not. All we need
String calculation effect in JavaScript
In one of my posts I wrote about the Strong-Password Plugin. The secret of its attractiveness lays in usage of interesting effect: a new password is being calculated on the eyes of the visitor. Let’s discuss how to create such an effect. We need a function that will generate our effect of “string calculation”. I named it generate. var generate = function(str, result, from, delay) { // Our code will be here…. } Our function takes four parameters, the first two are required. str – it’s a string that will be shown at the end (the result of calculations) result
Strong Password Generator
Today I want to tell about the jQuery plugin which I wrote this March: strong-password.js If you need to give a hint for your new visitor of your site how to create a good password: memorable and strong, you can take an opportunity of using this simple plugin. And it’s available for download on GitHub under the MIT License. The plugin can be plugged to a form password field, and when a new visitor clicks on this field an animated popover will appear with a generated password. The password consists of a combination of vowels and consonants, so it is
-
-
-
-
/ 0 Comments