public marks

PUBLIC MARKS from camel with tags javascript & images

October 2008

Facelift Image Replacement | About FLIR Image Replacement

by 2 others
Tired of Arial and Times New Roman? I know I am. Up until now you had a choice of using sIFR, or painstakingly designing image headers and adding them to your web page manually. Of course, this gets a little old, especially after deciding to change color schemes two or three times. Enter facelift. It is the best of both worlds! Create your website as you would normally, and then install the two lines of code that facelift requires. The elements that you want to style will be replaced with an image representation of that text styled with your custom font. And since the text is retrieved directly from the page, you don't have to worry about updating any images when text changes — it is all done automatically!

July 2008

PrettyPhoto - a jQuery Lightbox clone

by 3 others, 1 comment
PrettyPhoto - a jQuery Lightbox clone July 13th, 2008 in Javascript | Tags: Gallery, jQuery | No Responses A new version 2.1 of prettyPhoto released. Descriptions/Titles now support html code. Usage is simple, just include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS file and add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature. If you want the images to be a part of a gallery, just add the gallery name in braket. Tested and working in Firefox 2-3 (Mac/PC), Safari 3.1.1 (Mac), IE 6-7. Uncompressed version - script: 16kb / CSS: 8kb, compressed size - script: 8kb / CSS: 3.8kb.

March 2008

FancyBox - jQuery image zooming plugin

by 10 others
Inspired by many other lightbox-like tools, now made kinda different image zooming script for those who want something fresh. It`s powered by great javascript library - jQuery, tested with IE6, IE7, Firefox Features: * Automatically scales large images to fit in window * Adds a nice drop shadow under the full-size image * Image sets to group related images and navigate through them

FancyZoom 1.1 ou comment faire un effet de zoom sur vos images liées [mini-tuto] | blog de calii.fr

Certaines images d’illustration, (je ne parle pas ici d’images utilisées pour le design d’un site qui elles sont appelées dans la feuille de style) sont liées, c’est à dire qu’en cliquant dessus on change de page pour afficher l’image dans sa taille réelle. De base ce n’est pas très recherché, l’image se charge dans une nouvelle page vous obligeant à revenir en arrière pour continuer la visite du site internet. Depuis quelques temps il existe divers moyens de rendre l’affichage des images liées plus sympathique, ainsi on peut utiliser plusieurs techniques de lightbox mais aussi et ça c’est déja plus récent, utiliser un effet de zoom. Donc en gros on affiche une miniature de l’image plus ou moins petite, qui lors du click va zoomer pour afficher l’image dans sa taille réelle. Une des solutions existantes pour arriver à ce résultat est d’utiliser FancyZoom 1.1 proposé par Cabel Maxfield Sasser sur son blog.

galleria - Google Code

by 3 others (via)
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.

September 2007

Eat Your Greens: Adding a magnifier to images with CSS and JavaScript

by 4 others (via)
Voici un script qui vour permettra de mettre en place un zoom sur un image. Perosnnelement, je trouve le résultat très sympa et pratique. Il faut évidament ne pas oublier d'avoir l'image en deux résolutions, une basse pour la miniature et une plus élevée pour le zoom.

June 2007

Highslide JS - JavaScript thumbnail viewer

by 27 others
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: * No plugins like Flash or Java required. * Popup blockers are no problem. The images expand within the active browser window. * Single click. After expanding the image, the user can scroll further down or leave the page without restoring the image. * The approach uses two separate images. No heavy full-size image packed into thumbnail display size! The full-size image is loaded in the background either on page load or when the user clicks the thumb. You specify this option in the script's settings. * Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself. This fallback is able to cope with most exceptions and incompatibilities.

SwfIR : En attendant les CSS3 ? - Babylon-Design - Tutoriaux WebDesign : Adobe Photoshop, XHTML/CSS, Accessibilité

by 1 other (via)
SwfIR n'est pas une marque de produits nettoyant révolutionnaire mais une methode pour appliquer des styles originaux à vos images en passant par un JavaScript et un peu de Flash. Vous connaissiez sIFR, découvrez SwfIR… SwfIR est un script non intrusif, c'est-à-dire qu'outre le fait que vous devez linker un fichier JavaScript à votre page, vous n'avez pas besoin de modifier le code XHTML de votre page. Ce script permet à vos images d'appliquer des styles inexistants en CSS2 : ombres portées, bordures arrondies, coins arrondis, rotation. Le principe est que SwfIR va remplacer les images que vous aurez spécifiées par un Flash qui intégrera ces images pour leur appliquer ces styles.

April 2007

Highslide JS - JavaScript thumbnail viewer

by 11 others
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:

camel's TAGS related to tag javascript

accessibility +   ajax +   animation +   application +   applications +   blog +   box +   browser +   cache +   code +   compress +   compression +   corner +   corners +   crop +   css +   debug +   design +   dev +   developement +   dhtml +   dock +   documentation +   dom +   drag-drop +   editor +   effect +   effects +   extension +   file +   firebug +   firefox +   flash +   form +   formulaire +   framework +   gallery +   gestion +   google +   highlight +   history +   html +   http +   ie +   ie6 +   image +   images +   interface +   java +   jQuery +   js +   lang:en +   librairie +   lightbox +   list +   menu +   navigation +   online +   optimize +   packer +   performance +   php +   php5 +   picture +   player +   plugin +   png +   programming +   prototype +   script +   scroll +   scrollbar +   scroller +   search +   security +   server +   site +   software +   standards +   svg +   swfobject +   table +   tips +   tools +   tree +   tutorial +   tutoriel +   upload +   validation +   web +   web-design +   web2.0 +   webdesign +   webdev +   windows +   wysiwyg +   xhtml +   xml +   xmlhttprequest +   zoom +