background preloader

Fancy jQuery lightbox alternative

Fancy jQuery lightbox alternative
1. First, make sure you are using valid DOCTYPE This is required for FancyBox to look and function correctly. 2. Loading jQuery from CDN (Content Delivery Network) is recommended Optional - Add transitions as jQuery by default supports only "swing" and "linear" Optional - Enable "mouse-wheel" to navigate throught gallery items 3. Don`t forget to change background image paths if CSS file is not in the same directory. Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more). 4. Images Inline content <a id="inline" href="#data">This shows content of element who has id="data"</a><div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iframe <a href=" Ajax <a href=" takes content using ajax</a> Optional - Use the title attribute for anchors if you want to show a caption 5. Sample examples: Related:  Sliders and fancyboxintégration

JQuery Cycle Plugin - Intermediate Demos (Part 2) Rather than have transitions occur on a timer you can choose to have transitions occur in response to a click event. The prev and next options are used to identify the elements which should be the triggers for prev/next transitions. When used in conjuction with timeout = 0 the effect is a manual slideshow. The values for prev and next can be a DOM element or any valid jQuery selection string. You can combine an automatic slideshow (timeout-based) with manual controls by using a non-zero timeout value. The next slideshow (below, left) is setup to perform auto-transitions every 3 seconds, pause-on-hover, and perform a manual advance when the image is clicked. The pager option is used for creating full navigation controls. In addition, the navigation element for the active slide is given the class activeSlide so that it can be styled uniquely. The pager in the example above is styled like this: If you need to stop a running slideshow you can pass the string 'stop' to the cycle method.

Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing. First things first, download jQuery. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

Easy Ajax with jQuery This article was written in 2011 and remains one of our most popular posts. If you’re keen to learn more about jQuery, you may find this recent article on jQuery 1.9 of great interest. Ajax is changing web applications, giving them a responsiveness that’s unheard of beyond the desktop. But behind all the hype, there’s not much to Ajax — HTML, JavaScript, and XML are nothing new, and in this tutorial, I’ll show you how to simplify the process of adding Ajax to your application even further with the help of jQuery. What’s Ajax? You’ve probably heard about Ajax before, or at least used an Ajax-based application — Gmail, for instance. Unfortunately, in-depth tutorials on practical ways to enter the world of Ajax are few and far between. What’s jQuery? jQuery is another mature JavaScript library that offers some features that the others do not. Assumed Knowledge To complete this tutorial, you’ll need some basic JavaScript knowledge. jQuery 101 $("div.foo").append("Hello World!"). Easy!

Liste des codes - Affichage d'images en lightbox Présentation L'affichage d'images ou la mise en place de galleries photos est un sujet récurrent dans la création de nombreux site. Beaucoup de solutions existent, spécialement avec l'utilisation de lightbox, et l'une d'elle est l'utilisation de l'outil "fancybox" basé sur du javascript, spécifiquement jquery et permettant de rapidement mettre en place des effets d'affichage d'images professionnels et intuitifs. Le principe est d'afficher des vignettes des images dans la page courante et de faire référence à l'image réelle par le mécanisme javascript de fancybox qui propose différentes animations facilement paramétrables. Nous allons voir plus en détail comment mettre en place ce mécanisme, mais voici tout d'abord un premier exemple illustrant cette description. cliquez sur la vignette pour afficher l'image : Implémentation de FancyBox Voici les quatre étapes à suivre pour effectuer l'implémentation de fancybox : Cette étape correspond à l'implémentation javascript des éléments. Rendu :

jQuery Smooth Touch Scroll - the smooth touch scrolling jQuery plugin - Thomas Kahn fancyBox - Fancy jQuery Lightbox Alternative What's new Version 2 is completely rewritten with new features and updated graphics. Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (shadows, round corners) Updated plugin options (not compatible with previous versions) Now licensed under Creative Commons Attribution-NonCommercial 3.0 Instructions Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. Attach fancyBox when the document is loaded. <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); });</script> Examples You can also go straight into action and open a standalone version of demo and view its source code. Helpers

Create a Simple Infinite Carousel with jQuery Introduction Finally, I have times for this carousel script. I always think that it's hard to figure it out, but thanks to a tutorial - Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. Alright, We have a main wrapper called carousel and inside it, we have two sections - buttons and slides. <div id="carousel"><div id="buttons"><a href="#" id="prev">prev</a><a href="#" id="next">next</a><div class="clear"></div></div><div class="clear"></div><div id="slides"><ul><li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li><li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li><li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li></ul><div class="clear"></div></div></div> CSS is a little bit complicated. 3. There are two new methods we are about to learn. After - Insert content after each of the matched elements.Before - Insert content before each of the matched elements. Conclusion

Drag Drop Shopping Cart Using JQuery There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by javascript. The drag and drop feature used from JQuery UI, this will be used on the item list and on the cart item list to see all the items on the cart by dragging the cart horizontally. View Demo | Download Source The Html Like I said there is no server side scripting, so this code just a hardcoded item list, this example use 10 items, but the code below shows only two to make it simple. </b>*} < label class = "title" >T-Shirt 1</ label > < label class = "price" >$ 20</ label > < label class = "title" >T-Shirt 2</ label > < label class = "price" >$ 24</ label > < span >Shopping Cart</ span > < a href = "" id = "btn_next" >></ a > < a href = "" id = "btn_clear" >Clear Cart</ a > The JQuery The CSS

fancyBox - Fancy jQuery Lightbox Alternative Fancybox - Fancy jQuery lightbox alternative Javascript Image Slider - No jQuery Basic Features Hardware-accelerated Javascript ( non jQuery, non flash ) Lightweight (16kb) HTML captions 17 transition effects Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload Customizable starting slide (specific index, or random) Supported by all major browsers IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+ Create/update image slider dynamically Price: Free (including commercial)or $20.00 if advanced features are used, see below. Advanced Features Lazy loading images:Each image will be preloaded in background only when it is about to be displayed (during the pause time of its previous image). The image slider can include unlimited number of images. Thumbnails support (such as demo 2, demo 3, demo 5) Video or audio Support (demo 6: Video Slider, Play HTML5 Video or Audio in slider) License is required when using the advanced features: Download the demos, copy the demo's code and paste it into your page. <! JavaScript License

Download the latest version of the jQuery.carouFredSel-plugin --- CarouFredSel 2.5.2 Easy Carousels in jQuery & WordPress Carousels in WordPress just got a thousand times better. carouFredSel takes the awesome power of the carouFredSel jQuery plugin and integrates it into WordPress so you can create unlimited carousels in your WordPress site without touching any code. Simply upload your images, drag and drop re-order them, add some captions and you’re good to go. Simple or Advanced Configuration carouFredSel comes with three configurations modes, “Basic” mode where you can choose some of our built in layout styles and keep things uber simple, “Advanced” mode or “Super User” mode where you can literally edit the configuration like you would when using the jQuery plugin for ultimate control and flexibility. 500px, Flickr & Instagram Integration Usual Awesomeness Built In Not only do you get the amazing features above, but you get all the other awesome features that we bake in to our WordPress plugins to make the experience as ninja as possible. Free to Use & Abuse

jQuery Table Manipulation: Part 1 | Packt Publishing Technical &amp; IT Book Store Exclusive offer: get 50% off this eBook here jQuery 1.4 Reference Guide — Save 50% This book and eBook is a comprehensive exploration of the popular JavaScript library by Jonathan Chaffer Karl Swedberg | August 2007 | AJAX Open Source Web Development In this article by Karl Swedberg and Jonathan Chaffer, we will use an online bookstore as our model website, but the techniques we cook up can be applied to a wide variety of other sites as well, from weblogs to portfolios, from market-facing business sites to corporate intranets. In this article, we will use jQuery to apply techniques for increasing the readability, usability, and visual appeal of tables, though we are not dealing with tables used for layout and design. But this is not the place for an extended discussion on the proper role of tables. Some of the techniques we apply to tables in this article can be found in plug‑ins such as Christian Bach's Table Sorter. One of the most common tasks performed with tabular data is sorting.

YouTube Embedded Players and Player Parameters - YouTube Overview This document explains how to embed a YouTube player in your application and also defines the parameters that are available in the YouTube embedded player. By appending parameters to the IFrame URL, you can customize the playback experience in your application. For example, you can automatically play videos using the autoplay parameter or cause a video to play repeatedly using the loop parameter. This page currently defines all parameters supported in any YouTube embedded player. Note: Embedded players must have a viewport that is at least 200px by 200px. Embed a YouTube player You can use any of the following methods to embed a YouTube player in your application and specify player parameters. Embed a player using an <iframe> tag Define an <iframe> tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. Embed a player using the IFrame Player API

Related: