Web Studio Next
Web Studio Next Super Simple Slideshow
Let's do one real quick and then I'll show you how to mess around with it
If you are not familiar with web studio refer to the instruction page
Super Simple Slideshow that doesn't use Flash
Sometimes you just need a slideshow with no bells and whistles
This doesn't do anything but show pictures it doesn't pause or have any controls it just cycles through the pictures, but sometimes that's all you need.
One thing you can do though is add text and that will stay as text so search engines will see it. You can get creative in web studio by adding any kind of object.
I have been trying to figure out a way to do simple slideshows in Web Studio that didn't need the built in Flash
so they would work across all browsers like iPhone and iPad but I also wanted it to be just as easy to use.
This script uses this brillantly simple idea all that was needed was to re-code it so it matches the divisions WS uses.
Now we can add text and pictures on the page then "group" it all together inside Web Studio.
You can use Un-group then move them around and add more pictures then Group them again
you just need to remember to name the ID again after you change them around
Each group of pictures on the same page have to use a different ID name
The group below uses the ID name B, I put two in the code for you.
Go to the HTML TAB in Insert Page HTML select Inside Head
Drag a box around all of them to select them, and go to the CREATE TAB in "Group" select Group. Once grouped double click on them and in the ID number text box erase what's there and type A That's all there is to it, Preview to see it work
Put a couple of pictures on the page and line them up the way you want. The image at the back shows first. You can use page layout to bring them forward or backward.
This one I inserted some graphics on the page and used center horizontal and vertical from page layout.
You can use different size images and how ever the images are laid out on the page when you group them, that's the position they stay in when played in the slideshow.
You can put links on the pictures, alt tags, titles or anything else you want for search engines
like you always do using web studio so it's pretty easy to use.
This is some text I wrote in web studio
Spiderman
Superman
Sometimes you might want to add a description below your images, and maybe a heading.
The Heading you could just use text made in web studio and group it with pictures. This one I made an image for it so I could use a special font. I'll show you how you can use a bit of HTML to add the descriptions below the images so they use real text.
Adding more than two groups of images to the page
I only put in two in the code A and B if you add more use that naming sequence the next one would be "C". I put green notes <!-- that look like this --> in the HEAD where you can copy paste more. Each group need it's own unique ID on a page.
Don't use A1 and A2 though, web studio freaks out and freezes if it thinks you are going to put in the same ID name even if you're not and ID's can't start with numbers like 1A that's a coding rule.
Change the speed of the slideshow
If you look in the HEAD code for [+] you'll see 3000 and a note. If you make that a higher number it will wait longer to change the images lower would be faster.
$5.00 to help keep this site up and running would be very much appreciated
This one I grouped together and then put a shape from Draw behind them as a background.
You can see I also grouped some text in with the pictures and I put a link on the "next" logo. You can do all of that with Web Studio. The text objects are on their own layer though so they show like the images.
I also put a css border on the superman image so you can add HTML as well. I'm sure you will come up with some neat ideas of using this for your websites.
Show us what you come up with on the forum!
Adding a description below the image
That puts a paragraph below the picture, with the text center aligned.
To change the size of the text change font:12px to font:14px
To change the text color from color:white; to color:black; or
you could use a hex color like color:#800000; for maroon.
You have to preview the page to see this text.
Select the image go to the HTML tab and in Insert Object HTML use After Object
1937 Coronation Class Steam Locomotive
1935 GG1 Electric Locomotive
Requires a minimum update to build 22
To be able to re-name the ID you need to use build 22 or above.
