background preloader

Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis

Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis
As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens. I was working on a project and needed an image lightbox that solves these problems. Features Ascetic. As I mentioned earlier, the plugin produces a single-element markup by default: No default CSS. position value can be anything, but in most cases fixed will produce what’s expected. JavaScript Source: imagelightbox.js (uncompressed; 9kb) and imagelightbox.min.js (minified; 4kb). The plugin takes the advantage of jQuery. ImageLightbox() accepts some options. It also has a couple of method functions, as mentioned: Examples Plugin without demo is a rhyme without reason. Demo P.S. Changelog Related:  Galerie Img

Camera | a free jQuery slideshow by Pixedelic A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption. HTML elements You can also put some HTML elements into your slides. <div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div> An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. Videos To include a video into your slideshow you must put an iframe into one of your slides: As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio). The "data-" attributes or a particular alignment for one slide only:

Simple Drop-In Modals Simple Modals The simple modal style we show here is very basic, but effective. The modal itself is set to opacity: 0.0 and when we click the button it changes to opacity: 1.0. A -webkit-transition: opacity 0.25s linear on the shown state causes the fade in effect, so we only need javascript to change the state of the modal — not the animation. Show the Simple Modal Fancy Modal This modal is shown and hidden in a similar manner. We use a few properties like transforms, transitions and box shadows. Show the Fancy Modal Copyright ZURB, freely available for distribution under the MIT license. This is a simple modal. It appears based on one line of javascript and can be dismissed using the OK button below. This is a fancier modal. Using generated gradients, text-shadows, and box-shadows we can create this drop-down modal. Product Design Training from the Experts at ZURB This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. Your ZURB ID explained Fonts that go together Responsive Image Gallery with Thumbnail Carousel A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We'll also add the possibility to navigate with the keyboard. View demo Download source Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad. The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. So, let’s do it! The Markup Let’s take a look at the style.

Conditional Lightbox Lightboxes don’t work for small screens. Here’s Jordan Moore on the subject: The purpose of a lightbox is to display a larger image corresponding to the selected thumbnail version while keeping the user on the same page instead of linking directly to a page showing the full image. Again, there are an abundance of solutions for solving this problem but the vast majority of existing patterns translate poorly to smaller displays. In fact you may argue that a lightbox shouldn’t even exist on small displays. — Jordan Moore I wholeheartedly agree with Jordan, yet I’m seeing more and more lightboxes on responsive sites. So what’s a better alternative to lightboxes for small screens? In his article Why Separate Mobile & Desktop Web Pages? Interactions that happen through modal dialogs or across modules/panels on large screens often make more sense as separate pages on smaller screens. By default, simply link to the raw image file or chunk of content. View Demo

Examples | jQuery Touch Optimized Sliders "R"Us Fire the plugin on a (set of) thumbnail(s) and it will create a lightbox popup with a slider for the enlarged images. <script type="text/javascript"> $(document).ready(function() { $("#example a").tosrus(); }); </script> Image gallery By default, the plugin will automatically create a gallery from the targeted anchors: $("#example a").tosrus(); Single images This lightbox has been set up to create a new popup for each anchor: Full screen images This lightbox has been set up so that the images fill up the entire screen, it also has captions and a thumbnail pagination, but no buttons: Inline buttons and fade effect This lightbox will fade instead of slide and has buttons on the inside of each image. Other types of content Besides images, you can also scroll through YouTube and Vimeo video's and any other type of HTML: Purr attack in viverra nullam, jump on the table puking chase the red dot biting run fluffy fur tempus et. $("#example").tosrus();

Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast

All Around - jQuery Content Slider / Carousel All Around content slider is a multi-purpose all-in-one slider solution for your website. It supports both images and video. It can be an easy and effective solution for your shop related website as you can display your products in an interesting and eye appealing way. All Around carousel is perfect for almost all type of websites and it can fit perfectly into all business areas. You can display your company services, personal portfolio, sport products, health services, real-estate properties, vacation/holiday offers, cooking recipes and much much more. You can adjust the content slider the way you need it or you can choose one of our 6 prepared layouts. You can find WordPress version of this plugin here: All Around – Wordpress Content Slider. All Around content slider features Update (05.04.2014) – 1.1.4 version Fixed an minor javascript bug Update (22.03.2014) – 1.1.3 version Fixed two minor javascript bugs Update (06.03.2014) – 1.1.2 version A minor bug fixed A few minor bugs fixed Support

Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) Advertisement A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. In this article, I’ll share the techniques I employed in creating this plugin, techniques that can make your lightbox much faster and easier to use, whatever the device being used. 1. We might not be able to speed up the loading time of an image with this lightbox plugin, but we can create the perception of a faster loading time. Progressive Loading of Images The majority of lightbox plugins will fully preload an image before displaying it. You can speed this up even more by progressively rendering the JPEG. CSS-Based Resizing The CSS-only approach makes this lightbox extremely flexible. Vertically centering an element with unknown dimensions is probably the most horrifying topic in CSS layout. Centering an HTML block Here are the criteria: Centering an image with a caption 2. <! 3.

LightGallery, une lightbox responsive avec galerie d’images LightGallery est un plugin jQuery qui permet de mettre en place une lightbox opaque, fullscreen et responsive avec galerie d’images et vidéos intégrée, le tout compatible sur tablette et smartphone. Lightbox et galerie photo intégrée La particularité de cette lightbox est d’embarquer une galerie photo / vidéo avec support tactile (« swipe ») pour les appareils mobiles : une fois la photo ouverte dans la lightbox, on retrouve des flêches de navigation pour passer d’une slide à l’autre et un bouton pour afficher la liste des miniatures. Des transitions CSS sont utilisées avec un fallback JS pour les anciens navigateurs. LightGallery propose une interface similaire au plugin Swipebox mais avec une configuration beaucoup plus complète. Les paramètres disponibles permettent de définir le type et la vitesse d’animation (fade ou slide), la durée entre chaque slide, ou encore l’activation du mode slideshow automatique. Comment utiliser lightGallery ?