Best jQuery Fullscreen Plugins & Tutorials with Demo

    dragend JS : jQuery plugin for content swiping

    dragend JS : jQuery plugin for content swiping

    dragend JS is a swipe plugin for jQuery. It’s open source and uses hammer.js for observing multi-touch gestures.

    Features:

    • horizontal and vertical swiping
    • mobile and desktop ready
    • lightweight (1.55KB gzipped)
    • keyboard navigation
    • fullscreen or boxed
    • contend scribe
    • resize adjustment
    • overscroll

    Horizon Slide Navigation jQuery Plugin

    Horizon Slide Navigation jQuery Plugin

    Horizon Menu is a dedicated jQuery plugin where you can create custom menus that slide beautifully in your web browser. It’s reponsive, meaning mobile first. Mobile and tablet UI is fullscreen meaning it’s user-friendly and easy to navigate.

    Features:

    • IE8+ Compatible
    • Full browser support
    • Cross Compatible Device Ready
    • 120+ Fully Scalable Icons Font
    • 6 Themes with the ability to create your own
    • CSS3 animation support with IE fallback
    • Position your menu on the left or right side of your browser
    • As many menu items and submenus as you desire
    • Animation in and animation out fully supported
    • Fullscreen for media with window sizes
    • PC, Mobile and Tablet Touch Compatibility

    Fullscreen Layout with Page Transitions with jQuery & CSS3

    Fullscreen Layout with Page Transitions with jQuery & CSS3

    Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

    All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

    Background Slideshow with jQuery & CSS3

    Background Slideshow with jQuery & CSS3

    A simple fullscreen background slideshow in jquery and css3 with auto-play and controls to navigate and pause.

    jquery fitpic.js : Stretch images perfect

    jquery fitpic.js : Stretch images perfect

    Stretch images perfectly for fullscreen with jQuery fitpic js plugin.

    3D FlipBook – Responsive jQuery Plugin

    3D FlipBook - Responsive jQuery Plugin

    Responsive design – book resizes so it fits screen width or screen height depending on the layout, thumbnails are placed horizontally or vertically depending on the layout.

    Features:

    • optimized for mobile – look and feel of a native app on mobile with touch swipe, pinch zoom etc
    • easy to use and customize – create book and change book settings in the xml. Change style in the css
    • no Flash Player needed – works everywhere
    • choose between 2 types of flip animation – 2d or 3d flip animation customizable animation speed and transition type
    • show all pages – vertical or horizontal thumbnails depending on the layout, with scrollbar, optimized for mobile devices
    • advanced zooming support with mouse wheel zoom on desktop, pinch zoom on mobile, scrollbars when zoomed, touch swipe, click and drag
    • real fullscreen support – if fullscreen is not supported by the browser, the icon will not be shown in the menu, if fullscreen is supported it will expand the book in real full screen mode, not browser full screen
    • 2 sets of iocns included – light and dark

    Expanding Overlay Effect with CSS clip & jQuery

    Expanding Overlay Effect with CSS clip & jQuery

    A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. In this tutorial we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay.

    We want to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element. Clicking an element will create a cut-out effect, revealing another layer that will expand.

    jQuery HTML5 Fullscreen Slideshow

    jQuery HTML5 Fullscreen Slideshow

    This jQuery plugin lets you create fullscreen galleries where the slides are shown on the entire screen using the fullscreen APIs provided by Firefox 10+ and Chrome 15+ (and possibly Safari 5.1+).

    In all other browsers it falls back to displaying the slideshow in the entire viewport.

    iLightBox : jQuery Revolutionary Lightbox Plugin

    iLightBox : jQuery Revolutionary Lightbox Plugin

    iLightBox allows you to easily create the most beautiful overlay windows using the jQuery Javascript library.By combining support for a wide range of media with gorgeous skins and a user-friendly API, iLightBox aims to push the Lightbox concept as far as possible.

    Features:

    • Responsive design.
    • 6 ready to use skins.
    • Native browser fullscreen support.
    • Cross browser, supports Chrome, FireFox, Safari, Opera and IE7+
    • Device friendly, works in iPhone, iPad, Android Devices and Windows Phone.
    • Fully customizable, it’s possible to customize or redesign all parts of iLightBox.
    • Search engine optimized (SEO)
    • Youtube and Vimeo videos are supported.
    • Video auto recognition from sites.
    • Smart Content recognizer
    • Option to preview thumbnail over navigation.
    • Smart resource loader
    • Simple clean & valid markup
    • Developed with pure object oriented javascript
    • Multilanguage support
    • Keyboard support
    • Touch support
    • Mouse support: (Click, Wheel)

    jQuery Fullscreen Pageflip Layout

    jQuery Fullscreen Pageflip Layout

    A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.