jQuery Image Scale Carousel

[box style=”blue” icon=”asterisk”]This is a requested tutorial from one of our readers incorporating the jQuery Image Scale Carousel into iWeb. If you would like to see other tutorials please let us know![/box]

This jQuery image slide is pretty simple to add to iWeb or really any website for that matter. It does a few things differently than what our previous tutorials do such as the Flexslider which is responsive to it’s container and even slides.js.

Download Source View Demo

Step 1: Download

Let’s start by downloading the source code from J.P. Given‘s website where you can also view his instructions. The download will contain a folder called jQuery-Image-Scale-Carousel-master with additional files and folder within in. Within that folder you will see two index files, index_dynamic.php and index.html. You can safely delete the index_dynamic file as it wont be needed including the readme file.

And while you’re there, let’s rename the download folder to something easier say “image-carousel” so that when we upload it to our server it’ll be alot easier to identify and easier to type out our absolute URL’s for the HTML snippet.

Now lets explain these files:

  • The images folder will store all of your slide images you wish displayed.
  • The index.html file is what we will use to add to our HTML snippet in iWeb.
  • The JQuery.isc folder contains the JS and main CSS file including navigation buttons.
  • Finally, the lib.css file is the styles for the page background and most importantly, the dimensions of this carousel #photo_container .
[box style=”yellow” icon=”warning-sign”]Don’t forget to change the name of the main folder to something easier such as “image-carousel”. The rest of the tutorial will be using this name for our main folder.[/box]

Step 2: Setup and Overview

Now that we’ve downloaded our source files, removed those two un-needed files (index_dynamic.php and readme) and renamed the main folder, go ahead and open the index.html file in your favorite text editor. It’s not too scary, but let’s go over it little by little. At the top, we have the following which is the basic HTML for the <head> section which include the JS scripts and CSS stylesheets. First is the main jQuery library which we are using from Google.

<!-- Google Hosted jQuery Script -->
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>

 

Next is the main CSS files for the image slider and page background

<!-- jQuery Image Scale Carousel CSS & JS -->
<link rel="stylesheet" href="lib.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="jQuery.isc/jQuery.isc.css" type="text/css" media="screen" charset="utf-8">

 

Followed by the main JS file needed to run the slider:

<script src="jQuery.isc/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"></script>

 

And lastly, the JS needed to activate/load the image slider and make it run with our HTML.

<script>
var carousel_images = [
"images/1.jpg",
"http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg",
"http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg",
"http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg",
"http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg",
"http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg",
"http://farm4.static.flickr.com/3089/2335224771_cec36d33a6_o.jpg" // Example of a local image
];
// Example without autoplay
$(window).load(function() {
$("#photo_container").isc({
imgArray: carousel_images
});	
});
// Example with autoplay
/* $(window).load(function() {
$("#photo_container").isc({
imgArray: carousel_images,
autoplay: true,
autoplayTimer: 5000 // 5 seconds.
});	
}); */
</script>

 

Notice that in the last code block above, we are including our images and certain settings for the image carousel. Unlike our previous slider tutorials, the images are called here, in the head, instead of lower in our body markup.

Last but not least is our body HTML where we will tell the system to draw our image slider container.

<body>
<h1>jQuery Image Scale Carousel</h1>
<div id="photo_container"></div>
<p>This is an example of how it's implemented.</p>
<p><a href="http://johnpatrickgiven.com/jquery/Image-Scale-Carousel/" target="_blank">jQuery Image Scale Carousel</a> is Developed by <a href="http://johnpatrickgiven.com" target="_blank">J.P. Given</a>.
</body>
</html>

Keep in mind, you don’t have to include the h1 or p tags as they are only there for the demo. But what is most important is this line:

<div id="photo_container"></div>

That is the container where our carousel will be placed at. Notice that the ID, photo_container matches what is in our JS script above.

Step 3: Clean it up to make it easier (Working iWeb Code)

The below code is the same as above but with the corrections needed for iWeb along with cleaning up the code and removing some of the stuff we don’t need.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="robots" content="noindex,nofollow">
<!-- Google Hosted jQuery -->
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
<!-- CSS files for Image Scale Carousel -->
<link rel="stylesheet" href="http://www.YOUR_DOMAIN.com/image-carousel/lib.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="http://www.YOUR_DOMAIN.com/image-carousel/jQuery.isc/jQuery.isc.css" type="text/css" media="screen" charset="utf-8">
<!-- Main JS file for Image Scale Carousel -->
<script src="http://www.YOUR_DOMAIN.com/image-carousel/jQuery.isc/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"></script>
<!-- Activate the Script and Images  -->
<script>
// Include the images we want added to our Carousel
var carousel_images = [
// Example of your image on your website
"http://www.YOUR_DOMAIN.com/image-carousel/images/1.jpg", 
"http://www.YOUR_DOMAIN.com/image-carousel/images/2.jpg", 
"http://www.YOUR_DOMAIN.com/image-carousel/images/3.jpg",
// Example of External Image
"http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg", 
];
// Default activate function with no additional settings.
// Example without autoplay
$(window).load(function() {
$("#photo_container").isc({
imgArray: carousel_images
});	
});
</script>
</head>
<body>
<!-- Optional Text -->
<h1>jQuery Image Scale Carousel</h1>
<!-- This is our Carousel -->
<div id="photo_container"></div>
</body>
</html>

The most important change is including the absolute URL for our images, JS and CSS files. This is most important as iWeb will not be able to find them on it’s own using the HTML snippet. If you followed along in step 1, we changed the folder name from jQuery-Image-Scale-Carousel-master to image-carousel.

Step 4: Find/Replace and Upload

Feel free to take the code above and copy and paste it into your HTML snippet inside iWeb. Remember to find and replace www.YOUR_DOMAIN.com found in the head section with your actual domain name. This will need to be done for all of the carousel css, js, and image files. Once you are done editing Go ahead and upload this entire folder to the root of your server. This is usually the “public_html” or “www” folder.

When the upload is finished, go back to iWeb, paste in the HTML if you haven’t yet and hit apply. You should see your slider working in your HTML snippet. By default, the carousel should be using the 3 slide images found in the image slider and or the flicker images provided from the source code.

Autoplay Settings

The carousel also comes with autoplay and timer. If you would like your carousel to automatically start playing after a set time, go back into the HTML snippet and change the entire $(window).load(function() { function to the following:

// Example with autoplay
$(window).load(function() {
$("#photo_container").isc({
imgArray: carousel_images,
autoplay: true,
autoplayTimer: 5000 // 5 seconds.
});	
});

This is also shown in your index.html from the source code, simply comment out the first one and uncomment the second one.

 

Notes / Help

  • The size of the carousel is based on the CSS of #photo_container found in the lib.css file. Change the width and height to meet your requirements. Then go back to iWeb, and re-hit the apply button on the HTML snippet.
  • Not seeing your images display? Double check your URL’s for the CSS, JS and image files. They have to be the absolute URL path, spelled correctly and is case sensitive. Also check to make sure you uploaded your files to the correct location on your server. You should be able to access each file directly from your browser such as the index.html file or even the images.
  • Feel free to view the source on our demo as well to help with the HTML code needed.