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.
This area is typically used to display captions associated with the images. They are set to hide and fade in on rotation.
The background will expand up or down to fit the caption. This image is added into an <a href="#"> </a> element.
Small Images can be placed here as well.
When click on this image, a link will be opened.
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.
<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).
<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 <a href="#"> </a> 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.
<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
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
h2 { font-family:"Calibri",sans-serif; }
var elm_list = document.querySelectorAll("div.cls"); var nr_elms = elm_list.length; // number of selected items alert(nr_elms);
$arr =[1, 2, 3, 4); $arr_sum = array_sum($arr); echo $arr_sum; // 10