LEARN Web Designing And Web Development

Responsive 3D Cover Flow Gallery Plugin with jQuery

File Size:	312 KB
Views Total:	484
Last Update:	11 days ago
Publish Date:	11 days ago
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2014

Chrome, IE10+, FireFox, Opera, Safaricover flowCarousel

responsiveGallery is a jQuery plugin helps you to create a responsive, coverflow-style image carousel/gallery with 3D perspective transforms.

How to use it:

1. Include the jquery-responsiveGallery.css in the head section of the Html page.

1	<link rel="stylesheet" href="css/jquery-responsiveGallery.css">

2. Include jQuery library, modernizr.js and the jQuery responsiveGallery before the closing body tag.

1	<script src="lib/modernizr.custom.js"></script>

2	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

3	<script src="src/jquery.responsiveGallery.js"></script>

3. Build the structure for the coverflow-style carousel.

01	<div class="w-gallery">

02	<section id="responsiveGallery-container" class="responsiveGallery-container">

03

04	<a class="responsiveGallery-btn responsiveGallery-btn_prev" href="javascript:void(0);"></a>

05	<a class="responsiveGallery-btn responsiveGallery-btn_next" href="javascript:void(0);"></a>

06

07	<ul class="responsiveGallery-wrapper">

08	<li class="responsiveGallery-item">

09	<a href="#" class="responsivGallery-link">

10	<img src="1.jpg" height="320" width="320" alt="" class="responsivGallery-pic">

11

</a>

12	<div class="w-responsivGallery-info">

13	<h2 class="responsivGallery-name">Google</h2>

14	<h3 class="responsivGallery-position">www.google.com</h3>

15

</div>

16

</li>

17

18	<li class="responsiveGallery-item">

19	<a href="#" class="responsivGallery-link">

20	<img src="2.jpg" height="320" width="320" alt="" class="responsivGallery-pic">

21

</a>

22	<div class="w-responsivGallery-info">

23	<h2 class="responsivGallery-name">Google</h2>

24	<h3 class="responsivGallery-position">www.google.com</h3>

25

</div>

26

</li>

27

28	<li class="responsiveGallery-item">

29	<a href="#" class="responsivGallery-link">

30	<img src="3.jpg" height="320" width="320" alt="" class="responsivGallery-pic">

31

</a>

32	<div class="w-responsivGallery-info">

33	<h2 class="responsivGallery-name">Google</h2>

34	<h3 class="responsivGallery-position">www.google.com</h3>

35

</div>

36

</li>

37

</ul>

38	</section>

39

</div>

4. Initialize the plugin.

1	$(function () {

2	$('.responsiveGallery-wrapper').responsiveGallery({

3	animatDuration: 400,// ms

4	$btn_prev: $('.responsiveGallery-btn_prev'),

5	$btn_next: $('.responsiveGallery-btn_next')

6

});

7

});

---

This awesome jQuery plugin is developed by David-CodingSerf. For more Advanced Usages, please check the demo page or visit the official website.

• Prev: Lightweight Photo Gallery & Lightbox Plugin - mbufung
• Next: