Responsive Slideshow With Fullscreen Mode Support - jsRapPicture

File Size: 6.66 KB
Views Total: 808
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Slideshow With Fullscreen Mode Support - jsRapPicture

jsRapPicture is a responsive, dynamic slideshow plugin for fading in and out a set of images manually or automatically.

Also comes with a Fullscreen option that enables the user to view the slideshow in the browser's fullscreen viewing mode.

For Manually mode, users are able to manually switch between images by hitting the current image or by clicking the 'Next Image' or 'Previous Image' link in the context menu when right-clicking the slideshow.

How to use it:

1. Load jQuery library and the jsRapPicture plugin's files in the document.

<link rel="stylesheet" href="/path/to/jsRapPicture.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jsRapPicture.js"></script>

2. Create a container element to hold the slideshow.

<div id="example"></div>

3. Initialize the plugin on the element, set the path to the first image and define the path to the next image using the onNext function.

$('#example').jsRapPicture({
  src: '1.jpg'
  onNext: function (next) {
    this.SetImg('next.jpg');
  }
});

4. Enable & config the Autoplay mode. Default: false.

$('#example').jsRapPicture({
  autoplay: true,
  autoplaySpeed: 3000
});

5. Customize the animation speed. Default: 2000.

$('#example').jsRapPicture({
  transition: 1000
});

6. Determine whether or not to show the default context menu on right click. Default: true.

$('#example').jsRapPicture({
  showDefaultMenu: true
});

7. Or create your own context menu using the customMenu option.

$('#example').jsRapPicture({
  customMenu: ['Info'],
  onClickMenu: function (li) {
    var w = this.imgMain[0].naturalWidth;
    var h = this.imgMain[0].naturalHeight;
        alert('Image width ' + w + ' \nImage height ' + h);
    }
});

8. More callback functions.

$('#example').jsRapPicture({
  onFullScreen: function(fullScreenMode){
    // do something
  }
  onLoad: function(){
    // do something
  }
});

9. Enable autoplay and fullscreen modes on the slideshow.

const instance = $('#example').jsRapPicture();
instance.SetAuto(true);
instance.SetFullscreen(true);

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