Pop Up effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

The Pop Up Windows Category

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Add ons and tutorials for pop up windows using Web Studio 5

A new window will pop up from a thumbnail or link and center to the screen
The pop up uses an easing effect when opening/closing for most then darkens the background so the window stands out
These are written from an existing effect that was adapted for use in web studio

• Pop up window links with descriptions, (this page).

• You add your images using the built in thumbnail maker and add your captions
• The effect was written to adapt those images then add the lightbox window effect
• It will center the pop up windows and re-size them if needed to fit the browser screen
• It groups all the images so you can use the arrows to navigate through them
• It darkens the background so they stand out and uses an easing effect as they open

• This one also converts the built in thumbnails with the same effects
• This also adds a preview on hover that is 30% of the large image before you click

• This is the one I prefer because you have control over the images
• There is extra steps with this one like you need to make the images you use
• 100% control of the look and quality of the images and their names
• The large images will automatically be re-sized to fit into the browsers screen
• You can use the mousewheel or arrows to cycle through the images
• The images are linked together for galleries but I can show you how to turn that off
• The background fades and darkens as the large image come into focus
• An elastic effect as the images grow larger
• Captions and titles for each image for search engine optimization
• Fast loading - only the thumbnails load until the larger image is called

• This "lightbox" effect uses a division you make with coding in an HTML Object
• This one is for those of you that know basic html and css for the content
• That means you can make anything you want to fit into the pop up window
• This is done with a hidden division so this method is search engine friendly
• The division pops up centers to the screen and use similar effects as above
• Since the division is on the page like the images above you can use "preview page"

• This "lightbox" effect uses a web studio page, so no need to do any HTML coding
• You make the web studio page to fit into the window using a built in "draw shape"
• This is done with an iFrame so search engines consider these a seperate page
• The page pops up and will center to the screen using similar effects as above
• These will require you to use "preview website" to see them work inside web studio

• This "lightbox" effect uses an inline Frame to put another website on your page
• Refer to a page on another site (or your own site) without loosing your visitor

• Lightbox effect for YouTube & Vimeo Videos
• This is about the pop up window the videos you still have to make, upload & link to

Other Image links on Web Studio Next

Where to find other image effects

• You'll find a lot of things can be done with images using CSS
• With the newer version CSS3 even some of the jQuery effects can be accomplished

• Making images fit the entire computer screen
• Some css tutorials some add ons and even slideshows or a dedicated image gallery

• Making images go to the width of the computer screen for banners
• Also screen wide slideshows specifically written with fast loading code for banners

• The main image effects page with links and descriptions
• This is where you'll find most of the image effects on web studio next

• Making images slideshows in Web Studio from easy to advanced
• Most of these were written so they'll make themselves with as little effort as possible


Web Studio Next - Pop Up Windows - For use in Web Studio 5