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.

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 $("").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

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

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 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. You can also use the enablejsapi parameter to enable the player to be controlled via the IFrame Player API. 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. You can use any of the following methods to embed a YouTube player in your application and specify player parameters. 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. The following list explains these options:

Concevoir un portfolio responsive avec filtre via Isotope.js sous WordPress Un thème premium qui se respecte comporte des modèles de pages de type portfolio, très utile pour mettre en valeur vos créations artistiques notamment. La plupart d’entre eux sont dotés d’un système de filtre basé sur les termes d’une taxonomie spécialement créée pour l’occasion et le redimensionnement de la fenêtre réajuste automatiquement les éléments avec une transition en CSS3. Ce tutoriel va vous apprendre comment mettre en place un tel système sous WordPress et sans avoir recours à un plugin. Avant-propos Ce tutoriel est réservé à des utilisateurs avertis. Résultat final / démonstration Une démonstration est disponible sur mon site Neticpro et une variante sur le site de ddesign. Les sites ayant subi une refonte, seules les captures d’écran ci-dessous illustrent le propos. Étape n°1 – Création du custom post type ‘Portfolio’ Il nous faut dans un premier temps générer un type de contenu sur-mesure qui sera entièrement dédié à la saisie des éléments du portfolio. <? Pour aller plus loin

Web UI Components for Developers Home | BookedUp