5 Ways to Create Beautiful Slideshows of your Digital Pictures How many people out there have hundreds, if not thousands, of digital pictures stored on their computers accumulated over years that no one has ever seen? Me! Thankfully, I try to upload most of my pictures to free online photo sharing sites like Picasa and Flickr to at least get some return on the time I spent actually taking all of those pictures. However, I noticed that not too many of my friends nor my family really care to wade through hundreds of pictures, usually the same scene, just a different angle, because it’s boring. Here’s a list and a short feature run-down on some of my favorite photo slideshow apps: (1) Microsoft Photo Story 3 Even though lots of Microsoft software is buggy, they do occasionally come out with some really good software. Photo Story has lots of built in transitions that you can apply to your pictures, such as panning, zooming, flipping, wiping, etc. (2) Google Picasa (3) SmileBox Slideshows (4) PictureTrail (5) Slide
Using jQuery for Background Image Animations After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). Previous versions didn't support negative or decimal values properly. The HTML The Basic CSS The Image
Flash Slideshow Maker for Mac and Windows Navigation Menus: Trends and Examples | Design Showcase Advertisement Navigation is the most significant element in web design. Since web-layouts don’t have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn’t mess around with it. That’s why in most cases it’s where simple, intuitive and conventional solutions are usually the best option. This article presents recent trends, examples and innovative solutions for design of modern navigation menus. 1. The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site. This navigation scheme can be used not only for the horizontal navigation; it can can be applied to vertical navigation as well. 2. In any case over the last months a number of web-sites integrated Mac-styled-navigation in their web-sites. 3. 4. 5. 6.
Create a Slideshow in Adobe Fireworks CS4 Create a stunning slideshow gallery in Adobe Fireworks CS4 within a few minutes! Click on the image below to view the finished slideshow gallery. This tutorial will teach you how to create a beautiful slideshow gallery with transition effects, categories, captions and resizable images in Fireworks CS4. Let's get started right away! Once the images are imported, you can add captions to the images, description your gallery, album name and choose the kind of slideshow you want, I have chosen Player - Black (Flash Plugin not required). Click here to view the finished gallery. Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful! No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos.
How to Create Coda(tm) like Scrolling Window using Mootools -2 « N Rao Lakkakula’s Blog As I promised earlier , here is the code to do it. Look at the Final Output with some other Mootools Goodies at my website ( Assuming our html file is index.html and we have two folders names ‘js’ and ‘css’ to keep javascript and css files respectively. Step 1: Write HTML File ( I tookoff DOCTYPE and other header stuff to make it simple) index.html Step 2 : Write Javascript to do Scroll Effect js/site.js $(‘nav_about’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_about’); }); $(‘nav_projects’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_projects’); }); $(‘nav_portfolio’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_portfolio’); }); $(‘nav_blog’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_blog’); }); }); Step 3 : Stylesheets css/site.css css/h.css Thats It! css/v.css Like this:
JavaScript Kit- Images and music scripts 3-way image slideshow A versatile image slideshow that can be viewed in three ways- via a drop down menu, back/forward button, or automatically. Cool! BackBox Image Viewer BackBox is a new image gallery script which displays your pictures in a smooth and easy way. Divviewer Image Viewer Divviewer Image viewer lets you display images inline- when the user clicks on a link- scaled to fit the dimensions of the page if necessary. Drop Down Image Selector I A drop down combo box that allows surfers to choose among many images to be shown. Drop Down Image Selector II A drop down combo box that allows surfers to choose among many images to be shown. Dynamic PHP Picture Viewer This script combines PHP with JavaScript to let you easily display all pictures within a directory without having to input their file names into the script! Image Slideshow with description This nifty image slideshow script lets the user manually move back and forth between images, by clicking on the provided buttons.
Create HD slideshows with ProShow. Dreamweaver Widget Browser When the first version of Dreamweaver launched, the web had only begun to emerge as a viable platform, and its capabilities were a fraction of what they are today. Since then, the web platform has changed dramatically, and continues to evolve at a rapid pace. Designing for an evolving platform means that the tools one uses must also evolve. To best serve our customers, we are modernizing Dreamweaver to provide an all-in-one visual tooling environment for creating websites and mobile content. Our first task has been to streamline the User Interface, which we have begun by consolidating several workflows (such as font management) and simplifying parts of the application (such as the Document Tool Bar and the Insert Panel). The modernization efforts also include the introduction of the new CSS Designer panel in Dreamweaver CC. As we remove older features from Dreamweaver, we recognize that some customers may still depend on existing workflows/technologies. Best Regards, Tareq Aljaber
① FREE HTML Hit Counter - Web Counters - Visitor Counter ① Edge: June 2009 - Tutorial: Exporting CSS with Adobe Fireworks CS4 by John Ulliman and Tommi West Adobe Fireworks is a great tool for website design. The basic HTML export functionality has always been a huge time-saver because you can export your design as an HTML page with the image files inserted in a table layout in seconds. In the past, you may have used Fireworks to generate site files, but to implement a CSS style sheet that controls the site layout, you had to export the site files from Fireworks and then manually edit the HTML file in Adobe Dreamweaver to add the CSS styles. Fireworks CS4 includes a new CSS export feature that enables you to export page designs using CSS positioning. It's easy to use the new CSS export feature. If you've exported Fireworks pages as table-based HTML files, then you already know how to add slices. Exporting a Fireworks design CSS code uses a box model to define div tags, so it's only natural to use rectangles to define the areas that will create div tags in a Fireworks document. sample_file.png (ZIP, 522K) ‹ Back
The Ultimate Round-Up of Fireworks Tutorials and Resources - Smashing Magazine Advertisement Fireworks was originally created as an image editing and web design application by Macromedia, for quick web mock-ups, and optimizing images for the Web. It has since been transformed into a powerful environment for designing and prototyping applications that integrates easily with Dreamweaver, Flash and Photoshop &ndash making it, perhaps, the most powerful (that’s controversial) and versatile graphic editor. Fireworks has always had the reputation of being Adobe Photoshop’s little brother and a graphic editor for amateurs. The truth is, some Photoshop users have underappreciated the power of Fireworks, misunderstood its purpose, and seem to be reluctant to move their design workflow to Fireworks. In this post, you will learn how powerful Fireworks can be and you will see how easily it can be used for any design project, whether you are a graphic designer or web designer. Adobe Fireworks CS4 Homepage Download Adobe Fireworks CS4 Fireworks Basics and Overview Photo-Realistic
Adobe Fireworks Tutorial - Creating Sparkle This tutorial is for beginners using Adobe Fireworks. It’s an easy technique that can add finishing touches to your design. 1.) 2.) 3.) 4.) 5.) If you have a problem dragging the points to the center, you can always use the autoshape properties panel. 6.) You will notice that there are 4 handles in the gradient, 2 on top and 2 on the bottom. If you wish to change the color of the sparkle , you need to change the color of the left fill handle with the orange circle. 7.) 8.) Here are some final tips : Create more sparkle shapes , make different sizes with different star points ( stick with 4 – 5 ) Put the sparkles close to the edges or tip of your text / object. If the sparkle is too bright, you can always adjust its opacity in the layers panel. And thats it, if you have any questions feel free to comment below.