How to add a jQuery Slider to iWeb

[updated 8/9/12] – There is also a new jQuery slider called, “Flexslider” by WooThemes that allows more options and easier integration. You can see the tutorial here for integrating with iWeb.

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.

Download Source View Our Demo

Step 1: Download the Source

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.

Step 2: Time to get dirty; Editing the Code

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 (img) 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 “sliderjs” and uploaded the folder to my hosting server.

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. The head section will consist of the doctype,  link to the js files and the css file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Slides, A Slideshow Plugin for jQuery</title>
	<meta name="robots" content="noindex,nofollow">

	<!-- CSS Style Sheet -->
	<link rel="stylesheet" href="http://www.your_domain.com/slides/css/global.css">

	<!-- JS Files -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://www.your_domain.com/slides/js/jquery.easing.1.3.js"></script>
	<script src="http://www.your_domain.com/slides/js/slides.min.jquery.js"></script>

	<!-- Load the slider functions -->
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
</head>

For each src=”” and href=”” you need to add the absolute URL so that iweb can find the file properly. If looking on what I have above, change http://www.your_domain.com/ to the your own website URL, for example: https://www.bnecreative.com/

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=”). If do not want to have the image act as a clickable link then you can remove the <a> tags and only have img tags. See my example below. I left one as a link and the rest as non links.

<body>
	<div id="container">
		<div id="example">
			<img src="http://www.your_domain.com/slides/img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">

					<!-- Images go here - Make sure each image is the exact same size and it matches what you have in the global.css file -->

					<!-- this one is a link to my home page.-->
					<a href="https://www.bnecreative.com/"><img src="http://www.your_domain.com/slides/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>

					<!-- the following are only images that are not clickable -->
					<img src="http://www.your_domain.com/slides/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
					<img src="http://www.your_domain.com/slides/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
					<img src="http://www.your_domain.com/slides/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
					<img src="http://www.your_domain.com/slides/img/slide-5.jpg" width="570" height="270" alt="Slide 5">
					<img src="http://www.your_domain.com/slides/img/slide-6.jpg" width="570" height="270" alt="Slide 6">
					<img src="http://www.your_domain.com/slides/img/slide-7.jpg" width="570" height="270" alt="Slide 7">
				</div>
				<a href="#" class="prev"><img src="http://www.your_domain.com/slides/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="http://www.your_domain.com/slides/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="http://www.your_domain.com/slides/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
	</div>
</body>
</html>

Again, change the Absolute URL path to the correct location to the correct server. Don’t want a title displayed, no problem, just remove it. Also, make sure that each image has the width and height attached to it. 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.

Extra Info

Tip 1: To remove the background from the slider so that it doesn’t block your page background you will need to edit the CSS file. In global.css, find where it says:

body { 
	font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
	letter-spacing:0;
	color:#434343;
	background:#efefef url(../img/background.png) repeat top center;  /* this is the background color */
	padding:20px 0;
	position:relative;
	text-shadow:0 1px 0 rgba(255,255,255,.8);
	-webkit-font-smoothing: subpixel-antialiased;
}

You’re looking for background:#efefef url(../img/background.png) repeat top center; and change it to say: background: transparent;

Tip 2: 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.

Add to iWeb

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, you should be able to view the slider frame and buttons in iWeb prior to publishing. However, you will not be able to view the slides. These will only show after you publish the page and view it using Safari or any other web browser.

Once you have published your page and  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.

Here is my full index.html file. Feel free to copy and use, you can also view the source on the demo.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Slides, A Slideshow Plugin for jQuery</title>
	<meta name="robots" content="noindex,nofollow">

	<!-- CSS Style Sheet -->
	<link rel="stylesheet" href="http://www.your_domain.com/slides/css/global.css">

	<!-- JS Files -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://www.your_domain.com/slides/js/jquery.easing.1.3.js"></script>
	<script src="http://www.your_domain.com/slides/js/slides.min.jquery.js"></script>

	<!-- Load the slider functions -->
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
</head>
<body>
	<div id="container">
		<div id="example">
			<img src="http://www.your_domain.com/slides/img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">

					<!-- Images go here - Make sure each image is the exact same size and it matches what you have in the global.css file -->

					<!-- this one is a link to my home page.-->
					<a href="https://www.bnecreative.com/"><img src="http://www.your_domain.com/slides/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>

					<!-- the following are only images that are not clickable -->
					<img src="http://www.your_domain.com/slides/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
					<img src="http://www.your_domain.com/slides/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
					<img src="http://www.your_domain.com/slides/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
					<img src="http://www.your_domain.com/slides/img/slide-5.jpg" width="570" height="270" alt="Slide 5">
					<img src="http://www.your_domain.com/slides/img/slide-6.jpg" width="570" height="270" alt="Slide 6">
					<img src="http://www.your_domain.com/slides/img/slide-7.jpg" width="570" height="270" alt="Slide 7">
				</div>
				<a href="#" class="prev"><img src="http://www.your_domain.com/slides/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="http://www.your_domain.com/slides/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="http://www.your_domain.com/slides/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
	</div>
</body>
</html>

 

Good luck with your slider designs and integrations into iWeb! If you run into a road block, feel free to leave a comment below.

[social_share/]
  1. Just followed your tutorial, works a treat except I had to also change

     body { line-height:1; color:black; background:white; }" to "body { line-height:1; color:black; background:transparent; }"
    

    To make the page truly Transparent.

    IF i want to change the whole thing to be bigger do I just edit the sizes in the index and adjust the ‘container’ etc. accordingly?

    Thanks for your help!.
    Wonderful tutorial!

    • Yes, if using larger images, just adjust the sizes in the index.html code and the css file accordingly to match the new image sizes. Also, you may need to adjust the “frame” image that is located in the /img directory.

  2. HI, i have ran into many softwares, snippets, and Jquery packages, but so far, i think your sliders and designs are the most functioning in the world of iweb. so i followed your tutorial, but i ran into a problem. in step 2 you said “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=”). Changes you will need to make are colored below."
    the problem is that when i could get absolute URL's for my images on the FTP server, however when i open the folder where .js files are, the URL that shows in the address bar of the browser become a little long and gibberish: example for an image i get a clickable link that when i open i get this URL: http://www.mydomain.com/slider1/img/arrow-prev.jpg
    but for .js files, first they are not clickable links ( to open them i need to check a box and hit edit file option that is provided by the hosting server, which opens the file in a .js code editor). second i the only URL that shows in the browser is the URL of the folder that contains this .js file and it looks a little gibberish example:
    https://xmydomain.securecnc.net/CNC/fileman.cgi?dir=%2Fbig%2Fdom%2Fxbluegatena%2Fwww%2Fslider1/js

    thanks a lot for any help, and i really admire your work

    • Hi Ash,
      The absolute URL is where the file is located on the server. You should have used a FTP program to upload these files and made the directory for them if needed. So for an example to one of the src=”…..” You would want to place the domain with the folder containing the slider source code and then the additional folder (if there) where the file is at.

      For example, mine could look like: src=”https://www.bnecreative.com/sliderfiles/images/next.png” Here you have my domain address, then a folder in the root directory …/sliderfiles/ for the source code. Followed by a folder for the images …/sliderfiles/images/ and then the image itself.

      Now the gibberish you see could be caused by having spaces in your folder and file names. So make sure there are no spaces. If you need spaces then use _ or – to separate the words in the file/folder name. Hope this helps.

  3. Hey, I tested your tutorial and it works great! But the big problem is that my images isn’t showing. NOTE: The slider frame is showing and my images are in the same folder as the frame and other assets. What can I do? Don’t think I have misspelled anything in the code.

    Thanks in advance!

    —–

    Jacob L

    • Jacos,

      You want to make sure you’re using all absolute URL’s for everything. So if your slide images are stored in a folder called /images/ then you want the src link to be the following:

      src="http://www.domainname.com/slider_folder/images/image_file_name.jpg" width="570" height="270" alt="Slide 1"
      

      Of course, change the above to fit your file/folder structure. Hope this helps. If you need more help, email me the HTML code you’re using for your HTML snippet and I’ll see if I can get it working in my iweb.

  4. Can I take of the href urls so when you click on images, it does not take you to a specified URL.
    Can I also take off the frame altogether?
    How about autoplay. is it possible for images to start rolling by themselves?

    thanks in advance

    • I have changed the dimension of the images but it looks like there are many places that need to be adjusted if this change occurs and it messed up everything. Can you advise exactly what needs to be changed?

      thanks in advance

      • The default image sizes from the source code is 570×270. If you’re using something different you will need to make sure you reflect that in the img src tag line in the index.html file. Also, you want to make sure ALL images are exactly the same size. This particular image slider also uses a frame and placement of the arrows so you will need to adjust those as well in the global.css file, especially the .slides_container and others. Sometimes it’ll be trial and error to achieve the correct dimensions .

        For an example, If your image is 520×250, instead of the default, then you need to adjust the css files by -50 width and -30 height depending on the effected areas like the conainer, frame, etc. Try messing with one setting at a time to see if it works correctly, then move on to the next one.

        Hope that helps.

  5. First of all, thank you so much for the tutorial. You’ve got a really clear and thorough way of explaining things & its fantastic.

    I’ve stripped back the styling of the slider quite a lot just to use this as an easy way to link to my other pages and I just wanted to run something by you.

    The slide navigator buttons at the bottom of the slider don’t seem to appear at all. I can see a reference to what looks like it in the index.html file where it says: generatePagination: true,

    And it is also mentioned in the css file, however it doesn’t seem to appear on the web page at all.

    Is there anyway do get this running on my page. You can view it here if you want to take a squizz at the source code (i’m pretty new to all this so any help would be greatly appreciated).

    http://www.tcmdesigns.com

    Cheers, and keep up the awesome work.

    Tim

    • Hi Tim,

      Looks like you’re missing the “url(” in your global.css file for the pagination button image. It should look like this:

      background-image:url(http://www.tcmdesigns.com/Slider2/img/pagination.png);
      
  6. Hey Kerry,

    Thanks so much for the really quick reply! I’ve had a bit of playing around with it and i’m so close! I’m just having trouble with the positioning of the navigator. If you jump back on the homepage, you’ll notice Its chopping off some off the top of the green dots.

    I’m also having trouble shifting their position all up a bit – I’d like to push it up about 50px (so its just nested below the slider) and maybe play with it a bit further and see how it looks over on the bottom right hand side of the slider. What do I need to muck around with in the css file to move its position?

    Any further help would be fantastic!

    Thanks again!
    Tim

    • Tim,
      To fix the “chopping off” the dot do the following:

      :::Find This:::
      .pagination li.current a {
      background-position:0 -592px;
      }

      :::Change To:::
      .pagination li.current a {
      background-position:0 -12px;
      }

      ————————
      To adjust the placement of the pagination, find the following line:

      .pagination {
      margin:26px auto 0;
      width:100px;
      }

      And change the margin to the examples below:

      To the left–> margin:0px 0px 0px;

      1/4 of the way –> margin:0px 250px 0px;

      center –> margin:0px auto 0px;

      Far right –> margin:0px 940px 0px;

      Adjust the numbers to your liking. The first number is the vertical placement. 0px is right below the image slider, 26px is where you currently have it. The second number is the horizontal placement.

  7. im having a little trouble with the slider…i completed the html edits and when i post them in the html snippet and hit apply the images show but they show all at once stacked one under the other how do i fix this problem?

  8. Hello! and thank you for posting!!

    I’m now having a few problems I’m hoping you will hold the answer to.

    1. It’s unclear to me how I can add pictures to the slider. I tried what I thought was the logical step of copying and pasting this code below the last slide code

    For some reason it cleared the frame and next/previous arrows. I even made sure that I didn’t delete anything.

    2. I changed a good amount of the HTML and CSS code to customize the slide viewer including the background and size of images. I previewed it all before injecting it into iWeb and it looked great, but when I copied the code and placed it in iWeb using the HTML widget it displayed all the images in a long row and basically left out the slider.

    3. This seems to be the biggest issue. I’ve been positing the folder to my iDisk folder, under web/sites/Hello-Pictures/ and when I attempt to publish the iWeb page the Slider folder disappears from the iDisk folder. poof, gone. Currently I’m not using my own URL (waiting till the site is more complete to switch over) so I’m stil using the mobile me url. Any ideas on this one?

    I would be so so grateful if you could help me with these issues.

    Nicole

    • Hi Nicole,

      1) The pictures need to be uploaded to your server and then you place the absolute URL of said pictures into the HTML snippet where I have in red. The absolute URL may look like this: http://www.domainname.com/slider/image_folder/filename.jpg . If you’re using your idisk, then it may look like this: https://idisk.mac.com/user.name//folder_name/file_name.jpg . Of course, adjust it to your actual placement.

      2) Make sure the CSS file and JS files are being found in the top section of the HTML snippet (head section). Again, you need to use the absolute URL to those css and js files. If you have done alot of customizations then you should double/triple check your changes. Having a closing tag or even misspelled class/div can cause the entire script to not work correctly.

      3) By placing any file within the iweb published directory may be overwritten by iweb if doing a full re-publish. This is due to iweb “cleaning” out the directory and placing only iweb stuff back into it. That’s way it’s always a good idea to place your extra stuff in a different location OR manually upload the iweb published folder using a FTP program after publishing the site to a local directory on your computer.

      Let me know if you’re still having issues.

  9. Hi Kerry,

    Thanks for posting this. I would be completely lost without such a through tutorial. I’ve got my Jquery image slider working properly. I’ve also managed to resize it & make the background transparent as well. You can view it here:
    http://www.myepicvision.com/slider/index.html

    My question for you is, when I go to add the source code into the html snipped the end result is this:
    http://www.myepicvision.com/Politic

    Do you know why it gets translated this way? It’s been bugging me for days now & I just can’t seem to get it to work. Thank you in advance for your help.

  10. Is there a way to modify the speed of the transition from one image to the next?

    • Yes there is. Open the script.js file and find:

      $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
      

      The number on the end is in milliseconds. Increase or decrease the number to your liking.

      • Cool. Thanks! Also replaced with my images/resized, etc. One issue I have not been able to resolve: ‘margin’ at the top of the html widget in my page. See:
        http://www.eaa-1280.org/NewSite/eaa1280/

        Trying to align with top of left column. Have limited knowledge of css and have poked through that and have been unable to find what might control that.

        • Actually, the speed of the slider is found in the HTML not the js. (sorry, looked at the wrong file for you). There should be a “play: xxxx” and pause: “xxxx” The play is the speed of transition and the pause is the amount of time it sits on the image before the next transition.

          To align the slider, go to the global.css file and find:

          #slides {
              position:absolute;
              top:15px;
              left:4px;
              z-index:100;
          }
          

          Lowering the number 15 will reduce the space from the top and you can reduce the 4 to remove the space on the left. Adjust to your liking

  11. Hi Kerry, congrats for this wonderful tutorial !!

    I’m having a little trouble, i’m using 612*612px images but their bottom is cut and the green navigation points don’t appear. I tried to change different values in the global.css but I cannot find the one that will fix this.

    Can you help me please ?

    Thank you in advance & one more time : congratulations 😉

    • Jam,

      Sometimes the HTML snippet cuts off the bottom of the slider, so first try extending the height of the HTML snippet to see if everything appears. If that doesn’t work, double check and make sure the slide dimensions are correct in the HTML and in the CSS, again making sure the HTML snippet is large enough to present the entire slider.

      If you still can’t get it working, email me or reply here with the link to your slider so that I can look at the css and html code you’re using.

      • Man : you are just incredible !! All of that looks so easy for you !! cheers man !! Nice shot, that was the height of my HTML snippet.

        Thank you so much, man 😉 I wish you the best !!

        • Thank you. Much appreciated! Take Care.

        • Hey Kerry i wouldn’t be annoying but you have been so nice plus you know this stuff better than nobody else (i mean, nobody else i know !!).

          Ok, i’ve seen that on the Apple website : http://www.apple.com/fr/iphone/

          As you can see, the dots appear on top of the pictures. So i tried to do the same thing by putting this in my Global.css :

          #slides {
          	position:absolute;
          	top:-25px;
          

          But now, the dots don’t appear anymore because they are under the slider … Is there something i could do to fix this ?

          Thank you in advance =)

        • I believe you will need to add a “z-index” attribute to the pagination buttons. The z-index performs the placement of images in order. Info on the z-index can be found on the W3school website.

  12. Kerry, I’ve had a “z-index” attribute to my “.pagination {” & now the dots are appearing for one second, when i load my page, just before the slider starts, but as soon as it starts, they come back behind the pictures & i can’t see them anymore … If you have any idea, i’ll be glad, but otherwise, nevermind, it’ll be allright with the “classic” version 😉 BTW, thank you for the link, as you can see, i’m just a noob trying to sort it out with this just for fun but still, i really appreciate, man =)

  13. Hi Kerry, How are you doing ?

    I’m looking for something not really in link with your slider, hope this won’t be too annoying 😉

    How did you make your customized info bubble in your “share it” section ? I mean the black semi-transparent box where it’s written “facebook” when you pass you mouse over the facebook button ? Did you use only html/css (with a tag or something ?) or did you use javascript or something else ?

    Another question : still in the “share it” section, what’s the method to make your buttons seem to be “pressed” on mouse over ?

    I’ll understand if you don’t have the time to make me a personnal tuto about this, but maybe a link to a tuto you know, or a little piece of code i could dissect would be great 😉

    Anyway, thank you 1000 times in advance, Kerry. See you soon.

    Jam.

  14. When I download the files the “jquery-1.4.4.min.js” file is not appearing. I am only getting one of the js files in the js folder.

  15. Kerry,

    Thanks for this great tutorial! Quick question – if I want the “NEW” ribbon to only appear over one image is there a way to do that?

    Thanks!

    Tonya

    • Hi Tonya,

      I tried moving the ribbon ID around and placing it with the image with no luck (at the moment)… So the best way right now would be to embed the ribbon on the slide image itself using your favorite image editor tool.

  16. Hey Kerry,

    Thanks for this great image slider but there seems to be a problem. When I add the HTML code to the HTML snippet and click apply I get all the images on top of each other with the frame and arrows down under (arrows aren’t on the side of the frames but up in the left corner. I verified that I was including the absolute URL’s for the jquery-1.4.4.min.js, slides.min.jquery.js and global.css files in the HTML. Still no result.

    Thanks in advance,

    Niki

    • Found a couple of issues

      1) You misspelled the domain for the css (left out one of the “L’s” for villa. It should be: http://www.villaavalonstbarths.com/cp/Standard/css/global.css . That will solve your css issues with things out of place.

      2) Use this link for the jquery.min.js, https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js You can also download that file and place on your own server if you like, just change the url to point to the new location.

      3) You’re missing the jquery.easing.1.3.js link: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js . Again, you can download it upload it to your own server if you like so you’re not depending on an external source. Make sure you’re including the script src=” as well for this since the whole line is missing from your html widget.

      4) There seems to be a line added right above the /head… “widget0_markup.html:21ReferenceError: Can’t find variable: $” Remove that.

      5) Lastly, your first slide image URL is incorrect change Ariel-View.jpg to Ariel_View.jpg on the second one. Also if these slides are not linking to other pages, you can actually remove the a href part and the /a at the end of each line. Those are only needed if you want the viewer to be able to click the slide to go somewhere else or view a larger image of the slide.

      Here is the raw code you can look at what I changed in your browser:

      http://pastebin.com/raw.php?i=VrCw0Jpx

  17. Thank you so much it worked perfectly.

    But just one more thing could you explain how to customize image sizes. I tried changing the sizes in CSS and I changed them in the snippet but still no size differences.

    Thanks,
    Niki

  18. Actually I’ve been able to make the images bigger but the arrows aren’t in place.

    you can have a look at http://www.villaavalonstbarths.com

    Thank you for all your help

    Niki

    • find in the global.css,

      #slides .next {
      	left:585px;
      }
      

      And increase the left px number. The same can be done to the left one on #slides .prev to bring it closer to the slide.

  19. Thank you this also worked out perfectly fine, but is there a way to change the next and previous arrows with other pictures of arrows. i have tried just changing the images in /standard/img/ and i adjusted the sizes but i still get the same arrows (a little bigger due to sizes changes). Could you tell me what i’m doing wrong.

    Thanks
    Niki

    • Just replace the arrow images with new ones. If they are the same size, shape and file name then you shouldn’t need to adjust the CSS. If your new arrows are larger then you may need to adjust the left px’s like before. If the file name is different then you need to adjust the file name in the html.

  20. Also work. But is it possible to add a caption for each photo ?

    • You need to add a div after each image call. So…

       

      Caption Content Goes Here.....

      The main source code folder that you download should have other options for the slider. There should be a folder that’s called, images-with-captains. Look at that index file to see how it all is set up. But all you need to do is add the above to your code and it should work.

  21. Kerry,

    1)Thanks for your great tutorial. I am new to html and I am trying to insert the slider into iweb. I don’t have a web domain yet, but would like to test the site in MAMP first. What link do I insert for the src= and href in order to point to my htdocs folder on MAMP?

    2) When I tried to test your script by copy and pasting it into my html snippet, the pictures would show up below each other. How do I point iweb to the js and CSS folders (sitting in my htdocs [MAMP] folder)?

    Thanks for your help,

    Michael

    • 1) Thanks for the corrections. The slider tests fine in my browser, but it still give me problems with iweb. The photos don’t display and are listed after each other. Maybe I didn’t understand you, when you explained putting the snippet file into the page folder?

      2) Once I have registered a domain name, do I just exchange all the ../ with the domain name?

      I have included my index file, if you want to have a look.

      Appreciate all your help

      		$(function(){
      			$('#slides').slides({
      				preload: true,
      				preloadImage: '../slider/img/loading.gif',
      				play: 5000,
      				pause: 2500,
      				hoverPause: true
      			});
      		});
      					
      					
      					
      					
      					
      					
      				
      				
      				
      			
      			
    • I’ve emailed you the index file. Thanks

  22. I’m just diving into this project, and there’s a red flag I’m seeing early on:

    is what you reference in your tutorial, however the source I downloaded looks a bit different:

    (my computer)/slider/js/slides.min.jquery.js

    is all I have; should I be concerned that I didn’t get a jquery-1.4.4min.js file with the download?

  23. Sorry, I tried to cut and paste from your tutorial window, apparently not possible. You reference the jquery-1.4.4min.js file, which I don’t have. ???

    • Hi Alex,

      Looks like the source has changed/updated by the code author since I first wrote this post 8 months ago. I’ll try and update my tutorial soon. From looking at the new code, overall it is a lot easier to work with than originally.

      The jquery.min.js and jquery.easing.1.3.js are now hosted with google leaving only the slides.min.jquery.js found in the downloaded source within the style you are using. So make sure you are using absolute URL’s and point the HTML code to where slides.min.jquery.js is. You should be able to leave the first two alone. Also make sure the global.css has the correct url and your images.

      If you want to have those two files hosted on your own server, you can point to them in your browser and download the files and then place them in the same location as the one you already have. Just change the URL to point to the new location from google to your server.

      
      
      		
      	Slides, A Slideshow Plugin for jQuery
      		
      	
      	
      	
      	
      
      
      
  24. Hello.

    First: thanks so much for this tutorial! It has been a life-saver.

    I am having trouble publishing my slideshow. It works at http://www.professionapparel.com/slider (where all the files are located on the server) but when I try to incorporate the code into my main website that I am building with Kompozer (www.professionapparel.com), it does not publish correctly. I have looked at it many times and cannot see where I am going wrong. Is it a problem with Kompozer?

    I would be forever grateful if you could take a look at the code and steer me in the right direction. I know very little about all of this stuff, and am quite lost right now on my own.

    Thanks!

    -Brooke

    ps: I know that only the first image in the slideshow works at this point. I have not added the other photos yet. Also, a small “dd” appeared out of nowhere near the bottom right corner of the slideshow a bit ago (www.professionapparel.com/slider). Do you have any idea why?

    • *Just fixed the “dd” problem, but the rest is still a mystery to me.

    • Hi there. I can’t really tell because when I view your page source and access the global css and js files they show as gibberish text. Make sure that the URL’s for all the js and css files are pointing in the right direction. With Kompozer, I’m not sure as I’ve never used it.

      • Ok, well thanks for taking a look. I will play around with those URLs and see if I can make it work.

        Just to be clear: it is only the code in the index.html file from the original “standard” folder I downloaded that needs to be copied into Kompozer (or any other website builder) in order to put the slider into a webpage, correct? Then as long as the URLs for the js and css files are correct, it should work?

        Or am I missing something?

        Thanks!

        -Brooke

        • Figured it out! It seems that Kompozer was somehow messing up the code at the moment of publishing, so I put all the code together in Kompozer then saved the index.html file and just uploaded it manually to the server. It works!! 🙂

          Thanks for the help. I will speak for everyone here in saying that we all greatly appreciate the time and attention you take in answering our questions.

          Cheers.

  25. Thanks Kerry for the tutorial!

    There is just one thing I just can’t fix. I followed all the steps till point to customise the slide show and it work perfectly:

    http://www.jelledejong.eu/slider/

    As you’ll see I only changed the fist picture. The trouble comes when I trie to intergrade it using iWebs HTML snippet. It seems to find the pictures but place them above each other. This does not change when I publish the site and view in a browser:

    http://www.jelledejong.eu/Jelle_de_Jong/test_slideshow.html

    The picture diminution seems to be in order….

    Would you be able to help me out?

    Thanks!

    Jelle

    • HI Jelle,
      When using a HTML snippet, you have to make sure every link to each file is an absolute URL’s. If you look at the HTML code, you will find a line near the top showing a link to a stylesheet…. /css/global.css. This won’t work in an HTML snippet because that location is not in the published page directory that iWeb makes. So what you need to do is add the root and subfolder of where the slider files are on your server. So for example: the CSS file should be http://www.jelledejong.eu/slider/css/global.css . Same thing goes for the .js file, js/slides.min.jquery.js, the arrows, img/arrow-prev.png & img/arrow-next.png and finally the frame, img/example-frame.png. Of course if you use your own images for the slides, then you need to make sure they are absolute URL’s as well.

  26. Hi,

    Excellent tutorial! I am having only one error, my images are not showing. I double check the url path and everything looks right. I think is something in the function. Any ideas? Thanks before hands.

    $(function(){ $('#slides').slides({ preload: true, preloadImage: 'http://www.kiteboardingnewfoundland.com/slider/img/loading.gif', play: 5000, pause: 2500, hoverPause: true }); });
    

    charley

    • Hi Charley,

      The path of the loading.gif is going to a 404 page for me so I can’t see anything. What is the page url where the slider is currently displayed at so that I can look at it?

  27. Hello, how to put slider to joomla template?

  28. how to put fade??
    now are like this and picture goes from right to left

    $(function(){
      $("#slides").slides({
        preload: true,
        play: 5000,
        pause: 2500,
        hoverPause: true
       });
    });
    

    what I have to change?

    • Add the following: effect: ‘fade’

      Example:

      	$(function(){
      		$('#slides').slides({
      			preload: true,
      			play: 5000,
      			pause: 2500,
      			hoverPause: true,
      			effect: 'fade'
      		});
      	});
  29. Just done:

    $(function(){
      $("#slides").slides({
        preload: true,
        play: 10000,
        pause: 10000,
        hoverPause: true
        effect: 'fade'
       });
    });
    

    when I add “fade” slides stop working.

  30. Thank You very much you a the best 🙂
    can You help a little more 🙂
    I have:

    
    
    
    
    
    
    
    

    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:

          	$(function(){
          		$('.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/

  31. Thank You very much, how to make loger fade?

  32. 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?

  33. Hello, how to remove from code

  34. 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?

  35. 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.

  36. 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

       src="/images/slide1.jpg" or src="css/styles.css" 

      … etc. Change all of these that link to a JS, CSS or image file by adding the full path to the file.

        
       Slide 6 

      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.

  37. 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

    • 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.

        • Kerry Kline says:

          I’m glad to hear you got it worked out.

  38. 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,

Comments are closed.