[Sept 8, 2011] This tutorial is now out of date. The source code by the author has been updated since I wrote this post back in January. Please use this tutorial only as a guide or reference and not as an absolute until I update it or write a new one.
I recently had a online viewer ask a question about getting a particular jQuery slider working with iWeb. I figured this would be an excellent way to make a post about adding image sliders for our beloved iWeb platform.
NOTE: This tutorial will require you to get a little dirty as you will need to edit the HTML code and upload it to a hosting server, or MobileMe for it to work correctly in iWeb. Also make sure you read the license of using this code. Most of the time it is free to use personally but require a paid license for commercial use.
First thing you need to do is head over to Slidesjs and download the source file (also located above). The download package will include two folders, one named examples and one named source. Within the example folder you will find 5 different way of displaying the slider; Images with titles, Linking, Product, Simple & Standard. For my tutorial, I will focus on using the Standard display of the slider.
Before we even think about adding the slider to iWeb, we need to format it to our liking. As stated earlier, I’m going to work with the Standard Example. Within the Standard folder, there is a css, img & js folder and a index.html file. The css folder contents will give you the look of the slider. The image folder will include all of the slider buttons and your slide images, and the js folder is the engine.
Since I am only using the Standard folder, I went ahead and renamed it to “slider” and uploaded the folder to my hosting server. If you are using MobileMe, you can upload it to your idisk’s public folder.
NOTE: The use of the public folder is only an example that I am using. Another location on your idisk would be /idisk/web/sites/foldername. If you are using a dedicated hosting server then you should publish iWeb to a local folder and then FTP to the directory. This way it doesn’t overwrite your sitefolder. However, you can also do the same and place the extra stuff in a separate folder on the server. For example, my hosting server uses a /public_html/ folder for the website files. I then place a folder on the root / for my extra elements like the slider.
After you have uploaded the slider folder, open the index.html file. You can view it by using your favorite HTML editor application (Textedit, Coda, TextWrangler, etc.).
Dont be too discouraged. It looks like mumbo jumbo but we will go through this piece by piece. Lets take the first part of the code, the head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slides, A Slideshow Plugin for jQuery</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
<link rel="stylesheet" href="css/global.css">
</head>
The head section will consist of the doctype, link to the js files and the css file.
For each src=”" and href=”" you need to add the absolute URL so that iweb can find the file properly. Below is the example of where it would be located on MobileMe’s public folder. Remember, I changed the name of the standard folder to slider to make it easier for me. You of course can name it anything you want. What is in RED you will need to change to fit your needs.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slides, A Slideshow Plugin for jQuery</title> <script src="http://www.yourdomain.com/slider/js/jquery-1.4.4.min.js"></script> <script src="http://www.yourdomain.com/slider/js/slides.min.jquery.js"></script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'http://www.yourdomain.com/slider/img/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }); </script> <link rel="stylesheet" href="http://www.yourdomain.com/slider/css/global.css"> </head>
Next is the body. Place the absolute URL’s, just like above, to each of the images (<img src=”) and if the image links to a new page (<a href=”).
Again, change the Absolute URL path to the correct location to the correct server. Don’t want a title displayed, no problem, leave it blank. Ex: title=”" (make sure the quotes are there).
The dimensions of the images are the end of each line. You need to make sure EVERY image is the exact same size, in this case, 570×270.
To remove the background from the slider you will need to edit the CSS file. Find where it says “background” right after the body { and change the hex code to #transparent and remove everything else in the line up towards the ;. Should look like this:
body { font:normal 62.5%/1.5 Helvetica, Arial, sans-serif; letter-spacing:0; color:#434343; background:#transparent; padding:20px 0; position:relative; text-shadow:0 1px 0 rgba(255,255,255,.8); -webkit-font-smoothing: subpixel-antialiased; }
To edit the information that is displayed below the slider, go to the footer in the index.HTML file and find the <div id=”footer” and edit accordingly. If you do not wish to display it then you can remove the section.
Finally, once you have everything edited, you can place the index.html code into a HTML snippet inside iWeb. As long as the source files and images are placed on a server or MobileMe, you should be able to view the slider in iWeb prior to publishing.
If your images are displaying funky, as in different sizes. Make sure they are all the same and shown correctly in the HTML and CSS code. In this example the images are width:570px and height:270px. If nothing is working, go back to your code and double check the URL’s and make sure you didn’t miss any src=”…” All it takes is one keystroke mistake and nothing works.
I hope you find this tutorial works well for you, please leave a comment below if you have any questions and even examples of your completed slider.
There are a number of other things you can do to this slider. If you’re not using the default image sizes, 570×270, you need to make sure you also adjust it in the CSS. You can also remove the outer white frame, pagination buttons, the “new” ribbon” and left/right arrows by not referencing them in the HTML and/or CSS.
Good luck with your slider designs and integrations into iWeb! If you run into a road block, feel free to leave a comment below.
[Updated, April 5, 2011]
OK I am at a loss….I just can’t figure out what I am doing wrong. I have gone through the code so many times and I don’t see what I the issue is.
My slide show previews perfect at the destination link below
http://sselectric.com/Standard/
Now when I try and view it on my slideshow on my website it does not show up right at all. I tested the html code on test websites and it seems fine. see link below on my website ( i put the slideshow on the contact us page at the very bottom)
http://sselectric.com/Contact_Us.html
the only different that I noticed is that a new file him my public_html appeared cgi-bin and every since then the slideshow won’t show up. I don’t know if this matters or not but its all I see different.
any help you can provide is greatly appreciated.
thanks,
I see it working fine on my end going to the contact_us.html page. Did you figure it out?
I don’t get it. It would not work for me but a few hours later it started working fine. I don’t know if it is the transfer to my FTP that is taking so long or what. At least it is working now.
Thanks,
Slideshow shows on my website but not the images or the pagination. I can’t figure out why. any help is greatly appreciated.
http://www.sselectric.com/Standard/index.html
You’re missing the jQuery library script in the head section. Add the following between the global.css and slides.min.jquery.js
Should Look like the following:
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://sselectric.com/Standard/js/slides.min.jquery.js"></script>
ok that worked when i go directly to the index page
http://sselectric.com/Standard/index.html
but when viewing in iWeb the images do not show up or when i publish it to the page i want it to display on my website which is:
http://sselectric.com/test_page.html
I bet I’m missing something simple again. Thanks for you help let me know what I’m missing this time.
If I remember correctly, iWeb will not display the slider fully will looking at it inside the iWeb application. It will only work if published. Also I looked at the HTML snippet code you have on that test_page. and it’s missing that jquery library still and you’re using a http”S” on the slides.min.jquery when your domain does not have a SSL certificate, so it will not work. Remove the s on https for files hosted on your domain and place that library script I mentioned earlier (That one can keep the http”S”) as it’s hosted on google.
Thank you it worked at first but I must have done something wrong because its not working anymore. I have spent a lot of time trying to see where I went wrong. I published the entire site a few times and Im not sure if they new html and css are loading properly the code looks different when i click on the website slideshow than it does when i open it in coda.
Never mind It looks like the transfer from the FTP was just taking longer than normal. Its working great. Thanks so much for your help.
I’m glad to hear you got it worked out.
Hi, and thanks for an awesome tutorial!!
I´m having some trouble with mine. (I´m Norwegian, tried to read the other answers, but I didn´t figure it all out).
First of all, my photos are 700px wide and 467px high, so I tried to get the frame bigger too, but it´s kind of stuck. Do I have to transform it in photoshop and replace the frame picture in the img. folder?
Second, when I tried to paste the code from index into HTML snippet in iWeb, the same problem as Michael´s appeared; all of the photos are placed below each other, without the frame and the dots.
What can I do to solve these problems?
Thanks a lot!
Frida
The frame is an image that is a set size, therefore, if you’re using slide images that are larger or smaller than the default, you will need to adjust the frame image in an image editing application such as photoshop or pixelmator. Also you may have to adjust the css that affects the frame image.
In regards to the HTML snippet, you must use absolute URL’s for the js, css and image file paths. by default it uses relative paths such as
… etc. Change all of these that link to a JS, CSS or image file by adding the full path to the file.
etc. Note some may link to external sites such as the jQuery library that google hosts. You can leave those and not have to keep them on your domain.
I have iweb 3.0.4
I follow the steps in your web but I can’t do it . Instal slidesjs in to the iWeb.
There is any change for a new version of slidersjs.com????
I don’t have anything about html
Thanks,
José
The html comes from one of the example index files that is supplied with the Download. You take that contents, make your adjustments, and paste it into a HTML snippet.
writen script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script
Hello when in index.php file is written ()
than not working “Slimbox” display an animated box containing the image. It uses the mootools javascript library
how to fix it?
Hello, how to remove from code
play: 6000,
pause: 800,
hoverPause: true,
crossfade: true,
fadeSpeed: 2000,
fadeEasing: “easeOutQuad”,
effect: ‘fade’
Fade in work good but crossfade (fade in out on two pictures) not working…
When I write like this:
play: 6000,
pause: 800,
hoverPause: true,
fadeSpeed: 2000,
fadeEasing: “easeOutQuad”,
effect: ‘fade’
Then fade out goas to black fade in goes from black, everything ok, but I want that effect picture on picture…
Sorry but I can’t found in Defaults, maybe I have made a mistake?
Did you try using only crossfade and fade together and not including fadeeEasing?
Do you have a live link to your slider so I can see?
Just send to your email, check it… please
Thank You very much, how to make loger fade?
Thank You very much you a the best
can You help a little more
I have:
2
3
4
5
6
7
<a href="/slider/img/" title="2" rel="nofollow"></a>
<a href="/slider/img/" title="3" rel="nofollow"></a>
<a href="/slider/img/" title="4" rel="nofollow"></a>
<a href="/slider/img/" title="5" rel="nofollow"></a>
<a href="/slider/img/" title="6" rel="nofollow"></a>
<a href="/slider/img/" title="7" rel="nofollow"></a>
How to change that slide would not be linkble only shows pictures…
remove the “a href” tag from the “img” tag
Example:
The XXX should be changed to the dimensions of your images.
how to make loger crossfade?
Add to the following to the function script:
fadeSpeed: 350
Remember, if it’s the last item then no comma, if you’re placing it in the middle of the other functions then add the comma like the others have. Change the number to your desired time. I believe it’s in miliseconds.
Example:
2
3
4
5
6
7
8
9
10
$('.slides').slides({
preload: true,
play: 900,
pause: 800,
hoverPause: true,
fadeSpeed: 850,
effect: 'fade'
});
});
it seems time for fade in, but how to change fade in time?
I mean crossfade….
All of the available functions can be found on the slider website towards the bottom. Click the show example next to them to see what string to add.
http://slidesjs.com/