Jquery Course

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="https://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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
jQuery plugin for Image SlideShow Carousel - Feature Carousel 2

Last accessed pages

  1. Get Attribute (ID, Class, Name, Title, Src) with jQuery (72518)
  2. Recursive function to create Multi-Level Menu in PHP (11098)
  3. Prayer The Art of Believing (1255)
  4. Ajax-PHP Rating Stars Script (16247)
  5. Register and show online users and visitors (38133)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (100)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (86)
  3. SHA256 Encrypt hash in JavaScript (71)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (45)