Projects tagged ‘javascript’ and ‘png’

Eyes Of Lynx is a web-based application written in PHP/Javascript that allows you to share, examine and manage your photo albums. It's designed to be fast, intuitive and very powerful. Its key ... [More] features include an original and innovative interface, zoom and rotation tools, auto rotate of photos when an orientation is provided in EXIF data (informations stored by digital cameras), cache of images in a smaller/intermediate size to increase display and loading speeds, a thumbnail's image navigation, ... [Less]

Lightweight image gallery written in PHP. Won't narc you out.

DescriptionA web-based photo tagger that can be easily integrated into your website or with any gratis-photo-viewer installation.

PNGHackThis project is dedicated to distribute open-source javascript libraries, making it easier to integrate PNG files into documents that should work with versions of Internet Explorer 5.5 and 6. ... [More] PNGHack 1.0.1 isn't actually dedicated to CSS background properties ! Release 1.0.1 review 20092009-11-02 : Google Pages is migrating to Google Sites, so we were asked to host the spacer.gif on Google Code :) Release 1.0.12008-06-18 : This update fixes the browser check issue on Firefox 3 and introduces a new "scope" feature ! More about this release on the PNGHack Blog DownloadPNGHack 1.0.1 or take a look at the source Some examples of PNGHack 1.0.1 DocumentationCheck out the PNGHack 1.0.1 documentation. You can also download the documentation. CommunityFeel free to join our discussion group or to submit issues. [Less]

This code will iterate with each element with the class 'ie-fix-opacity' and add an IE filter, replacing the background-image for the filter of that image. DependenciesThis project depends on ... [More] prototype.js (http://prototype.conio.net/) and Browser Detect Lite (http://www.dithered.com/javascript/browser_detect/index.html), but you can try any other library you prefer. [Less]

Table of ContentsIssues Solution Change Log Download Tested Browsers How it Works Code Examples Method Definitions List of Parameters Parameter Definitions IssuesIE versions 5.5 - 6.x has issues ... [More] handling PNG alpha channels. The solution that is available from Microsoft is to use the AlphaImageLoader filter. Now IE 7 is suppose to support this natively (IE 7 Checklist and IE7 Transparent PNG Implementation), but still uses filters to handle the alpha channel. I feel that the filter solutions are still not very clean since Microsoft’s implementation is something that is not supported in the other major browsers like Firefox and Safari. Here is a quote from a msdn blog post “IE7 Transparent PNG Implementation” that lists “a couple of limitations worth mentioning”: Certain filters may not behave as expected due to how filters are implemented. Filters work by rendering the content of their attached element to their work surface and then modifying that surface before compositing it to the output surface. Because of this, alpha blending of a transparent PNG with non-binary transparency may lead to unexpected results. For example, applying a BasicImage filter with an opacity attribute to an IMG element with a transparent PNG will fill the work surface with the transparent PNG alpha alpha blended with a solid gray background. The work surface will then be alpha blended at the specified opacity level with whatever is under the filter. MSTime does not support non-binary transparency for PNGs. This is because MSTime doesn't understand anything other than binary index-based alpha. Because of this, transparent PNGs in MSTime elements are expected to continue to render as they do in previous versions of IE. Adobe’s Flash Player version 6,0,65,0 (win) or 6,0,67,0 (mac) and higher have support for movies with a transparent background (Adobe TechNote). Now the only problem with this is that Safari is not supported. Here is a list of supported browser: IE 3 or higher (win) IE 5.1 AND 5.2 (mac) Netscape 7.0 Mozilla 1.0 or higher AOL CompuServe I was working on a redesign of a high profile website and found that there were certain pages that we would have to build out in HTML vs all Flash. In order to keep the same consistent look and feel across all pages we needed to be able to display designs that relied heavily on transparencies. The problem that we face is that we could use Flash to display all of our images, which would leave the Safari users with a bad web experience, or we could use good old tags and add filter support for IE. The problem with the latter is that heavy use of filters and doing image swaps can result in an unreliable experience for IE users. SolutionHere are the two outstanding issues we face: IE lacks native support for alpha channels in PNGs without the use of filters. Safari lacks support for Flash movies with transparent background. With the release of Flash Player 8 we received the ability to use loadMovie() to load a SWF, progressive JPEG, unanimated GIF, or PNG file into a MovieClip in Flash Player while the original SWF file is playing. What we do is combine the best aspects of the two issues listed above with Flash Player 8’s ability to dynamically load PNGs. This leaves us with a cross-browser solution where we use Flash Player to display transparent PNGs in IE and use native support for alpha channels in PNGs for all other browsers. We take an empty SWF with a bit of Actionscript in order to handle the dynamic loading of the PNG and add functionality to handle image swaps, button states, and onpress handlers. This solution gives us the freedom to have one image asset for Safari, Firefox, and, IE with a single line of Javascript code. PNGPong consists of 1 Javascript file and 1 swf file and utilizes Geoff Stearns SWFObject to write the object/embed tags for Flash. Change Log PNGPong version 1.0.0 Download PNGPong is released under the MIT License. Download PNGPong 1.0.0 (Zip file) - contains pngpong.js, pngpong.swf, swfobject.js (v1.4.4), and an example page showing how to use it. Just unzip the contents to the root of your website, and surf to http://yourdomain.com/pngpong/example/ Download PNGPong 1.0.0 Source Files (Zip file) - contains pngpong.fla, pngpong.js, pngpong.swf, and swfobject.js (v1.4.4) Tested BrowsersIE 6.x (win) IE 7.x (win) Firefox 1.5 - 2.x (win) Firefox 1.5 - 2.x (mac x86, PPC) Safari 2.x (mac x86, PPC) Camino 1.x (mac x86, PPC) How it WorksPNGPong is a simple script to use. You can view an example here. All you have to do is unzip pngpong into the root of your webserver and include /pngpong/swfobject.js and /pngpong/pngpong.js into the of your HTML file. Create an empty and give it a unique id. Then apply some CSS to specify the width and height of your image. Now all you have to do is call the function to embed your image. pngpong.serve("foo", "image1.png"); The image will be embeded into the with id="foo". PNGPong will do a browser check and go along 1 of 2 paths: If IE is detected the script will use SWFObject to embed pngpong.swf into the div and pass it a few variables so that the swf knows the location of the PNG file. Once pngpong.swf has loaded it will use a MovieClipLoader object to dynamically load in the PNG into a dynamically crated empty MovieClip. If you are serving up a button it will create the necessary rollover, rollout, and onpress events for swapping graphics, changing window location or calling a Javascript function. If any other browser is detected the script will embed an tag into the div. The image will have it’s visibility set to hidden and an onload event handler will be attached to the image. Once the onload event is complete the script will set the visibility to visible. Javascript functions will be attached to the image to handle rollover, rollout, and onmousedown events for swapping graphics, changing window location or calling a Javascript function. PNGPong will handle preloading of images and can also swap images using a simple Javascript API. The script will handle the communication in the background to the appropriate assets and is transparent to the developer and user. Code ExamplesThere are 5 basic Javascript functions with 8 total (when adding custom alt attributes): pngpong.preloadImage(inImage); pngpong.swapImage(inIdName, inImage); pngpong.serve(inIdName, InImage); pngpong.serveButtonUrl(inIdName, inImageOut, inImageOver, inUrl); pngpong.serveButtonJs(inIdName, inImageOut, inImageOver, inFunction, inParams);Extended APIs to add custom alt tags to images: pngpong.alt.serve(inIdName, inAltName, InImage); pngpong.alt.serveButtonUrl(inIdName, inAltName, inImageOut, inImageOver, inUrl); pngpong.alt.serveButtonJs(inIdName, inAltName, inImageOut, inImageOver, inFunction, inParams);Method Definitionspngpong.preloadImage() Adds an image to an array of objects to facilitate image preloading. pngpong.swapImage() Swaps an image with another image. pngpong.serve() Embeds a static image into a div. pngpong.serveButtonUrl() Embeds an image into a div with rollover, rollout, and onmousedown states. When pressed it will redirect the current web-page to the specified url. pngpong.serveButtonJs() Embeds an image into a div with rollover, rollout, and onmousedown states. When pressed it will evoke a Javascript function. pngpong.alt.serve() Extends pngpong.serve() with the ability to add a custom alt tag. pngpong.alt.serveButtonUrl() Extends pngpong.serveButtonUrl() with the ability to add a custom alt tag. pngpong.alt.serveButtonJs() Extends pngpong.serveButtonJs() with the ability to add a custom alt tag. List of ParametersinIdName inAltName inImage inImageOut inImageOver inFunction inParams inUrl Parameter DefinitionsinIdName Type:String Desc:Id name of the div that will contain the new image. inAltName Type:String Desc:Alternate text that you would like to use for the image alt attribute. inImage Type:String Desc:Location of the image to be inserted. Notes:Types include: .png, .jpg, .gif. For IE only .png files will be converted to a swf. inImageOut Type:String Desc:Location of the image to be inserted that represents the out state of your button. Notes:Types include: .png, .jpg, .gif. For IE only .png files will be converted to a swf. inImageOver Type:String Desc:Location of the image to be inserted that represents the over state of your button. Notes:Types include: .png, .jpg, .gif. For IE only .png files will be converted to a swf. inFunction Type:String Desc:The name of the javascript function you wish to attach to the onmousedown event of the button. Notes:Function calls should inlude the parenthesis fooBar(). inParams Type:String Desc:The parameters you would like to pass to the javascript function during the onmousedown event of the button. Notes:You can pass multiple string parameters separated by commas param1, param2, param3. inUrl Type:String Desc:The url location used for redirection that you wish attach to the onmousedown event of the button. [Less]

Soemthing to add....

What it is?A lightweight package of javascript, css and pngs for creating dropshadows on html objects. How do I use it?First link to the javascript file: Next, call our function. In practice you ... [More] may want to bundle this into a generic onload handler, but for now, let's use a simple window.onload function: window.onload=function(){ dropshadow(my_tag,my_class,my_inner_class); } We also need to customise our function call a little, to tell it: What tags to target, What css classes to target, What classes to apply to the inside of our shadowed objects Like so: dropshadow("div","dropme","dropped");Which will search our html for any div tags with class="dropme", apply the shadow and leave it with class="dropped", as used in this demonstration page (view source). We can also use multiple calls: dropshadow("div","dropme","dropped"); dropshadow("div","alsodropme","alsodropped");As used in this second demonstration page (view source). What does it do?Firstly it wraps your tags in a set of nested divs. For example, this: window.onload=function(){ dropshadow("div","dropme","dropped"); } ...will transform this: Lorem ipsum... ...into this: Lorem ipsum... It then applies some css and semi transparent background images to all those ds-xx classes to produce a smooth ten pixel drop shadow. IssuesIE6IE6 doesn't handle transparent PNGs, try: http://www.twinhelix.com/css/iepngfix/ [Less]

About this Script:This is a javascript solution to using transparent PNG images in Internet Explorer 6 (IE6). If you are using Prototype, you just need to copy and paste a few lines of code into your ... [More] site to be able to use this. Download the zip or do an svn export, and take a look at the readme. There are several examples with explanations. Dependent on "Prototype JavaScript framework (1.6.0)":http://www.prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate Works on img elements and on background images of elements PNG's can be used as backgrounds. However, image tiling will not work Safe to use - You don't have to make an exception or write separate code for IE6 Background PNG's used in :hover's might need another application of the method [Less]