Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

jQuery Camera Slideshow Plugin

See in this article a discussion about the jQuery Camera Slideshow Plugin. Learn how to create different slideshows using the jQuery Camera Slideshow Plugin.

I this article I'll be covering the following topics here:

  • Introduction
  • Features
  • Pre-requisites
  • How to use the plugin
  • Camera Plugin API
  • Syntax
  • Examples

Introduction

This jQuery Camera Slideshow is the newest. The effects are amazing and the flexible features allow you to adapt the slideshow perfectly on your web site. It is a responsive open source project for slideshow. It works with all the major browsers.

Features

  • With Camera plugin you can customize your project. You can use any HTML elements like images, text, videos and so. The camera displays them with a good looking interface using transitions.
  • It is an open source and hence free to use.
  • Different color skins and layouts are available, full screen ready too.
  • It uses a light version of jQuery mobile. You can navigate the slides by swiping with your fingers

Pre-requisite

You can download the Camera Slideshow from here: http://www.pixedelic.com/plugins/camera/

As stated in its official website, Camera slideshow requires jQuery 1.4+ and other jQuery plugins like jQuery Easing and a customized version of jQuery Mobile to use Camera with mobile devices.

Let us briefly discuss jQuery Easing and jQuery Mobile

  • jQuery Easing: Most of the time an animation may simply start and stop abruptly, which honestly gives an ugly look of an animation. Easing allows making animations a bit smoother. Some of the easing methods are words like easeOut, easeIn and easeInBounce. You can learn more about Easing here: http://api.jqueryui.com/easings/
  • jQuery Mobile: As put by the official website “jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices”. You can learn more about this on the official website: http://jquerymobile.com/

How to Use Camera Slideshow Plugin

Now that we know some basics of this plugin, let us dive into coding and see how this plugin can be used in our day to day sliders of web pages.

  • First you need to make a call to jQuery in the head of your document, without which slide show does not work.
  • Next you must call jQuery Easing plugin and jQuery Mobile plugin.
  • Then as a next step call camera plugin and initialize the function camera with method:
jQuery(‘YOUR_TARGET’).camera();

The following example demonstrates this:

<script type='text/javascript' src='../scripts/jquery.min.js'></script>
 <script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script>
  <script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script>
 <script type='text/javascript' src='../scripts/camera.min.js'></script>

Details of above code:

First line is included in the code as it contains compressed version of jQuery.js, where all the variables name has been reduce to short names and most whitespaces & comments have been taken out.

Second line is included only to add customized tools for the mobile that will work on all the mobile devices.

Third line is included to make the animation a bit smoother and take out the jaggedness out.

Last line is included to add the camera libraries, & if not included the slider will not appear.

Camera Slideshow API

Methods

We can see below the main function to start a slideshow, let´s see the code.

// the basic method
jQuery (‘YOUR_TARGET’).camera();
jQuery (‘YOUR_TARGET’).camera({
// setting of the height and the presence if thumbnails
height:’41%’,
pagination: false,
thumbnails: true
}); 

Details of above code:

To start a slideshow we should use this method:

jQuery (‘YOUR_TARGET’).cameraStart();

To stop a slideshow we should use this method

jQuery (‘YOUR_TARGET’).cameraStop();

To pause a slideshow we should use this method

jQuery (‘YOUR_TARGET’).cameraPause();

To resume a slideshow we should use this method

jQuery (‘YOUR_TARGET’).cameraResume();

Skin colors

Camera provides 30+ different colors for the icons. To use them just add one of the below classes to the target element. Without the use of these classes the color of the icons will be either petroleum or graphite.

  • Camera_amber_skin
  • Camera_ash_skin
  • Camera_azure_skin
  • Camera_beige_skin
  • Camera_black_skin
  • Camera_blue_skin
  • Camera_brown_skin
  • Camera_burgundy_skin
  • Camera_charcoal_skin
  • Camera_chocolate_skin
  • Camera_coffee_skin
  • Camera_cyan_skin
  • Camera_fuchsia_skin
  • Camera_gold_skin
  • Camera_green_skin
  • Camera_grey_skin
  • Camera_indigo_skin
  • Camera_khaki_skin
  • Camera_lime_skin
  • Camera_magneta_skin
  • Camera_maroon_skin
  • Camera_orange_skin
  • Camera_olive_skin
  • Camera_pink_skin
  • Camera_pistachio_skin
  • Camera_red_skin
  • Camera_tangerine_skin
  • Camera_turquoise_skin
  • Camera_violet_skin
  • Camera_white_skin
  • Camera_yellow_skin

Options

Following table lists some of the options to customize your camera slider:

#

OPTIONS

Default Value

DESCRIPTION

1

Alignment

center

Adjust the alignment to the topLeft,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight.


2

Autoadvance

true

’true’ or ‘false’

If true, lets your slides flow without having to press a button every time

3

MobileAutoAdvance

true

This involves auto-advancements for the mobile devices

4

BarDirection

leftToRight


leftToRight, rightToLeft, topToBottom, bottomToTop

It is defined ‘leftToRight’


5

Barposition

bottom


left, right ,top, bottom

It is positioned to be ‘bottom’.


6

Height

50%

Decides width of the slideshow. You can either set width in pixel (for instance ‘400px’) or in percentage (for instance ‘60%’) or keep in auto mode.

7

ImagePath


Gives the path of the image.

8

Loader

pie

Means function shall run only when whole page and its element have been loaded.


9

Navigation

true


When true, allows to navigate prev, next, play/stop buttons.

When false, hides all the options of navigation.


10

Opacity on Grid

false

Applies fade effects to the blocks and slices. To have a smoother effect set the opacity on grid to false.


11

Pagination

true


Refers to the paging. It is set to either ‘true’ or ’false’.


12

Play/pause

true



This button is used to either play or pause the slides.


13

Pause on click

true


If true stops the slideshow on click

14

Time

7000

Is set in milliseconds between end of the sliding effect and the start of the next one.


15

Transperiod

1500

It is the length of the sliding effect in milliseconds.


Callback Functions

Following table lists the Call back functions in the camera slideshow plugin:


SL.#

FUNCTION


DESCRIPTION

1

onStartLoading: function() { }


This is invoked when an image on a slider start loading this callback is invoked

2

onLoaded: function() { }


This is invoked when an image on a slider is completely loaded this callback is invoked

3

onStartTransition: function() { }


This is invoked when a transition effect start this callback is invoked.


4

onEndTransition: function() { }



This is invoked on completion of transition effect this callback is invoked.


SYNTAX

Now let us see syntax to add images, captions, videos using the camera slideshow plugin:

Syntax to add images to your slider:

<div data-src=”#”></div> //---where data-src holds the source of image to be used.

Below we can see the syntax to add caption to slide. To add a caption to your slide wrap the “camera_option” within the <div>

 <div data-src=”#”>
<div class=”camera_option”>type here caption for slide</div>
       </div>

It is also possible to position the caption of slide accordingly by using the possible classes: "moveFromLeft", "moveFomRight", "moveFromTop", "moveFromBottom", "fadeIn", "fadeFromLeft", "fadeFromRight", "fadeFromTop", "fadeFromBottom"

Below we can see the syntax to add videos to slide. To include videos into your slideshow make use of iframe into your slide.

<div data-src=”#”>
<iframe src=”#”></iframe>
  </div>

Note: It is also possible to set the height and width of the iframe so, that it changes its size according to the size of the slideshow.

Following are some HTML5 attributes:

SL.NO

DATA-ATTRIBUTES

DESCRIPTION

1

Data-alignment


topLeft,topRight,centerLeft,center,centerRight,bottomLeft,

bottomCenter,bottomRight

2

Data-easing

gives us a way to make animations a bit smoother and takes away the jaggedness out of them.

3

Data–mobile-easing

this effect is only for the mobile devices.


4

Data-portrait

if selected true, it crops the image.


5

Data-slideOn

Decides transition effects to be applied to current (prev) or next slide

6

Data-src

holds the URL of the image of the slide.


7

Data-thumb

holds the URL of the thumbnail of the slide.


8

Data-time

is set in milliseconds between end of the sliding effect and the start of the next one.


Developing the project

You can download the source code of the following examples is attached alongwith the images and required .css and .js files.

NOTE: In all the examples below, do not forget to include the below lines in the head section of the HTML tag, Without which camera slider will not work:

<script type='text/javascript' src='../scripts/jquery.min.js'></script>
<script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='../scripts/camera.min.js'></script>

Example 1 Basic camera slider

The following example demonstrates the basic slideshow, which involves loading of the image based on the circle and loader.

Listing 1:basic.html

<!DOCTYPE html> 
<html> 
<head> 

  <title>Camera slider basic example</title> 

	<link rel='stylesheet' id='camera-css'  href='../css/camera.css' type='text/css' > 
	<link rel='stylesheet' id='style-css'  href='../css/style.css' type='text/css' > 
  
    <script type='text/javascript' src='../scripts/jquery.min.js'></script> 
    <script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script> 
    <script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script> 
  <script type='text/javascript' src='../scripts/camera.min.js'></script> 

    <script> 
		jQuery(function(){ 

			jQuery('#Id_1').camera({ 
				thumbnails:true 
			}); 

			jQuery('#Id_2').camera({ 
				height: '700px', 
				loader: 'pie', 
				pagination: false, 
				thumbnails: true 
			}); 
		}); 
	</script> 

</head> 
<body> 

	<div class="fluid_container"> 
    	<p>Pagination circles Slide show </p> 
        <div class="camera_wrap camera_red_skin" id="Id_1"> 
            <div data-thumb="../images/slides/dummy_image1.jpg" 
            data-src="../images/slides/dummy_image1.jpg"> 
                <div class="camera_caption fadeFromTop"> 
                     Dummy Image 1 
                </div> 
            </div> 
            <div data-thumb="../images/slides/dummy_image2.jpg" 
            		data-src="../images/slides/dummy_image2.jpg"> 
                <div class="camera_caption fadeFromTop"> 
                    Dummy Image 2 
                </div> 
            </div> 
            <div data-thumb="../images/slides/dummy_image3.jpg" 
            		data-src="../images/slides/dummy_image3.jpg"> 
                <div class="camera_caption fadeFromTop"> 
                    Dummy Image 3 
                </div> 
            </div> 
            <div data-thumb="../images/slides/dummy_image4.jpg" 
            		data-src="../images/slides/dummy_image4.jpg"> 
                <div class="camera_caption fadeFromTop"> 
                    Dummy Image 4 
                </div> 
            </div> 

            <div data-thumb="../images/slides/dummy_image5.jpg" 
           			 data-src="../images/slides/dummy_image4.jpg"> 
                <div class="camera_caption fadeFromTop"> 
                    Dummy Image 5 
                </div> 
            </div> 
        </div> 
     
    </div> 

    <div style="clear:both; display:grid; height:100px"></div> 
</body> 
</html>
 

Details of the above code:

camera.css has all the styling pre-defined by the jquery plugin and style.css contains the example specific style.

We have defined the two camera_target namely “Id_1” & “Id _2”.

  • In “Id _1” slide image is displayed only after complete load of the circle and in second id(“Id _2”), slide is loaded after the bar is completely loaded.
  • “ <div class="camera_caption fadeFromBottom"> ” is used to add the caption to the slide with effect of fade form bottom.
  • “ <div class="camera_caption fadeFromTop"> ” is used to add the caption to the slide with effect of fade form top.
  • Tag <div data-thumb=”#”> is used to hold the URL of the thumbnail of the slide. & <div data-src=”#”> holds the URL of the image of the slide.

Output

Execute the above code and open it in any browser, you would see the images sliding. Snapshot of the same is as shown below:

Thumbnails slideshow

Figure 1: Thumbnails slideshow

Example 2 : Fullscreen slideshow

Below example demonstrate the full screen slideshow.

Listing 2:fullscreen.htm

<!DOCTYPE html> 
<html> 
<head> 
   <title>Camera slider fullscreen example</title> 
    <link rel='stylesheet' id='camera-css'  href='../css/camera.css' type='text/css' > 
     <link rel='stylesheet' id='style-css'  href='../css/style.css' type='text/css' > 
    <script type='text/javascript' src='../scripts/jquery.min.js'></script> 
    <script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script> 
    <script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='../scripts/camera.min.js'></script> 

    <script> 
		jQuery(function(){ 

			jQuery('#id_4').camera({ 
				height: 'auto', 
				loader: 'pie', 
				pagination: false, 
				thumbnails: true, 
				hover: false, 
				opacityOnGrid: false, 

			}); 

		}); 
	</script> 

</head> 
<body> 

	<div class="container"> 
        <div class="camera_wrap " id="id_4"> 
            <div data-thumb="../images/slides/dummy_image1.jpg" 
            data-src="../images/slides/dummy_image1.jpg"> 
            </div> 
             <div data-thumb="../images/slides/dummy_image2.jpg" 
             data-src="../images/slides/dummy_image2.jpg"> 
            </div> 
            <div data-thumb="../images/slides/dummy_image3.jpg" 
            data-src="../images/slides/dummy_image3.jpg"> 

            </div> 
            <div data-thumb="../images/slides/dummy_image4.jpg" 
            data-src="../images/slides/dummy_image4.jpg"> 
            </div> 
            <div data-thumb="../images/slides/dummy_image5.jpg" 
            data-src="../images/slides/dummy_image5.jpg"></div> 

        </div> 

    </div> 

</body> 
</html>
 

Details of the above code:

  • ID ('#Id_4’) is wrapped within the <div>, which includes class ‘camera_wrap’.
  • Within this class data-thumb and data-src are added which holds the URL of the thumbnails and images respectively.
  • For a full screen slideshow define the relative height and width attributes in the jQuery function() wrapped within the <script> tag.

Output

Execute the above code and open it in any browser, you would see the images sliding in fullscreen. Snapshot of the same is as shown below:

Fullscreen sliding

Figure 2: Fullscreen sliding

Example 3: Slideshow using HTML elements and data-attributes.

Below code demonstrate the example for the slideshow, which includes the HTML tags and the data-attributes

Listing 3:features.htm

<!DOCTYPE html> 

<html> 
<head> 

    <title>Camera slider fullscreen example</title> 
    <link rel='stylesheet' id='camera-css'  href='../css/camera.css' type='text/css' > 
     <link rel='stylesheet' id='style-css'  href='../css/style.css' type='text/css' > 
    <script type='text/javascript' src='../scripts/jquery.min.js'></script> 
    <script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script> 
    <script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='../scripts/camera.min.js'></script> 

    <script> 
		jQuery(function(){ 

			jQuery('#id_4').camera({ 
				height: 'auto', 
				loader: 'pie', 
				pagination: false, 
				thumbnails: true, 
				hover: false, 
				opacityOnGrid: false, 

			}); 

		}); 
	</script> 

</head> 
<body> 

	<div class="container"> 
        <div class="camera_wrap " id="id_4"> 
            <div data-thumb="../images/slides/dummy_image1.jpg" 
            data-src="../images/slides/dummy_image1.jpg"> 
            </div> 
             <div data-thumb="../images/slides/dummy_image2.jpg" 
             data-src="../images/slides/dummy_image2.jpg"> 
            </div> 
            <div data-thumb="../images/slides/dummy_image3.jpg" 
            data-src="../images/slides/dummy_image3.jpg"> 

            </div> 
            <div data-thumb="../images/slides/dummy_image4.jpg" 
            data-src="../images/slides/dummy_image4.jpg"> 
            </div> 
            <div data-thumb="../images/slides/dummy_image5.jpg" 
            data-src="../images/slides/dummy_image5.jpg"></div> 

        </div> 

    </div> 

</body> 
</html>

Details of the above code:

Using the data-attribute, data-time & data-transPeriod the transition and the time elapse between the slides is been set in milliseconds.

Output

Execute the above code and open it in any browser, you would see the images sliding. Snapshot of the same is as shown below:

Images Sliding

Figure 3: Images Sliding

Source code of the above examples is attached with this post. You can experiment with more features of this nice plugin by manipulating the source code.

Hope you enjoyed reading the article!!!



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login