Cómo pensar y crear un slider en jQuery Hola amigos, voy a intentar explicar lo mejor que pueda y razonando todas las partes (y ni que decir tiene que desde mis conocimientos que no lucen por ser completos precisamente), cómo crear un slider en jQuery que sea capaz de generar varios sliders en pantalla y que todos funcionen de manera independiente. También intentaré razonar la estructuración inicial, el por qué de los cálculos y demás...No puedo prometer ni prometo, que el slider no se pueda hacer mejor ni más completo que como yo lo planteo en este tutorial (pues es obvio que sí se puede), por lo que si sabes cómo mejorarlo y estás dispuesto a compartirlo con los demás, estaría encantado de recibir tus consejos. Y si son factibles y no son una chapuza, como muchas de las que se me ocurren a mí, los incluiré encantado nombrándote en el tuto e indicando tu aportación.Empecemos por ver qué es lo que queremos conseguir y cómo estructurarlo: 1. Vamos a visualizar cualquiera de los 2 sliders que encontraréis aquí. 2. Código : 3.
Redactor WYSIWYG html editor by James Fenimore Cooper Winding its way among countless islands, and imbedded in mountains, the "holy lake" extended a dozen leagues still further to the south. With the high plain that there interposed itself to the further passage of the water, commenced a portage of as many miles, which conducted the adventurer to the banks of the Hudson, at a point where, with the usual obstructions of the rapids, or rifts, as they were then termed in the language of the country, the river became navigable to the tide. "Come," he said, with a good-humored smile; "the buck that will take to the water must be headed, and not followed." The route taken by Hawkeye lay across those sandy plains, relived by occasional valleys and swells of land, which had been traversed by their party on the morning of the same day, with the baffled Magua for their guide. The sun had now fallen low toward the distant mountains; and as their journey lay through the interminable forest, the heat was no longer oppressive.
PHPExcel Timeline Portfolio Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests. The HTML Timeline comes with a light colored theme by default. First, let's look at the basic layout of the page: index.html <! In the head section, we have the plugin's stylesheet - timeline.css, and styles.css, which will hold our customizations. When we call the plugin, it will search for a div on your page with the ID of timeline. <div class="container main" id="timeline"><div class="feature slider" style="overflow-y: hidden;"><div class="slider-container-mask slider-container slider-item-container"><! As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. The jQuery The init method takes single argument - the data source. The CSS
Jeditable - Edit In Place Plugin For jQuery Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. How does in place editing work? Normal flow is this. Basic usage While reading you might also want to check live demo. <div class="edit" id="div_1">Dolor</div><div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. There is only one mandatory parameter. Code above does several things: Elements with class edit become editable. Not bad for oneliner, huh? Elements with class edit_area will use textarea as input. These two examples cover most of needs you usually have. What is sent to server? When submitting change following data will be POST:ed to server: id=elements_id&value=user_edited_content In some cases you might want to change default parameter names. you need to add two parameters: But wait! Demo
Diapo | a free jQuery slideshow Hi there. First of all excuse me for my bad english, second excuse me if you will find some bugs in Diapo slideshow. Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation). Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing ( jQuery HoverIntent ( jQuery Mobile ( but not all the plugins). Diapo slideshow is the first jQuery plugin I develop from scratch and I distribute for free, so please be lenient
BlocksIt.js - Dynamic Grid Layout jQuery Plugin Look Inside BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you. How It Works BlocksIt.js will re-position the selected elements using CSS absolute position property. Start the new block from left to right, andPlace the new block under shortest block. How to use 1. It should works well with jQuery 1.7.1 (haven’t tested for lower version). 2.) 3.) #Note: If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status. Configuration .BlocksIt( [Options] ) Options Few options available:
Ajax Image Upload without Refreshing Page using Jquery. Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar's image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos. Download Script Live Demo Javascript Code$("#photoimg").live('change',function(){})- photoimg is the ID name of INPUT FILE tag and $('#imageform').ajaxForm() - imageform is the ID name of FORM. index.php Contains simple PHP and HTML code. <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> Upload image <input type="file" name="photoimg" id="photoimg" /></form> Sample database design for Users. Users Contains user details username, password, email, profile_image and profile_image_small etc. ajaximage.php Contains PHP code. <? db.php Database configuration file, modify username, password, database and base url values.
jQuery Timelinr Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum. Icon designed by Sebastián Cortés Changelog: 0.9.6: check if required elements exist on page before initializing timelinr0.9.54: Bugfix: large timelines now gets centered.0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved.0.9.52: Problem with arrows nav and 2 or less issues now fixed.0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Última versión estable: 0.9.6 Configuración: O customízalos: Cambios:
10 Steps to Getting Started with jQuery Mobile jQuery Mobile | 10 Easy Steps to Getting Started! Demo As smartphones and tablets are become popular and can be found all over the place today, the need for mobile page is rises greatly. A mobile web page provides completely different web experience than a normal web page in term of resolution size, web page load time and mobile browsers. However, we can easily create a mobile page with help of jQuery Mobile framework. jQuery Mobile is a touch-optimized web framework for smartphones and tablets built on jQuery core. Also be sure to let me know in the comments if I have missed out on anything. 1. It’s pretty easy to get started with jQuery Mobile. The data- attributes are HTML5 attributes which are used throughout jQuery Mobile to transform the markup into mobile widget. 2. You can create many ‘pages’ within a single HTML document by stacking multiple divs with a data-role of “page”. 3. In some cases, not all content are static and you might need to have some dynamic content. 4. 5. 6. 7.
Ajax Upload - ZURB Playground - ZURB.com You're going to need jQuery and the AJAX Upload jQuery plugin. Link them up, make sure jQuery is loaded first. Here is the JavaScript we're going to add in its entirety. You can also see it if you view the source of this page. Now let's break it down. First we attach the the AjaxUpload behavior to our file form element. new AjaxUpload('imageUpload', { Next we specify where we want to post the AJAX upload to. action: $('form#newHotnessForm').attr('action'), Set the name of the file form element that will be posted to your server. Add a class to your preview div to indicate that the image is uploading. onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, When the image has been uploaded we need to do two things. We avoid this problem by waiting to remove the loading class until after the preview image's load event fires. onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); });
40+ Useful and Fresh jQuery Plugins Nov 29 2011 Plugins are there to assist you and let you perform the desired action in a more convenient and speedy manner. Therefore, today we decided to come up with an exciting and interesting collection of 40+ fresh and cool jQuery plugins for our reader’s convenience. This compilation is targeted at the designers and developers who want to create amazingly interactive websites that are attractive and accessible to the broadest assortment of browsers. With these plugins, the overall experience that users come away from your sites with will be both thrilling and enjoyable. Keep in mind that navigation, galleries and slideshows, are hot points for a site to shine (or at least for the jQuery in a site to shine). The Plugins MotionCAPTCHA ( Demo | Download ) MotionCAPTCHA is a jQuery CAPTCHA plugin. Smart Validate ( Demo | Download ) It is a jQuery credit card validation plugin that makes credit card format validation an easy chore. ZOOMIFY, EXPLORE YOR IMAGES!