The Simple Slideshow script was updated on Mar 12, 2011 to correct a variable name-space conflict when the code is used with the SiteSpinner script to control behaviors. My thanks to Terry Hutchens for uncovering this bug and his help in testing the patches.
This slideshow is derived from code provided by Karthik Viswanathan on the site Lateral Code. The slideshow is based on the jQuery framework and features timed advance with image fade-in & fade-out. I have adapted the code to use SiteSpinner objects.
Add the images for the slideshow to your work page, either individually or as a group. For each image object, open the Geometry Editor→Options tab and in the Code field, enter:
class="slideshow"
Each image to be included in the slideshow must have this entry.
Next, with the image still active, open the Object Editor→Transformations tab and check the box labeled "No CSS Positioning." This must be done for each image to be used in the slideshow.
Now create the temporary group containing the images for the slideshow and center them within the group both horizontally and vertically; this will make the images overlay each other. The images do not have to be the same size, but having them centered on top of each other will present a pleasing display. After aligning the images, turn the temporary group into a permanent group. Take note of the group’s object name as it will be needed in the code.
This completes the image preparation phase of the slideshow. The next step is to add the Javascript code. Open a code object, set the code placement to "Header" and enter:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>
</script>
<script type='text/javascript'>
// User options
var groupId = 'obj8'; // Object name of the image group
var duration = 3000; // How long the image is visible, in msec (1000 = 1 sec)
var fadeSpeed = 1000; // Time is takes to fade the image in and out (in msec)
// No need to alter code below this line.
groupId = '#O' + groupId;
var cur = null;
jQuery(document).ready(function($) {
$(groupId+' img:gt(0)').hide();
$(groupId+' img:last').addClass('last');
cur = $(groupId+' img:first');
setInterval("animate()", duration);
});
function animate() {
cur.fadeOut(fadeSpeed);
if (cur.hasClass('last'))
cur = jQuery(groupId+' img:first');
else
cur = cur.next();
cur.fadeIn(fadeSpeed);
}
</script>
There are 3 variables at the top of this code that you can modify.
| groupId | Set this to the object name of your group containing the images of your slideshow. |
| duration | This values sets the time each image stays visible. The value is expressed in msec where a values of 1000 = 1 sec. |
| fadeSpeed | This value set the time it takes to fade each image in and out. The value is expressed in msec where 1000 = 1 sec. |
Because this process removes the CSS positioning from the images, we need to add some CSS code back to the images so they stay within the group container. Open another code object, set the code placement to "in CSS", and enter:
.slideshow {
position: absolute;
top: 0;
left: 0;
}
In the demo, I added additional CSS code to place a border around each image as it is displayed. You can do something similar if you desire; the code I added to the above CSS is:
border: 5px ridge cornflowerblue; padding: 7px;
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites
Terry,
I think the updated code should fix the problems you are having. Thanks for detecting this problem and helping me fix it.
I got the page to publish to TCP Leasing.com but the images are now stack on each other.
I’m trying to put a slide show in my sidespinner created web site and am using your script. I’ve copied and pasted it in and now it publishes a blank page. What do I have wrong in this script. (this is in a code section / header)
==
var preImg = [];
function preload(arrayOfImages) {
$(arrayOfImages).each(function(index){
preImg[index] = new Image();
preImg[index].src = this;
});
}
// List of images to pre-load, specifying the folder and filenames.
preload([
'image/c:\TCP Images\Dump Truck.jpg',
'image/c:\TCP Images\Fork Lift.jpg',
'image/c:\TCP Images\Computer Server.jpg',
'image/c:\TCP Images\Office Furn.jpg'
]);
var groupId = ‘obj145; // Object name of the image group
var duration = 3000; // How long the image is visible, in msec (1000 = 1 sec)
var fadeSpeed = 1000; // Time is takes to fade the image in and out (in msec)
// No need to alter code below this line.
groupId = ‘#O’ + groupId;
var cur = null;
$(document).ready( function() {
$(‘.slideshow’).each(function(index) {
$(‘.slideshow’)[index] = preImg[index];
});
$(groupId+’ img:gt(0)’).hide();
$(groupId+’ img:last’).addClass(‘last’);
cur = $(groupId+’ img:first’);
});
function animate() {
cur.fadeOut(fadeSpeed);
if (cur.hasClass(‘last’))
cur = $(groupId+’ img:first’);
else
cur = cur.next();
cur.fadeIn(fadeSpeed);
}
$(function() {
setInterval(“animate()”, duration);
});
==
I also put in as “in CSS” code
.slideshow {
position: absolute;
top: 0;
left: 0;
}
What am I doing wrong?
Thank you
God bless you. I have been looking for a way to add slideshow to my website but I find it difficult because I have little or no programming knowledge or skill. Coming across your site and this tutorial has made my day.
I will come here again and again to get more training
Thanks once again for setting this site up for us
Thank you for the reply dated – December 23, 2010 at 8:59 am.
I have tried the code detailed but does not appear to preload jpgs. I have restored the code to the original and would appreciate you checking at your end.
Your assistance to resolve the “preload” problem will be appreciated.
The website with a slideshow on the Home page is : http://www.keygroup.co.za
Regards,
Mike.
You can pre-load your images; this forces the browser to download the images before the page is built for display. The modified script to do this is:
var preImg = [];
function preload(arrayOfImages) {
$(arrayOfImages).each(function(index){
preImg[index] = new Image();
preImg[index].src = this;
});
}
// List of images to pre-load, specifying the folder and filenames.
preload([
'image/1251624_92262595.jpg',
'image/1252815_71722735.jpg',
'image/1253048_71365269.jpg',
'image/1253676_21048861.jpg',
'image/1255228_93236274.jpg',
'image/1259797_41061344.jpg'
]);
var groupId = ‘obj8′; // Object name of the image group
var duration = 3000; // How long the image is visible, in msec (1000 = 1 sec)
var fadeSpeed = 1000; // Time is takes to fade the image in and out (in msec)
// No need to alter code below this line.
groupId = ‘#O’ + groupId;
var cur = null;
$(document).ready( function() {
$(‘.slideshow’).each(function(index) {
$(‘.slideshow’)[index] = preImg[index];
});
$(groupId+’ img:gt(0)’).hide();
$(groupId+’ img:last’).addClass(‘last’);
cur = $(groupId+’ img:first’);
});
function animate() {
cur.fadeOut(fadeSpeed);
if (cur.hasClass(‘last’))
cur = $(groupId+’ img:first’);
else
cur = cur.next();
cur.fadeIn(fadeSpeed);
}
$(function() {
setInterval(“animate()”, duration);
});
The important part of this code you must change to use pre-loading is:
preload([
'image/1251624_92262595.jpg',
'image/1252815_71722735.jpg',
'image/1253048_71365269.jpg',
'image/1253676_21048861.jpg',
'image/1255228_93236274.jpg',
'image/1259797_41061344.jpg'
]);
This array specifies the image location and file name of each image used in your slideshow. You will need to view the SiteSpinner generated HTML code to get the folder (it should be either image or geometry) and image filenames. You cannot use the View Code option within SIteSpinner because a bug always shows the image location as the geometry folder. The easiest way to do this is to publish to a local disk, view the code and make the necessary mods, then publish to your site. Be sure that no comma is used after the last filename.
Do not forget to change the groupId name to mach your group name.
Thank you for the slideshow script – it works perfectly.
One problem however – the down load from the server is erratic and on occasions the slideshow starts before the first image is completly loaded.
The images are all grouped – is there a way to show the first image for a longer time,say 8 seconds ( allowing the download to complete ) and then resume with the balance at 4 seconds ?
Your assistance will assist in overcoming erratic ADSL speeds.
Regards,
Mike.
Nevermind about the above post. It was my own stupidity. I forgot one of the codes. It is working fine now. Thanks
I have already made three slideshows that work perfectly so thank you very much for the great tutorial. But on my forth try when the slideshow comes to the last picture it stops and disappears instead of cycling back to the first picture. The only difference I see is that this slideshow has a large amount of pictures. Any help is appreciated. Thanks again
http://www.scenicbuckscounty.com/BucksCountyRealEstate/LivingInBucksCounty.html
Looking at your site, it appears you figured out how to center your images.
As for your border… I assume you mean the black border surrounding your logo image. If so, how you alter the color depends on how you added it. If you added it via the Geometry Editor, then go to the Options tab. I’m guessing you tried to use the eye-dropper to select the color but were unable to locate the desired green color on your work page. If this is the case, then you can click the Color button, and in the resulting color selection window, click the “Define Custom Colors >>” button. This will open up a larger color selection window and on the right side are 3 data entry fields for Red, Green and Blue color values. The green color of your links have values of Red=48, Green=171, and Blue=74.
Great tutorial! This came at a perfect time for me! I followed all your question…now I have just a few minor questions. Can you look at my page and tell me how I would get all of the pictures in my slideshow to center under my logo? And how could I change the code for the border to be that green color in my navigation bar if I picked it up using the eyedropper?
http://www.chick9clothing.com
If you’ve followed th instructions and still have problems, I would need to see your web page. You can publish a test page using the SiteSpinner Publisher window and selecting the iHostVM tab. This will let you publish a test page that will stay active for 24 hours. Or you can publish a test page to a private folder on your site.
When you have published your test page, use the Link menu button above and send me an e-mail with the URL so I can see if I can determine the problem.
Thank you for publishing this tutorial, I think it will work perfectly. However, I am having the same problem Joe was having. I have my images overlapped and grouped. I have the same obj name in my script as was assigned for the group. I went through all of the steps a few times and when I preview or publish to disk, I just get the top image without any transitions. Do you have any further suggestions?
If the images are not fading and cycling, the first thing to check is that you have the script installed correctly in the head section of your page. If that is correct, then check the line in the script that states:
var groupId = ‘obj8′; // Object name of the image group
Make sure you have changed the obj8 in that line to match the name of your grouped image object.
First of all, thanks for publishing this–it’s just what I was looking for.
However after three very careful attempts, I cannot get it to work. The 4 images I’m using instantly pile up one on top of the other with no fade and no cycling. If I delete the CSS positioning code object, they instantly stack in a vertical column.
Any idea what I’m doing wrong?
Thanks!
To create a temporary group, you need to select more than one object on the page. This can be done by using the lasso method or by using the mouse and keyboard.
If the objects are relatively close together and overlap, the lasso method is the easiest. Position your mouse cursor next to and above (but not on) the upper left-most object you want to group. Click and hold the left mouse button while dragging an outline (“lasso”) around all the objects you want to group. The objects must be completely enclosed inside the lassoed area; if any small piece of the object is outside the lasso, it will not be included. When you let go of the left mouse button, you will have a temporary group. If you click and drag on this lassoed area, you can move all the objects. This can be done to ensure you have all the desired objects selected. Do not click outside the lassoed area or you will remove the temporary group; all actions on a temporary group must be performed while the objects are grouped.
To use the mouse, click on the first object, then hold down the CTRL key and click on the next object. Continue holding the CTRL key and clicking additional objects to add them to the group. Let go of the CTRL key when you are done and you will have a temporary group. The same restrictions apply concerning clicking outside the group as stated above.
To convert a temporary group into a permanent group, use the Group button on the bottom toolbar. There are 2 icon buttons: Group and Ungroup (the names will show up when you hover your mouse over the buttons). The Ungroup button will revert the group into single objects.
The right-click Select options will form a temporary group, but does so for all objects starting at the point of the mouse cursor and extending in the direction specified by the Select option (left, right, top, bottom). This option is typically used when you need to move all the objects on your page in order to create space of a new object that should be to the top, left, right or bottom of the selected objects. This makes it easier than moving the objects one at a time.
“Now create the temporary group containing the images for the slideshow and center them within the group both horizontally and vertically; this will make the images overlay each other. The images do not have to be the same size, but having them centered on top of each other will present a pleasing display. After aligning the images, turn the temporary group into a permanent group. Take note of the group’s object name as it will be needed in the code.”
Hello! I’m new and trying to make a slideshow. I have made the slides, have them laying on top of each other, and have gotten to the step above. Would you please spell out how I make a temporary group? The only way I can find to select them is to move them all over the place, but it is still not grouping them all. I also tried selecting all below, but it didn’t work not to mention I have a background I don’t want selected.
Thanks so much!
Mere
Thank you, thank you, thank you! You just saved me $50 for the cost of a flash generation program. The instructions are excellent and it worked the very first time. For a hacker-head website designer (not my first expertise) like myself, your site is a godsend.
Best Wishes,
Phil
Thank you very much !!!
I apologize. I overlooked an error when I edited the page before publishing. The class statement should should be:
The page’s text has been corrected.
Dear Sir,
I would like to make automatic slideshow like yours above. I have followed yours instruction above and I did’t got correct result. Please could you tell me what I did wrong? This is web address of my slideshow : http://www.zeitman.com
Best regards,
Igor