Dynamic Drive DHTML(dynamic html) & JavaScript code library. Preload Image (with progress bar) Script II. Preload Image (with progress bar) Script. Description: Use this script to not only preload any number of images before displaying them, but also, get a live update on it's progress through an update bar. Once the preloadiing is complete, the surfer is then directed to the page containing the preloaded images. Superbly useful and cool a creation! Demo: You just saw it in the previous page. (Note: For sake of not clogging up this page with images, the preloaded images in the demo are not displayed here). Click here to see it again. Directions: Step 1: Copy the entire code below, and save it as a separate HTML page (ie: preload.htm).
Remember, save it as a SEPARATE HTML file. Step 2: You'll also want to grab the following two gifs, and upload it along with the above html file. Bar.zip (zip file contains "black.gif" and "blue.gif") You are essentially done. Simple Image Panner and Zoomer. Oct 1st, 14': Script now works on mobile devices, zoom in/out controls can be any arbitrary HTML (instead of images specifically). Description: Simple Image Panner lets you partially clip and confine large images on your site to a smaller container to save space, with the hidden portion accessible by dragging -or panning- inside the image. The optional zoom feature lets the user zoom in and out of the image at the same time. This script is great for embedding large images on your page that users may also want to zoom in on to get a closer look. Demos (Drag inside image to see more.
Directions Step 1: Add the below code inside the <HEAD> section of the page: The above code references an .js external file plus two images which you should download below (right click, and select "Save As"): Step 2: Insert the below sample code into the BODY section of your page, which adds 1 pannable image: To make an image pannable, wrap the image inside a DIV with CSS class="pancontainer": You should: jQuery Smooth Div Scroll - smooth content scrolling jQuery plugin - Thomas Kahn. iPicture - Tooltip your images. Full Size Background Image jQuery Plugin: Redux. I just made a few changed to this plugin because it was acting a little weird. Tested it in Safari, Chrome and Firefox and it work perfectly now. All you need is an image that you want to have displayed as your background.
Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image. First comes the plugin code: There is only a little CSS needed for this one: If you want your background to stay fixed you can change the .fullBG CSS to this: For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. To call the jQuery function, add this to the bottom of your web page, right before the closing body tag: Once again, this plugin is pretty simple so no options are available. Related Easy Overlay Modal Window jQuery Plugin February 15, 2010 In "Downloads" Sliderota jQuery Plugin. Sticky Plugin. Thinking with Type | Home.