Feature Carousel 2 is an elegant and customizable jQuery plugin to create SlideShow Carousel in webpage, with images and Text /caption. The images and their caption can be displayed in LightBox too.


• To DOWNLOAD this script, click: (1 MB).

Example SlideShow Feature Carousel 2

Here is an example this Image SlideShow Carousel jQuery plugin (this example is also in the archive with the script).
- When the mouse cursor is over an image, the carousel stops.

Installation

1. First, to use this plugin, copy the jq_carousel folder with all its files on your server. The script comes with jQuery 1.10.2, with Migrate Addon; so, it is indicated to use this file with jQuery library.
2. Include these files in your web page: jQuery library, the Feature Carousel jQuery plugin, and Feature Carousel css file.
<link rel="stylesheet" type="text/css" href="jq_carousel/feature_carousel.css" />
<script type="text/javascript" src="jq_carousel/jquery.js"></script>
<script type="text/javascript" src="jq_carousel/feature_carousel.js"></script>
3. Create a <div> with id="jq_carousel". Then, in this container add DIVs with class="carousel_elm", each DIV with an image, and optional a text /caption to this image. The IMG tag must hsve class="carousel_img", and the text-content into an element with class="carousel_caption" (see the code bellow).
If the image is included into a link (<a> </a>), when the user clicks that image in center, the page with the link will be opened.
- Here is an example with five images:
<div id="jq_carousel">
 <div class="carousel_elm">
  <img class="carousel_img" src="images/sample1.jpg" alt="image 1" />
  <p class="carousel_caption">This area is typically used to display captions associated with the images. They are set to hide and fade in on rotation.</p>
 </div>
 <div class="carousel_elm">
  <a href="#"><img class="carousel_img" alt="Image Caption" src="images/sample2.jpg" /></a>
  <p class="carousel_caption">The background will expand up or down to fit the caption. This image is added into an &lt;a href=&quot;#&quot;&gt; &lt;/a&gt; element.</p>
 </div>
 <div class="carousel_elm">
  <img class="carousel_img" alt="Image Caption 2" src="images/sample3.jpg" />
  <p class="carousel_caption">Small Images can be placed here as well.</p>
 </div>
 <div class="carousel_elm">
  <a href="http://coursesweb.net/" title="CoursesWeb.net"><img class="carousel_img" alt="images Caption 3" src="images/sample4.jpg" /></a>
  <p class="carousel_caption">When click on this image, a link will be opened.</p>
 </div>
 <div class="carousel_elm">
  <img class="carousel_img" alt="Image Caption 4" src="images/sample2sample2.jpg" />
  <p class="carousel_caption">The background color of the caption area can be changed using CSS. The opacity can be changed in the options, but it will also change the opacity of the text.</p>
 </div>
</div>
4. Then, initiated the carousel script, with the featureCarousel() method to the element that contains the images /content for slideshow-carousel, like in the following example.
- The carousel function takes in just one paremeter: a javascript object with options to customize the slideshow: auto-play, carousel dimensions, images dimensions, lightbox. The list of all the available options are in the "index.html" page.
<script type="text/javascript">
$(document).ready(function() {
  // calls the featureCarousel() method to the element that contains the images /content for slideshow-carousel
  $("#jq_carousel").featureCarousel({
    //add   option: value
    autoPlay: 2000,             // sets auto-play slideshow with rotation every 2 seconds
    largeFeatureWidth: 400,     // width of image in center
    largeFeatureHeight: 250,    // height of image in center
    smallFeatureWidth: .42,     // width of the other images (42% of original width)
    smallFeatureHeight: .35     // height of the other images (35% of original height)
//    lightbox: 'image'       // uncomment to display only image in LightBox, set to false to not show LightBox
  });
});
</script>
• This jQuery plugin is an improved version of the Feature Carousel from this page: http://www.bkosborne.com/jquery-feature-carousel

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
jQuery plugin for Image SlideShow Carousel - Feature Carousel 2

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (1419)
  2. Golf Putt It In (739)
  3. Disable button and Enable it after specified time (5129)
  4. Flash Games - Free online Games (22975)
  5. Move image from an element /tag to another (1637)

Popular pages this month

  1. Qwop (3219)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2547)
  3. Get the value of the selected /checked checkboxes in a form (1608)
  4. Insert, Select and Update NULL value in MySQL (1423)
  5. Add, Change, and Remove Attributes with jQuery (1301)