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:
Typ.io: 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
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
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 ?