Web Studio Slideshow
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Slideshow & Image Gallery Add Ons

 Web Studio Next is not affiliated with Web Studio this an independent website that relies on donations for appreciation of
the time put into the tutorials if they were of any help building your website Thank-you for your support

Web Studio Next Slideshows

Slideshows for the level you are comfortable with using Web Studio
Compatible with iOS devices and search engine friendly

SLIDESHOW & GALLERY IMAGES
Typically slideshows use images that are the same size but there are a few that don't, I'll note those for you.
When you use large images optimize them for download you can read more about image use in the CSS section
I try to optimize my image download size to under 40KB for lower band internet connections

Ideal for beginners or for setting up a simple slideshow quickly
Best choice for the classic fade in fade out effect
• No attachments No download
• Only a couple of lines of code - extremely small and fast loading
• Linkable - Put a link on the image with web studio before you group
• You can use different size pictures (or text)
• Combine it with other ADD ON's for unique effects

Copy / Paste the code
group the images
name the ID

Ideal for beginners copy paste versions of the basic slideshows
• Attach the script and group the pictures for the slideshow
• That includes the arrow links when hovered
• The slideshow will also pause when hovered then resume
• Plus the pager is automatically made for you

Attach the script
Copy / Paste the code
group the images
name the ID

Ideal for novices to build your own custom slideshows
• Attach the script and group the pictures for the basic slideshow
• That includes the arrow links when hovered
• Then you can build the slideshow you want with the options
• Add captions a pager or additional controls and put them where you like
• The options are made so you copy/paste a line into an html object
• The captions will use the web studio alternate graphic text

Attach the script
Copy / Paste the code
group the images
name the ID
Add the options

From novice to users comfortable with web studio
• Click thumbnail gallery with optional captions
• Fading thumbnail gallery that makes itself using group
• Sliding thumbnail gallery that makes itself using group
• Blinds thumbnail gallery that makes itself using group
• Fading show with loading bar and numbered that makes itself using group
• Slideshow with loading bar and numbered that makes itself using group
• Blinds show with loading bar and numbered that makes itself using group
• Down slider with loading bar and numbered that makes itself using group

Attach the script
Copy / Paste the code
group or attach images
some with linking &
minor code changes

Users comfortable with web studio and coding changes
• WSscroll - a two way scrolling slideshow with captions
• WSpanzoom - pans as it zooms the "Ken Burns" effect
• WSanimated - CSS3 transitions and transforms


• More to come when I find the extra time

Attach the script
Copy / Paste the code
group or attach images
some linking
coding changes
and customizing

Other Slideshow links on Web Studio Next

Where to find other slideshows

• Fades images in then stretches them to fit the full screen with a mobile option
• A few lines of code that is efficient but you need to watch the image download size

• A slideshow gallery meant to go on a dedicated page to show full screen images
• 6 different effect choices re-written for web studio but it is a bit advanced

• You'll find five slideshows in the screen wide section designed for banners
• Significantly tiny efficient fast loading slideshows that use very little code

Thank-you

Web Studio Next - Add On Slideshow & Image Galleries - For use in Web Studio 5

aaaaaaaaaaaaiii