background preloader

Elastic Image Slideshow with Thumbnail Preview

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 Related:  Responsive + Fluid

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog Hay, I wrote this in 2012! I still like the notion of the metaphorical connection between content-based sizing units (e.g. ems) and layout definitions (e.g. breakpoints). And the zooming behavior cited here was always meant more as a sidelong example than a core argument. Nonetheless! You should note that the zooming behavior has long since been made consistent in browsers (i.e. fixed). –Lyza, March 11, 2015 If we’re going to be proportional… A core tenet of Responsive Web Design (RWD) is fluidity and proportion. @media all and (min-width: 500px) {} @media screen and (max-width: 800px) {} It’s a natural thought process: for windows or screens of particular width ranges, we want to flow our content in a particular way. Folks who design for traditional reading media—where the content really is king—don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. Baseline expectations p.s.

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.

Ultimate Guide To Setting Up Your First Online Shop E-commerce is the most popular business trend in our futuristic society, as most modern cities have Internet equipped and it’s such a simple process to send payments anywhere in the world via Internet connection. Along with these technologies have risen hundreds of thousands of new digital web stores which sell both physical and digital products to one global marketplace. (Image Source: Fotolia) Business means trade, and trade means transaction. For Internet buyer, what they really care about is probably the security, as there are overwhelming fraud issues happening all around the world nowadays. But hard doesn’t mean that it’s impossible to do it yourself. The Process of Building Before even considering to launch your website it is crucial to spend some time away from the computer and build your idea. (Image Source: Fotolia) These are all very important topics of discussion which you should consider deeply. Registering a Domain Spend a lot of time considering your domain before purchase.

Using jPanelMenu with jRespond Using jRespond with jPanelMenu Responsive design is an amazing revolution in our industry. It’s changing every part of our process — definition, planning, design, development, and beyond. But, as we all know, design is only one part of the equation. Responsive behavior is a big thing that no one is talking about, but everyone needs to be. jRespond is “a simple way to globally manage JavaScript on responsive websites.” jPanelMenu and jRespond are the perfect couple. Setting It Up First, get jPanelMenu and jRespond! For detailed documentation on jRespond, please visit the jRespond Github page. Note: The following example is pulled directly from this page. Start off by setting up jPanelMenu, referring to the documentation for specifics on options and API functions. Once jPanelMenu is ready to go, set up jRespond. Note: This is a very simple setup with only two breakpoints, small and large. Adding Functionality That’s it! Who Made This Wonderful Little Plugin?

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. 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. First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags. script.js – Part 1 Each tag is added to the itemsByTags object as an array. Great!

Hacking Google Analytics: Ideas, Tips and Tricks By Claudiu Murariu Web analytics is a powerful tool made accessible to all of us through awesome free software such as Google Analytics. These tools are designed to satisfy the general needs of every kind of website out there. That’s why website analytics tools, in general, are very good at offering a fundamental overview of traffic data of a site, but not so good when it comes to answering specific questions. To get specific questions answered, sometimes you have to work around limitations of your current software. As a proof of concept, I’ll present three examples/ideas for gathering more information in conjunction with Google Analytics. The purpose of this article is to present some starting points for your further exploration. Example 1: Where Do Users Come From? Google Analytics (and other web analytics tools) does a great job of telling you the last web page the user clicked on that got him/her to your website. Here is how you could do it better: Below is a sample of such a script.

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements. Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.

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

20 Powerful And Useful jQuery Tutorials Of Year 2011 A few days ago we created an awesome post featuring some of the great jQuery Animation tutorials which was appreaciated by our visitors those are in the professions of designing and developing. This article clearly shows that how flash is getting out-dated and JavaScript frameworks are taking place when someone want to create animations. This article has also shown that jQuery is becoming favorite for many web developers and designers out there and using this JavaScript framework for creating stylish animations for websites, web apps, stylish effects and much more. Being one of the most advanced, powerful and lightweight JavaScript framework – we here at WebTabLab like jQuery very much and always love to showcase various compilations related to jQuery such as best jQuery plugins of May 2011, great jQuery plugins of July 2011 and recently jQuery animation tutorials. Don’t forget to subscribe to our RSS-feed and follow us on Twitter for recent updates. 1) Rotating Image Slider

Responsive Navigation: Optimizing for Touch Across Devices As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution

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. 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"><! As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. The jQuery The init method takes single argument - the data source. The CSS

12 High Quality Business Card Design Tutorials « Business Card Gallery – CardDsgn.com A business card is an important tool any designer, it is a platform for the designer to showcase their style and creativity on a piece of material that a client can take away with them. The business card design is an extension of your branding representing you and your company, you should invest your time and money in creating a unique and well crafted business card design and not opt for a cheap alternative. A well designed and executed business card reflects your design skill and attention to branding, a potential client will use this as an insight into who you are and what your brand represents. If you are new and just about to start designing your own business cards, check out these high quality business card design tutorials that will give you a great insight into the process behind the creating a print ready business card. Design a Print Ready Business Card for Designers How To Create a Sophisticated Business Card Design Create a Print Ready Business Card Design in Illustrator

jPanelMenu | A jQuery Plugin for Awesome Navigation 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. 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. Brackets will remember the view layout for each project so switching to another project will show the layout you had chosen when the project was closed. Extensions Themes

Related: