Spectacular image galleries made simple. Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page Advertisement a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including examples. Do you see the full-sized background image on this page? Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site. Demos Where can I get it? If you are interested in learning more about Backstretch, it's recommended that you view the project on GitHub. Support Basic support is offered through Github's issues tracker. If you are in need of immediate support, Email Support is available for $17. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. Intelligist Share and demo code in-page, usingGitHub gists.
Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file. To locally download these files, right-click the link and select "Save as..." from the menu. The jQuery 1.x line had major changes as of jQuery 1.9.0. Download the compressed, production jQuery 1.12.3 Download the uncompressed, development jQuery 1.12.3 Download the map file for jQuery 1.12.3 jQuery 1.12.3 release notes jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. Download the compressed, production jQuery 2.2.3 Download the uncompressed, development jQuery 2.2.3 Download the map file for jQuery 2.2.3 jQuery 2.2.3 release notes jQuery is registered as a package with Bower. Download the compressed, production jQuery Migrate 1.3.0
Demo | jQuery.popeye 2.1 | an inline lightbox alternative with slideshow x Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The second popeye-box has the following user-defined options: direction: 'left' - open to the left. caption: false - do not display captions (even though the images have alt tags with text). navigation: 'permanent' - the navigation is always visible. The navigation stays fixed to the right of the image. View HTML code used in this example Donate
jquery-tubular - a jQuery plugin for full-size YouTube video backgrounds demo: seanmccambridge.com/tubular Usage is straightforward and requires JavaScript on the client's browser to work. Tubular is a jQuery plugin and therefore relies on jQuery. You will need to know the YouTube ID of the video you want to use as well as the container DIV of your web page. Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine. 1. jQuery must appear BEFORE tubular in your HTML document. 2. 3. That's it! Please note that tubular will change the structure of your CSS.
Sliding Image Panels with CSS3 Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos
Using jQuery for Background Image Animations After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). The HTML The Basic CSS Notice that a hover state has been declared. The Image Figure 1: The Swipe The Demo
Circle Navigation Effect with CSS3 Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. View demo Download source The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License. The Markup For this little CSS3 effect we will have a navigation structure that looks like the following: <div class="cn-nav"><a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url(.. In our demo we will make a jQuery template out of this and dynamically add the thumbnails for the previous and next images of the slider. The CSS Let’s see now, how to add the style for this navigation. The span element, which will contain the arrows as a background image will have an initial height and width of 46 pixel. And that’s it!
jQuery Backstretch by Scott Robbin Advertisement a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including examples. Do you see the full-sized background image on this page? In a nutshell, that's what Backstretch does. Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site. Demos Where can I get it? If you are interested in learning more about Backstretch, it's recommended that you view the project on GitHub. Support Basic support is offered through Github's issues tracker. If you are in need of immediate support, Email Support is available for $17. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. Intelligist Share and demo code in-page, usingGitHub gists.
SIDEWAYS – jQuery fullscreen image gallery Last updated on Nov 20, 2010 Originally published on September 12, 2010 by malihu, under Templates & web apps. A simple, yet elegant fullscreen image gallery created with the jQuery library and CSS. The gallery features fullscreen images in various modes and custom scrollbars. SIDEWAYS image gallery is made by implementation of some previous scripts and tutorials posted on this blog and some (minor) CSS3. I’ve included the complete gallery code on page 2 of this post. Changelog▾ This work is released under the MIT License. Donating helps greatly in developing and updating free software and running this blog
85 Awesome jQuery Slider Plugins Slider are very useful and increasingly popular web page elements used for highlighting important content. By using a jQuery slider plugin, one can create amazing HTML slider effects with fancy animations of content elements like text and images. jQuery takes care of the difficult aspects like browser support and typically when using jQuery plugins it can be done with very little coding effort. This is the reason why jQuery sliders and jQuery banner slideshow scripts have become very popular on most types of websites. They are are typically used to feature multiple products, news, video etc. without taking up a lot of space on the pages. In fact, we see sliders on most news and business websites today and they are placed on the most important location over the fold on the front page. The jQuery library has undoubtedly made the life of web developers easier and made it possible for non-experts to do fancy stuff themselves. Advertisement Article Index Camera Slider – MORE INFO