background preloader

14 jQuery Plugins for Working with Images

14 jQuery Plugins for Working with Images
JavaScript frameworks have become very popular in the recent years by making the creation of dynamic effects much easier. Lightweight, used in the WordPress and Drupal core, jQuery is now one of the most used JavaScript libraries around. The following list of jQuery plugins will help you to improve the usability of your website or web applications by enhancing the display of your images. 1. s3 Slider s3 Slider Demonstration page. A simple way to add smooth image slideshows and showcases on your website. 2. jQuery Image Strip jQuery Image Strip Demonstration page. Nice little image viewer that uses fancy visual effects. 3. jQuery Thumbs Easy thumbnails creation with jQuery, jQuery Thumb dynamically wraps images and/or link images with a div. 4. jCrop jCrop Demonstration page. Quick and easy way to add image cropping functionality to your web application. 5. Image preview Demonstration page. Create image previews with this accessible and easy to implement script. 6. 7. jCarousel Lite 8. 9. 11. 12.

Apprendre et comprendre jQuery – 1/3 • Tutoriels jQuery Tutoriels jQuery Introduction rapide et en douceur à l’utilisation d’une des bibliothèques JS à la mode. Ou comment ajouter une couche d’interactions simplement et proprement à vos pages. NB : ce billet sera divisé en trois parties. Publié il y a déjà trop longtemps… Introduction jQuery est une bibliothèque JS développée principalement par John Resig. Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants. Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels. Les navigateurs supportés sont : Firefox 1.5+Internet Explorer 6+Safari 2.0.2+Opera 9+ La bibliothèque est utilisée par exemple sur des sites comme : DellGoogle CodeDiggNBCAmazonMozillaWordPressDrupalSPIPThe Zend Frameworketc Par ailleurs cette bibliothèque est compatible (elle n’entre pas en conflit) avec d’autres. Pré-requis Bases Appel <! Compression Une fonction etc.

10 Awesome Techniques and Examples of Animation with jQuery jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API. In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps. 1. Puffing Smoke Effect in jQuery This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Live Demo: Smoke Effect 2. Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. Live Demo: Animated Postcard 3. In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. Live Demo: Realistic Hover Effect 4. Live Demo: youlove.us (web page header) 5. 6. jQuery Blend 7. Live Demo: Scrolling Clouds 8. 9. 10.

Les meilleures galeries photo jQuery Image Flow Inspiré du cover flow d'apple. Gère les touches clavier et la molette. Space Gallery Passe à l'image suivante en cliquant dessus avec un fondu et agrandissement. Gallery View Nombreux paramètres, plusieurs affichages possibles : caroussel lighbox Easy Slider Une seule transition : glissement de l'image. Très simple, configurable par css Jquery Cycle De nombreuses transitions entre les photos, assez originales. SuperSized Plein écran JQZoom Zoom en déplaçant la souris CrossSlide Déplacements par zoom dans l'image ou kenburn + transitions par fondus HighSlide Ouvre la galerie dans une boite modale en cliquant sur une image. Très nombreux paramétrages : voir l'éditeur. Gère aussi toutes sortes de boite modale pour y afficher de l'innerHTML, ajax, iframe et flash. Photo Stack Affiche des catégories d'images, et quand on clique sur une ça ouvre le "paquet" d'images correspondante. Voir la démo Thumbnail-Scroller Pas de gestion d'agrandissement de la photo, il faut rajouter une floatbox. Voir la démo

How to Insert Raw HTML Code in Dreamweaver Guide to inserting cut-and-paste HTML code into your web page by Christopher Heng, thesitewizard.com From time to time, you may find that you need to insert a snippet of raw HTML code into your web page. For example, you may have come across some cut-and-paste HTML code from a site, such as that found on thesitewizard.com's Link To Us page, and want to insert it into your site. This tutorial takes you through the steps of inserting HTML code into your page. Steps to Inserting Cut-and-Paste HTML Code into Your Site Start up Dreamweaver and open the page that you want to edit. You can now save your page and upload it to your website. Copyright © 2007-2013 by Christopher Heng. Do you find this article useful? This article is copyrighted. It will appear on your page as: How to Insert Raw HTML Code in Dreamweaver Copyright © 2007-2014 by Christopher Heng.

Gallerie jQuery : 20 exemples vous facilitant la tâche Dans le web que nous connaissons aujourd’hui, les galleries dynamiques sont choses communes. Je dirais même qu’il s’agit d’un standard pour un site web d’entreprise désirant afficher leurs produits et services. Pour vous faire gagner un peu de temps dans vos recherches, voici 20 plugins de galeries jquery toutes prêtent à être utilisés pour votre prochain site web! P.S. J’aimerais beaucoup avoir votre avis sur la question posée à la fin de l’article. « Cette liste de galeries JQuery est parue initialement sur le site de webexpedition18.com ». Galerie JQuery Premium Le mot de la fin Une gallerie jquery semble être un «must» pour tous les sites web de compagnies depuis 2009. Rédigé par Louis-Philippe Dea de l’entreprise Guerilla Web

10 Impressive JavaScript Animation Frameworks Complex and slick JavaScript-based animation has been made easier with the emergence of frameworks and libraries that give developers the ability to create stunning and eye-grabbing animation and transition effects that make it easy these complex tasks. In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable you to create engaging and captivating user experiences. 1. $fx is a compact and lightweight JavaScript animation library which extends native JavaScript DOM methods with its own animation methods and functions. 2. jsAnim Created by web developer Kevin Dolan, jsAnim is a JavaScript animation framework for creating high-impact and slick animation sequences for web interfaces. 3. scripty2 scripty2 is a flexible and lightweight JavaScript animation framework for developing delicious visual effects. 5. Glimmer is a framework for easily creating interactive elements on your web pages. 6. 7. 8. 9. 10. Related content

Les meilleures solutions de diaporama flash et javascriptWebCssDesign Les meilleures solutions de diaporama flash et javascript Voici un récapitulatif des meilleures solutions de diaporama flash ou javascript gratuites jQuery, Mootools et Prototype Polaroid Gallery v.1.01 Polaroid Gallery est une galerie Flash open-source développé par Christopher Einarsrud. Active Slideshow Pro Avec Active Slideshow Pro vous pouvez créer des présentations mutil-médias gratuitement avec un maximum d’options. PicLens Slideshow Basé sur PicLens et RSS technology voici une solution intéressante de galerie web. Plogger Plogger est annoncé comme la nouvelle génération open-source de galerie photo. Shadowbox Shadowbox écrit en javascript et CSS est une solution pour présenter vos médias via le web. PhatFusion Slideshow Une solution pour vos transitions d’images. Galleriffic Galleriffic est inspiré par Mike Alsup’s Cycle plug-in, mais pensé pour de grosses quantités de photo. NoobSlide Fancybox Outil pour afficher des images, contenu html et multi-média Auto Generating Gallery Barack Slideshow

Flash Tile Transition Effect - Component Spin Toss Flick Flip Turn Over Strips Squares Rectangle Cube Description: Now you can create a transition which brakes up your image into spinning squares to create a new picture. The unique "Tile Transition Effect" can be used on Flash 8, CS3, CS4 or CS5 and is compatible with PC and Mac. Simply apply this component on your Flash Timeline or ActionScript to instantly create a .swf file, which can be used on all existing projects. Requirements: Video Tutorial - How to install the filter All our filters are based on Flash 8 / CS3 / CS4 / CS5 technology and are not downwardly compatible (and are therefore not working with Flash MX) Windows / Mac Flash 8 / Flash CS3 / Flash CS4 / Flash CS5 (free trial here) Adobe Extention Manager (free download here) When you publish your project using our filters the user will have to have at least the Flash 8 (AS2) or Flash 9 (AS3) plug-in installed.

Parallax Gallery In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images. View Demo Gallery Download Demo ZIP 1. First we need to make a tiled wood floor image. 2. Now make a new document, 2520 x 450px. 3. Make a rectangle shape just below the wall. 4. Select foreground color #f0ecd6 and make a rectangle shape above the floor layer. 5. Paste in your vector logo on the wall. 6. Now it is time to add in some furnitures in the scene. Couch's Shadow Make a new layer. Go to Edit > Free Transform (Cmd + T). 7. Make a new selection as shown with the Pen Tool. 8. Since these steps are very repetitive, I'm not going to further explain the details. 9. First, export the tiled background image. 10. 11. 12. 13. 14. 15. 16.

Create image transition with flying tiles in 3D - Cool Flash Effect Tutorials! Summary In this tutorial you will learn how to create a transition where parts of the image are flying in different directions in a 3D space and then are being put together again to create a different image. Besides other parameters you can control the size of the ’tiles’ and the duration of the transition. Here the final result: Requirements Flash CS3 or Flash CS4. Note: The screenshots in this tutorial are made in Flash CS3. Step 1 – Install the effect component Purchase the Flying Tile Transition Effect. Step 2 – Import Slideshow images Import two images [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”. Select the frist image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Select the second image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Step 3 – Set instance name of image Movieclip Step 4 – Apply effect Drag the component from the library onto the upper Movieclip. Download

Tooltipster - The jQuery Tooltip Plugin Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. Inside the file, declare your customized rules like this: For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes. Using AJAX to generate your tooltip content ⇑ Forcing or disabling sides ⇑ // ... is the same as ...' 1) Open triggers

Related: