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
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
jQuery plugin for Image SlideShow Carousel - Feature Carousel 2

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142308)
  2. Get and Modify content of an Iframe (32367)
  3. $_GET, $_POST and $_REQUEST Variables (33884)
  4. Ajax-PHP Chat Script (49508)
  5. JavaScript Course - Free lessons (31647)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (311)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)