jQuery Slider Plugin (Camera) With Fancy Transition Effects__CDN Easy Installation

"Camera" is a great jQuery slider plugin. It not only provides dozens of fancy transition effects, but also support RWD image, which is an important feature for mobile device. Besides, you can customize almost everything you could imagine.

However, it's not easy to install any of the jQuery slideshow plugins. The reason is that these plugins need web hosting space which support "directory structure", such as Google Drive.

But Google has announced "Google Drive deprecating web hosting support" in Aug 2016, now it's very hard to find free web hosting space which support "directory structure".

The good news is, WFU find this "CDN service", which hosts official Camera plugin files. It means that blog owners don't need to worry about hosting space any more. Just follow the tutorial in this post for easy installation.

Click to see DEMO page

I. Camera Instruction

Here is the summary of this slider plugin:

• Official site: http://www.pixedelic.com/plugins/camera/
• Open source, MIT license
• Dozens of great transition effects
• Responsive slideshow images
• Slideshow for text of video
• Provide API, everything can be customized

II. Installation

Before editing the template, if this is your first time to install my widgets, it's recommended to read "How to backup Blogger template" in advance.

Please follow the steps below if you use Blogger blog:

• Go To Blogger Dashboard → Template → Edit HTML
• Click into template area → Press Ctrl-F to find the string </head>
• Paste the following code just before this line:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/jquery.mobile.customized.min.js'></script>
<script src='
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/camera.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/css/camera.min.css' rel='stylesheet' type='text/css' media='all'></link>
For the 1st line, please refer to "The Tips on How to Link to JQuery Files" and check if you've installed other jQuery codes. If so, please delete them.

Now you've installed all necessary Camera official files from CDN, then I'll explain how to execute the slideshow and adjust the settings.

III. Usage Tutorial

Next, find the place you would like to display the slideshow in the template, or, you could add a Blogger widget "HTML/Javascript", then paste the following codes:


To modify the default values, please refer to the alphabetical character above, and also see "Official instruction":

B: You could change the green string, but this string must be same as the green string in I line. The blue string is the class name of skin, please check official instruction if you would like to modify this one.

C~F: Between C~F lines, it is the structure of one photo to make Camera work, please copy all codes in this section, then insert after F line for an extra photo. If you would add two more photos, then insert C~F lines twice.To ensure you copy the right section, I've marked the "div" text in C and F line with orange color.

C in detail:

• data-src: Replace the blue text with your image url
• data-target="_blank": The link will open in new window. If you don't need this function, just delete it.
• data-link: Replace the green text with your link. If you don't need this function, just delete it.
• data-thumb: This is the thumbnail url. If you don't need this function, just delete it.

D~E: The caption. If you don't need it , just delete the two lines.

D: Replace the blue text with your caption effect, please refer to official instruction in "CAPTIONS" area.

E: Replace the text with your caption.

I: Make sure the green text is same as green text in B line.

J: Option "time" means the duration of each image. The red number 3000 means 3 second. If you want the duration of 1 sec, just change as 1000.

K: The blue number 400 means fix the height of photo as 400px. If you don't need this option, just delete this line.

L: The default transition effect is "random". There are more than 30 effects and please refer to official instruction in "fx: 'random'" area. For example, you could change the string as 'simpleFade, mosaic', just separate each effect with comma.

M~N: The 2 lines enable the function of thumbnail. If you don't need this function, please replace the value of option "pagination" with "true", and replace the value of option "thumbnails" with "false".

Please be reminded that between J~N lines, separate each line with comma, but no comma after the last setting.


These are official DEMO pages, and you could see more effects of this plugin:

Basic

Video

Full Screen

IV. Picasa Photos

This is not a good news for Blogger blog because this plugin conflicts with Picasa photos(if you upload images from Blogger, they'll be stored in Picasa).

If your images are from Picasa, and would like use this plugin without failure, please follow these steps:

• Download this file: camera-all.js
• Put this file in your Dropbox
• Use "Dropbox Direct Link Generator" to get the direct link
• In "II. Installation" → there are 3 js link from CDN. Just replace the "camera-all.js" with the original 3 js, then everything is done.