Tiny Circleslider: A lightweight circular carousel for jQuery. What is it? Tinycircleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library. Features IOS and Android support. Need support or custom features? Anything is possible! Examples $(document).ready(function(){ $('#circleslider1').tinycircleslider();}); Note: There is no lightbox natively in tiny circleslider for this example fancybox was used. To get a better understanding of how it all comes together I made a (corny) styled example. Constructor Properties Methods Events Usage The image below displays how you calculate the radius of your circleslider.
Learn to code. Elastic Image Slideshow with Thumbnail Preview. Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License. So, let’s do it! The Markup We will create two unordered lists, one for the main slider and one for the thumbnail navigation beneath the large image. The list for the thumbnail preview navigation will contain an absolute element (the first list element with the class ei-slider-element and the thumbnail list elements which consist of an anchor and an image (the thumbnail).
Now, let’s add the style. The CSS First, we will define the style for the main wrapper. The JavaScript. Timeline Portfolio. Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests. The HTML Timeline comes with a light colored theme by default.
It is perfectly usable and in most cases would be exactly what you need. However, for our portfolio, a dark design would be a better fit, so we will customize it to our liking. First, let's look at the basic layout of the page: index.html <! In the head section, we have the plugin's stylesheet - timeline.css, and styles.css, which will hold our customizations. When we call the plugin, it will search for a div on your page with the ID of timeline. <div class="container main" id="timeline"><div class="feature slider" style="overflow-y: hidden;"><div class="slider-container-mask slider-container slider-item-container"><! The jQuery The CSS. Making a Beautiful HTML5 Portfolio. Martin Angelov In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin.
You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more. The HTML The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag: index.html <! In the body, there are a number of the new HTML5 elements. The #stage unordered list holds our portfolio items. You can put whatever you want in these li items and customize the portfolio further. Beautiful HTML5 Portfolio with jQuery The jQuery What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. Script.js – Part 1 Each tag is added to the itemsByTags object as an array.
Script.js – Part 2 Great! Creating an iOS-like Home Screen with CoffeeScript. Martin Angelov Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language. We are also going to use the Touchable plugin, so we can listen for touch-based events. First, what is CoffeeScript? CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good.
CoffeeScript works in every browser out there, and is compatible with all your existing JavaScript code (including libraries like jQuery and plugins). iOS -like Home Screen with CoffeeScript The HTML Lets start with the HTML markup of our iOS-like home screen. Index.html <! The #mask div shows only one screen at a time with overflow:hidden. The iOS Dock. How to Use Brackets · adobe/brackets Wiki. Getting Brackets Downloads Brackets here for Mac, Windows and Linux (Debian/Ubuntu). Brackets is built with HTML, CSS and JS, but currently runs as a desktop application in a thin native shell that can access your local files. Updates are released about once a month. The Basics Initially, Brackets opens a default "Getting Started" project. Follow the instructions in the HTML code for a quick walkthrough of Brackets features. You can open a different folder in the file tree on the left using File > Open Folder.
Unlike other editors that show open files in tabs, Brackets has a "Working Files" list, which is displayed above the file tree. Split View Initially Brackets will show just one editor in the main view but you can split the main view so that 2 editors can be shown in whichever orientation you prefer (vertical or horizontal). You can do this by selecting View > Horizontal Split or View > Vertical Split. Extensions Themes Brackets Highlights Quick Edit Live Preview Live Preview with SCSS/LESS.